使用WebStorm开发Vue3项目

记录一下使用WebStorm开发Vu3项目时的配置

现在WebStorm可以个人免费使用啦!🤩

基本配置

打包工具:Vite
前端框架:ElementPlus
开发语言:Vue3、TypeScript、Sass
代码检查:ESLint、Prettier
IDE:WebStorm 2024.2

首先说一下版本兼容问题,ElementPlus>=2.8.5需要Sass>=1.79.0,但是升级了Sass后,会导致Element提示很多警告,猜测原因是因为Sass在后续版本修改了一些语法规则,而Element没有跟进修改。这些警告虽然不影响代码运行,但是看着糟心,目前只能等待官方后续更新了。

搭建Vue3项目

通过Vite搭建Vue3项目

npm create vite@latest my-vue-app -- --template vue-ts
  1. my-vue-app为项目文件夹名称
  2. vue-ts表示使用包含typescript的vue项目模板搭建

安装后的目录结构

├─ index.html
├─ package.json
├─ tsconfig.json #typescript配置文件
├─ tsconfig.app.json #typescript配置文件,本项目的ts配置,自动引用到tsconfig.json中
├─ tsconfig.node.json #typescript配置文件,为vite服务的ts配置,自动引用到tsconfig.json中
├─ vite.config.ts #vite配置文件
├─ src
│  ├─ assets #静态文件
│  ├─ components #组件
│  ├─ App.vue
│  ├─ main.ts

安装框架和其他工具包

修改项目根目录下的package.json文件,添加前端框架和其他依赖包

{"name": "my-vue-app","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vue-tsc -b && vite build","preview": "vite preview"},"dependencies": {"vue": "^3.5.12","element-plus": "^2.8.1"},"devDependencies": {"@vitejs/plugin-vue": "^5.1.4","typescript": "~5.6.2","vite": "^5.4.10","vue-tsc": "^2.1.8","sass": "^1.77.0","unplugin-auto-import": "^0.18.3","unplugin-vue-components": "^0.27.4","@eslint/js": "^9.13.0","@rushstack/eslint-patch": "^1.10.4","eslint-plugin-prettier": "^5.2.1","eslint-plugin-promise": "^6.6.0","eslint-plugin-vue": "^9.29.0","typescript-eslint": "^8.10.0","@vue/eslint-config-prettier": "^10.0.0","@vue/eslint-config-typescript": "^14.1.1"}
}
  1. unplugin-auto-importunplugin-vue-components为自动导入工具,可在编写代码时,可以无需import ref from 'vue'而直接使用ref,工具配置后会自动导入组件。
  2. 名称中包含eslint的依赖包为ESLint规则,后续在eslint.config.js中配置。
  3. 正如一开始所说,由于ElementPlus和Sass版本过高会出现警告的问题,所以目前安装的低版本,等待官方修复问题后,再升级版本。

运行安装依赖

npm install

如果安装时间过久,或者提示网络超时,可以切换npm源后再重新安装

# 切换为淘宝镜像
npm config set registry https://registry.npmmirror.com/

配置vite:vite.config.ts

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite';
import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
import Components from 'unplugin-vue-components/vite';
import path from 'path';export default defineConfig(({ mode }) => {// 环境变量const env = loadEnv(mode, process.cwd(), '');return {plugins: [vue(),AutoImport({// 自动导入的组件imports: ['vue', 'vue-router'],// 解析器:当前使用了ElementPlus的解析器resolvers: [ElementPlusResolver()],// 开启eslinteslintrc: { enabled: true },}),Components({// 解析器:当前使用了ElementPlus的解析器resolvers: [ElementPlusResolver({ importStyle: 'sass' })],// 以下文件夹中的组件自动导入dirs: ['src/components'],}),],resolve: {alias: {// 设置路径别名'@': path.resolve(__dirname, './src'),},},server: {// 网络请求代理proxy: {'/t/': {target: env.VITE_SERVER,changeOrigin: true,},},},};
});

运行项目

npm run dev

运行后会自动生成文件auto-imports.d.tscomponents.d.ts,又因为AutoImport开启了eslintrc,还会生成文件.eslintrc-auto-import.json

配置eslint:eslint.config.ts

目前使用的eslint9版本,配置文件与之前版本的写法可能不一致。
注意:WebStorm2024版本才支持eslint9版本的配置文件。

创建eslint配置文件eslint.config.js

import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
import autoImport from './.eslintrc-auto-import.json' assert { type: 'json' };export default [{ files: ['**/*.{js,mjs,cjs,ts,vue}'] },// 导入auto-import插件配置(目前暂不支持eslint9){ files: ['**/*.{js,mjs,cjs,ts,vue}'], languageOptions: autoImport },pluginJs.configs.recommended,...tseslint.configs.recommended,...pluginVue.configs['flat/essential'],{ files: ['**/*.vue'], languageOptions: { parserOptions: { parser: tseslint.parser } } },// 自定义规则{rules: {// 使用any类型时提示警告'@typescript-eslint/no-explicit-any': 'warn',},},eslintPluginPrettierRecommended,
];
  1. 由于目前unplugin-auto-import并不支持eslint9,所以需要导入.eslintrc-auto-import.json文件消除错误提示。
  2. 一般来说eslint-plugin-prettier的规则要放在最后,保证它的规则不会被覆盖。
  3. 如果要增加更多规则,请查看eslint配置文档。

修改ts配置:tsconfig.app.json

修改ts配置,添加上一步自动生成的.d.ts文件,添加后就不会提示Vue的导入错误了。

# 在include中添加文件名
{"compilerOptions": {...}"include": [..., "auto-imports.d.ts", "components.d.ts"]
}

修改WebStorm设置

  • 选择自动ESLint配置,编辑器会自动寻找根目录下的.eslint.config.js文件。
  • 勾选eslint --fix会在保存文件时自动格式化代码。
    在这里插入图片描述
    在这里插入图片描述
    修改后重启一下编辑器,或者重启语言服务中的两个服务。

完成后打开App.vue文件,删除import HelloWorld from './components/HelloWorld.vue',并没有HelloWorld组件未导入的错误提示,则说明配置生效了。

配置prettier:.prettierrc.json

默认prettier的规则可能不适合个人习惯,可以通过添加.prettierrc.json配置文件进行修改规则

{"semi": true, 	// 句尾增加分号"tabWidth": 4,	//使用4个空格缩进"singleQuote": true,	// 使用单引号"printWidth": 200,	// 超过200字符换行"arrowParens": "avoid",	// 单箭头函数不加括号"bracketSameLine": true	// 对象前后增加空格
}

还有很多规则,可以查看prettier文档。

环境变量env

创建文件.env.env.development.env.production分别对应默认配置、开发环境配置、生成环境配置

// .env.development
VITE_SERVER = http://dev.xxx.com
// .env.production
VITE_SERVER = http://pro.xxx.com

修改打包命令

// package.json
{..."scripts":{..."build": "vite build --mode production","build-dev": "vite build --mode development",...}...
}

更多有关环境变量的配置和使用,请查看vite文档。

其他问题

  1. 为什么用了ESLint还要用Prettier,两者分别有什么作用?
    Prettier用于格式化代码,确保缩进、分号、引号、换行等代码格式一致;ESLint则用于代码语法检测,提示错误。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/464857.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ansys HFSS:外壳的屏蔽效果演示

欢迎回来!随着电子系统变得越来越复杂和集成,确保适当的屏蔽以减轻电磁干扰 (EMI) 变得越来越重要。 继续讨论屏蔽效果,我们现在将重点转移到另一个强大的工具上:Ansys HFSS(高频结构仿真器&am…

Python基于TensorFlow实现双向循环神经网络GRU加注意力机制分类模型(BiGRU-Attention分类算法)项目实战

说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后关注获取。 1.项目背景 随着深度学习技术的发展,循环神经网络(RNN)及其变种如门控循环…

【C++】C++的单例模式

二十四、C的单例模式 1、C的单例模式 本小标题不是讨论C的语言特性,而是一种设计模式,用于确保一个类在任何情况下都只有一个实例,并提供一个全局访问点来获取这个实例。即C的单例模式。这种模式常用于资源管理,如‌线程池、‌缓…

单元测试(Junit)

系统—模块—子模块,子模块中不可分割的程序单元的测试,单元的粒度根据实际情况可能是 类或方法等。 面向对象编程中,最小单元就是方法。 单元测试目的是在集成测试和功能测试之前对系统可测试单元进行逐一检查和验证。 单元测试基本原则 …

这个自动化框架吧,解决接口间数据依赖

在实际的测试工作中,在做接口自动化测试时往往会遇到接口间数据依赖问题,即API_03的请求参数来源于API_02的响应数据,API_02的请求参数又来源于API_01的响应数据。 因此通过自动化方式测试API_03接口时,需要预先请求API_02接口&a…

JeecgBoot入门

最近在了解低代码平台,其中关注到gitee上开源项目JeecgBoot,JeecgBoot官方也有比较完整的入门教学文档,这里我们将耕者官方教程学习,并将其记录下来。 一、项目简介 JeecgBoot 是一款基于代码生成器的低代码开发平台拥有零代码能力…

修改HarmonyOS鸿蒙图标和名字,打包后安装到真机,应用图标丢失变成透明,修改名字也不生效,还是默认的labeL解决方案教程

HarmonyOS鸿蒙打包hap 安装应用到桌面没有图标,用hdc安装到真机,打包后应用图标丢失变成透明,名字也还是默认的label的bug,以下是解决方案 以下是修改方案: 1、修改应用名字: 2、修改应用图标&#xff1a…

MYSQL安装(ubuntu系统)

rpm -qa 查询安装软件包 ps axj 查询服务 卸载mysql(万不得已) ps axj | grep mysql 查看是否存在mysql服务 systemctl stop mysqld 关闭该服务 rpm -qa | grep mysql 查安装mysql安装包 rmp -qa | grep mysql | xargs (yum apt) -y remove进行批量…

比ChatGPT更牛!苹果新AI模型刷新交互体验!能看懂你的手机屏幕!平板和安卓机也都行

家人们,苹果一直在悄悄进步! 近期,据小鹿观察,各大科技巨头不仅在提升模型解决复杂问题的能力上竞争激烈,而且还在大语言模型应用于用户界面(UI)交互方面上暗暗发力! 最近&#xf…

InstructIR: High-Quality Image Restoration Following Human Instructions 论文阅读笔记

这是Radu大佬所在的Wrzburg大学的computer vision lab实验室发表在ECCV2024上的一篇论文,代码开源。文章提出了一种文本引导的All-in-One的restoration模型,如下图所示: 这个工作其实跟"InstructPix2Pix: Learning to Follow Image Edit…

解决使用Golang的email库发送qq邮件报错short response,错误类型为textproto.ProtocolError

问题阐述 使用email库发送QQ邮件,采用587端口: package mainimport ("fmt""net/smtp""github.com/jordan-wright/email" )func SendEmail(sendTo string, subject string, body string) (err error) {e : email.NewEmai…

【北京迅为】《STM32MP157开发板嵌入式开发指南》-第七十二章 Debian文件系统

iTOP-STM32MP157开发板采用ST推出的双核cortex-A7单核cortex-M4异构处理器,既可用Linux、又可以用于STM32单片机开发。开发板采用核心板底板结构,主频650M、1G内存、8G存储,核心板采用工业级板对板连接器,高可靠,牢固耐…

Spring框架的JDBC模板技术

目录 一、JDBC模板类的使用 1.引入依赖 2.测试类 3.运行,查看数据库 二、使用Spring框架来管理模板类 1.配置文件 2.测试类 3.运行,查看数据库 三、Spring框架管理开源的连接池 1.配置开源的连接池 2.将数据库连接的信息配置到属性文件中 3.核…

【万字详文介绍】:迭代扩张卷积神经网络(IDCNN)

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢…

2-Ubuntu/Windows系统启动盘制作

学习目标: 掌握使用Win32DiskImager、Rufus等工具制作系统启动盘的基本步骤。独立将ISO镜像文件写入USB闪存驱动器,确保在需要时顺利安装或修复系统。通过学习如何选择正确的源文件和目标驱动器,理解启动盘的使用场景和注意事项,…

简介Voronoi图Voronoi Diagrams

这是计算机的经典算法。 问题引入 倘若一张大白纸上有很多三角点,掉进去一个五星点,问,哪个三角离着五星最近?简单,算距离呗,这个五星到其他所有三角点的距离,找到最小的那个就行。 若掉进去…

【进阶sql】复杂sql收集及解析【mysql】

开发时会出现,必须写一些较复杂sql的场景 可能是给会sql的客户 提供一些统计sql 或是临时需要统计数据信息但是 开发一个统计功能有来不及的情况 也可能是报表系统组件 只支持 sql统计的情况 特地记录下这些sql 作为积累 substring 截取查询出的字符串&#xff…

SLF4J: Failed to load class “org.slf4j.impl.StaticLoggerBinder“

SLF4J常见问题 导入依赖&#xff1a; <dependency><groupId>log4j</groupId><artifactId>log4j</artifactId><version>1.2.17</version> </dependency> <dependency><groupId>org.slf4j</groupId><arti…

002-Kotlin界面开发之Kotlin旋风之旅

Kotlin旋风之旅 Compose Desktop中哪些Kotlin知识是必须的&#xff1f; 在学习Compose Desktop中&#xff0c;以下Kotlin知识是必须的&#xff1a; 基础语法&#xff1a;包括变量声明、数据类型、条件语句、循环等。面向对象编程&#xff1a;类与对象、继承、接口、抽象类等。…

RSTP的工作过程

RSTP简介&#xff1a; 生成树协议&#xff08;STP&#xff09;用于在网络中防止环路产生&#xff0c;但 STP 的收敛速度较慢。 RSTP&#xff08;Rapid Spanning Tree Protocol &#xff09;快速生成树协议&#xff1a;RSTP 是对 STP 的改进&#xff0c;它能在网络拓扑发生变化…