配置vscode集成ESLint与Prettier可实现代码风格统一和自动修复。1. ESLint负责代码质量，Prettier专注格式化；2. 安装eslint、prettier及相关插件；3. 配置.eslintrc.js启用prettier规则；4. 创建.prettierrc定义格式选项；5. VSCode安装对应插件并开启保存自动格式化；6. 注意避免插件冲突及环境差异问题。

在现代前端开发中，保持代码风格统一和减少低级错误是团队协作的关键。VSCode 集成 ESLint 与 Prettier 是目前最主流的代码检查与格式化方案之一。通过合理配置，可以实现保存文件时自动修复问题、统一编码规范，并提升开发效率。

ESLint 与 Prettier 的分工

ESLint 负责代码质量检查，比如变量未使用、语法错误、潜在 bug 等。它也可以处理部分代码风格问题（如引号、缩进），但更推荐将风格控制交给 Prettier。

Prettier 是一个“ opinionated ”代码格式化工具，专注于统一代码外观。它会强制重写代码结构（如换行、括号位置），确保所有人的输出一致。

两者结合使用时，应让 ESLint 接受 Prettier 的风格规则，避免冲突。可通过 eslint-config-prettier 关闭 ESLint 中与格式相关的规则。

项目级配置步骤

在项目根目录完成以下配置，确保团队成员共享相同规则：

集简云

软件集成平台，快速建立企业自动化与智能化

22

查看详情

• 安装依赖： npm install –save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
• 创建或更新 .eslintrc.js： module.exports = { extends: [ ‘eslint:recommended’, ‘plugin:prettier/recommended’ // 启用 Prettier 并关闭冲突规则 ], parserOptions: { ecmaVersion: 12 }, env: { browser: true, es2021: true } };
• 添加 .prettierrc 定义格式规则： { “semi”: true, “trailingComma”: “es5”, “singleQuote”: true, “printWidth”: 80, “tabWidth”: 2 }
• 可选：添加 .prettierignore 忽略特定文件（如构建产物）

VSCode 编辑器设置

确保本地编辑器能正确触发自动格式化：

• 安装 VSCode 插件：ESLint 和 Prettier – Code formatter
• 在用户或工作区设置中启用保存时格式化： “editor.formatOnSave”: true, “editor.defaultFormatter”: “esbenp.prettier-vscode”
• 若项目使用 ESLint 推荐配置，建议设置： “eslint.validate”: [“javascript“, “typescript“, “vue“]

这样，在保存文件时，ESLint 会先标记问题，Prettier 再执行格式化，最终实现“边写边修”。

常见问题与注意事项

实际使用中可能会遇到规则冲突或格式化未生效的情况：

• 确认 Prettier 没有被其他插件覆盖，如 Beautify；禁用或卸载冲突插件
• 如果 ESLint 报错“Definition for rule ‘xxx’ was not found”，检查插件是否安装完整
• 团队项目建议统一 node.js 和 npm 版本，防止因环境差异导致格式结果不同
• 某些框架（如 vue）需额外安装对应插件，例如 eslint-plugin-vue

基本上就这些。只要配置一次，后续开发就能享受干净、一致的代码体验。不复杂但容易忽略细节。