记录一下使用WebStorm开发Vu3项目时的配置**现在WebStorm可以个人免费使用啦??基本配置----打包工具Vite 前端框架ElementPlus 开发语言Vue3、TypeScript、Sass 代码检查ESLint、Prettier IDEWebStorm 2024.2首先说一下版本兼容问题ElementPlus2.8.5需要Sass1.79.0但是升级了Sass后会导致Element提示很多警告猜测原因是因为Sass在后续版本修改了一些语法规则而Element没有跟进修改。这些警告虽然不影响代码运行但是看着糟心目前只能等待官方后续更新了。搭建Vue3项目--------### 通过Vite搭建Vue3项目 npm create vitelatest 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-import和unplugin-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/ #### 配置vitevite.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()], // 开启eslint eslintrc: { 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.ts和components.d.ts又因为AutoImport开启了eslintrc还会生成文件.eslintrc-auto-import.json#### 配置eslinteslint.config.ts目前使用的eslint9版本配置文件与之前版本的写法可能不一致。注意WebStorm2024版本才支持eslint9版本的配置文件。创建eslint配置文件eslint.config.jsimport 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则用于代码语法检测提示错误。2. 换行符的问题 Windows系统使用的换行符为CRLF(/r/n)而Linux和MacOS使用的是LF(/n)为了统一可在.prettierrc.json中添加endOfLine: lf同时需要修改git配置git config --global core.autocrlf input表示在提交时将CRLF转换为LF在检出时不进行转换。默认git会在检出时自动转换为CRLF此时就会与当前的代码格式不一致可能会导致冲突。