使用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项目

1. npm create vite@latest my-vue-app -- --template vue-ts

复制代码

• my-vue-app为项目文件夹名称
  
• vue-ts表现使用包含typescript的vue项目模板搭建
  

安装后的目录布局

1. ├─ index.html
2. ├─ package.json
3. ├─ tsconfig.json #typescript配置文件
4. ├─ tsconfig.app.json #typescript配置文件，本项目的ts配置，自动引用到tsconfig.json中
5. ├─ tsconfig.node.json #typescript配置文件，为vite服务的ts配置，自动引用到tsconfig.json中
6. ├─ vite.config.ts #vite配置文件
7. ├─ src
8. │  ├─ assets #静态文件
9. │  ├─ components #组件
10. │  ├─ App.vue
11. │  ├─ main.ts

复制代码

安装框架和其他工具包

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

1. {
2.   "name": "my-vue-app",
3.   "private": true,
4.   "version": "0.0.0",
5.   "type": "module",
6.   "scripts": {
7.     "dev": "vite",
8.     "build": "vue-tsc -b && vite build",
9.     "preview": "vite preview"
10.   },
11.   "dependencies": {
12.     "vue": "^3.5.12",
13.     "element-plus": "^2.8.1"
14.   },
15.   "devDependencies": {
16.     "@vitejs/plugin-vue": "^5.1.4",
17.     "typescript": "~5.6.2",
18.     "vite": "^5.4.10",
19.     "vue-tsc": "^2.1.8",
20.     "sass": "^1.77.0",
21.     "unplugin-auto-import": "^0.18.3",
22.     "unplugin-vue-components": "^0.27.4",
23.     "@eslint/js": "^9.13.0",
24.     "@rushstack/eslint-patch": "^1.10.4",
25.     "eslint-plugin-prettier": "^5.2.1",
26.     "eslint-plugin-promise": "^6.6.0",
27.     "eslint-plugin-vue": "^9.29.0",
28.     "typescript-eslint": "^8.10.0",
29.     "@vue/eslint-config-prettier": "^10.0.0",
30.     "@vue/eslint-config-typescript": "^14.1.1"
31.   }
32. }

复制代码

• unplugin-auto-import和unplugin-vue-components为自动导入工具，可在编写代码时，可以无需import ref from 'vue'而直接使用ref，工具配置后会自动导入组件。
  
• 名称中包含eslint的依靠包为ESLint规则，后续在eslint.config.js中配置。
  
• 正如一开始所说，由于ElementPlus和Sass版本过高会出现警告的标题，以是现在安装的低版本，期待官方修复标题后，再升级版本。
  

运行安装依靠

1. npm install

复制代码

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

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

复制代码

配置vite：vite.config.ts

1. import {defineConfig, loadEnv} from 'vite'
2. import vue from '@vitejs/plugin-vue'
3. import AutoImport from 'unplugin-auto-import/vite';
4. import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
5. import Components from 'unplugin-vue-components/vite';
6. import path from 'path';
8. export default defineConfig(({ mode }) => {
9.         // 环境变量
10.     const env = loadEnv(mode, process.cwd(), '');
11.     return {
12.         plugins: [
13.             vue(),
14.             AutoImport({
15.                     // 自动导入的组件
16.                 imports: ['vue', 'vue-router'],
17.                 // 解析器：当前使用了ElementPlus的解析器
18.                 resolvers: [ElementPlusResolver()],
19.                 // 开启eslint
20.                 eslintrc: { enabled: true },
21.             }),
22.             Components({
23.                     // 解析器：当前使用了ElementPlus的解析器
24.                 resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
25.                 // 以下文件夹中的组件自动导入
26.                 dirs: ['src/components'],
27.             }),
28.         ],
29.         resolve: {
30.             alias: {
31.                 // 设置路径别名
32.                 '@': path.resolve(__dirname, './src'),
33.             },
34.         },
35.         server: {
36.                 // 网络请求代理
37.             proxy: {
38.                 '/t/': {
39.                     target: env.VITE_SERVER,
40.                     changeOrigin: true,
41.                 },
42.             },
43.         },
44.     };
45. });

复制代码

运行项目

1. npm run dev

复制代码

运行后会自动生成文件auto-imports.d.ts和components.d.ts，又由于AutoImport开启了eslintrc，还会生成文件.eslintrc-auto-import.json
配置eslint：eslint.config.ts

现在使用的eslint9版本，配置文件与之前版本的写法大概不同等。
留意：WebStorm2024版本才支持eslint9版本的配置文件。
创建eslint配置文件eslint.config.js

1. import pluginJs from '@eslint/js';
2. import tseslint from 'typescript-eslint';
3. import pluginVue from 'eslint-plugin-vue';
4. import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
5. import autoImport from './.eslintrc-auto-import.json' assert { type: 'json' };
7. export default [
8.     { files: ['**/*.{js,mjs,cjs,ts,vue}'] },
9.     // 导入auto-import插件配置（目前暂不支持eslint9）
10.     { files: ['**/*.{js,mjs,cjs,ts,vue}'], languageOptions: autoImport },
11.     pluginJs.configs.recommended,
12.     ...tseslint.configs.recommended,
13.     ...pluginVue.configs['flat/essential'],
14.     { files: ['**/*.vue'], languageOptions: { parserOptions: { parser: tseslint.parser } } },
15.     // 自定义规则
16.     {
17.         rules: {
18.             // 使用any类型时提示警告
19.             '@typescript-eslint/no-explicit-any': 'warn',
20.         },
21.     },
22.     eslintPluginPrettierRecommended,
23. ];

复制代码

• 由于现在unplugin-auto-import并不支持eslint9，以是必要导入.eslintrc-auto-import.json文件消除错误提示。
  
• 一般来说eslint-plugin-prettier的规则要放在最后，保证它的规则不会被覆盖。
  
• 假如要增长更多规则，请检察eslint配置文档。
  

修改ts配置：tsconfig.app.json

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

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

复制代码

修改WebStorm设置

• 选择自动ESLint配置，编辑器会自动探求根目录下的.eslint.config.js文件。
  
• 勾选eslint --fix会在保存文件时自动格式化代码。
  
  
  
  
  
  
  修改后重启一下编辑器，或者重启语言服务中的两个服务。
  

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

默认prettier的规则大概不得当个人习惯，可以通过添加.prettierrc.json配置文件举行修改规则

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

复制代码

另有很多规则，可以检察prettier文档。
环境变量env

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

1. // .env.development
2. VITE_SERVER = http://dev.xxx.com
3. // .env.production
4. VITE_SERVER = http://pro.xxx.com

复制代码

修改打包命令

1. // package.json
2. {
3.         ...
4.         "scripts":{
5.                 ...
6.             "build": "vite build --mode production",
7.             "build-dev": "vite build --mode development",
8.             ...
9.         }
10.         ...
11. }

复制代码

更多有关环境变量的配置和使用，请检察vite文档。
其他标题

• 为什么用了ESLint还要用Prettier，两者分别有什么作用？
  Prettier用于格式化代码，确保缩进、分号、引号、换行等代码格式同等；ESLint则用于代码语法检测，提示错误。
  
• 换行符的标题
  Windows体系使用的换行符为CRLF(/r/n)，而Linux和MacOS使用的是LF(/n)，为了统一，可在.prettierrc.json中添加"endOfLine": "lf"，同时必要修改git配置git config --global core.autocrlf input，表现在提交时将CRLF转换为LF，在检出时不举行转换。默认git会在检出时自动转换为CRLF，此时就会与当前的代码格式不同等，大概会导致冲突。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。