Vue3.5 ESLint prettier 配置

### 正确配置 Vue 3.5 项目中 ESLint 和 Prettier #### 安装依赖包 为了实现代码规范检查和格式化，需安装必要的工具。通过 npm 或者 pnpm 来安装 `eslint`、`prettier` 及其插件。 ```bash pnpm add -D eslint prettier eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-prettier ``` 此命令会下载并安装 ESLint 和 Prettier 的核心库以及针对 TypeScript 和 Vue.js 特定的支持[^2]。 #### 创建配置文件 创建 `.eslintrc.cjs` 文件用于定义 ESLint 规则： ```javascript module.exports = { env: { browser: true, es2021: true, node: true, }, extends: [ "plugin:vue/vue3-recommended", "airbnb-base", "plugin:@typescript-eslint/recommended", "prettier", // 关闭 ESLint 中与 Prettier 冲突的规则 ], parserOptions: { ecmaVersion: 12, sourceType: 'module', parser: '@typescript-eslint/parser' }, plugins: ['@typescript-eslint', 'vue'], rules: { // 自定义规则... } }; ``` 同时还需要创建 `.prettierrc.cjs` 文件来指定 Prettier 的选项: ```javascript module.exports = { singleQuote: true, trailingComma: 'all', semi: false, } ``` 这些设置确保了两个工具之间的兼容性和一致性[^4]。 #### 解决冲突问题 为了避免 ESLint 和 Prettier 在处理相同类型的格式化时发生冲突，应该在项目的根目录下的 VSCode 设置 (`settings.json`) 中禁用默认的编辑器格式化功能，并让其中一个成为唯一的格式化工作者。通常推荐使用 Prettier 处理格式化工作而由 ESLint 负责语法错误检测和其他静态分析任务。 #### 添加 NPM Script 为了让开发者能够方便地执行代码风格检查和自动修复操作，在 package.json 中添加如下脚本条目： ```json { "scripts": { "lint": "eslint src/**/*.?(ts|tsx|js|jsx)", "format": "prettier --config .prettierrc.cjs \"src/**/*.{vue,js,ts}\" --write" } } ``` 这允许团队成员只需运行简单的命令即可保持整个代码库的一致性[^3]。 #### 使用 Husky 进行 Git Hook 配置 最后一步是利用 husky 工具为仓库增加 pre-commit hook，这样可以在每次提交之前自动触发 lint 和 format 命令，从而强制实施编码标准[^1]。 ```bash npx mrm@2 lint-staged ``` 以上就是在 Vue 3.5 项目里正确配置 ESLint 和 Prettier 达到最佳实践的方法。