ESLint和Prettier：在VS Code中强制执行代码规范-VSCode-PHP中文网

ESLint和Prettier：在VS Code中强制执行代码规范

P粉986688829

发布： 2025-12-04 20:38:02

原创

128人浏览过

ESLint负责代码质量检查，Prettier专注格式统一，通过eslint-plugin-prettier集成并禁用冲突规则，配置"source.fixAll.eslint"实现保存时统一修复，关闭Prettier的formatOnSave避免重复格式化。

eslint和prettier：在vs code中强制执行代码规范

在 VS Code 中同时使用 ESLint 和 Prettier，目标不是让它们“打架”，而是让 ESLint 负责代码质量（比如未定义变量、潜在 bug），Prettier 负责格式统一（比如缩进、引号、换行）。关键在于配置它们协同工作，避免冲突，并让保存时自动修复。

安装必要插件和依赖

先确保本地项目或全局装好核心工具：

VS Code 插件：安装官方 ESLint 和 Prettier 扩展（推荐用 Esben Petersen 维护的 Prettier 插件）
项目依赖：npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
eslint-config-prettier 用来关闭 ESLint 中与 Prettier 冲突的规则；eslint-plugin-prettier 则把 Prettier 当作 ESLint 的一条规则来运行（报错+自动修复）

配置 ESLint 使用 Prettier

在项目根目录创建 .eslintrc.js（或 .eslintrc.json），内容示例如下：

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended" // 这行会自动启用 plugin 并禁用冲突规则
  ],
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error" // 格式问题也作为 ESLint 错误提示
  }
};

登录后复制

注意："plugin:prettier/recommended" 已包含 eslint-config-prettier，无需再手动 extend 它。

VS Code 设置自动保存时修复

在工作区或用户设置（settings.json）中添加以下配置：

小云雀

剪映出品的AI视频和图片创作助手

1587

查看详情

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "typescript", "vue"], // 按需补充语言
  "prettier.requireConfig": false, // 若无 prettier.config.js，可设为 false；有则建议设为 true
  "prettier.semi": true,
  "prettier.singleQuote": true // 这些只是示例，实际以你 .prettierrc 为准
}

登录后复制

重点是 source.fixAll.eslint：它会让 ESLint 在保存时统一处理所有可修复问题（包括 Prettier 格式问题）；不用同时开启 Prettier 的 formatOnSave，否则可能重复格式化甚至冲突。

可选：添加 Prettier 配置文件

在项目根目录加 .prettierrc（JSON 格式），明确格式偏好，例如：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80,
  "arrowParens": "avoid"
}

登录后复制

这样团队成员无需在 VS Code 设置里各自维护格式选项，配置统一且可提交到仓库。

基本上就这些。不复杂但容易忽略的是：别让 ESLint 和 Prettier 各自“抢着修”——关掉 Prettier 的 formatOnSave，只靠 ESLint 的 fixAll 来驱动，才能真正协同。

以上就是ESLint和Prettier：在VS Code中强制执行代码规范的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

VSCode代码重构技巧_利用扩展提升质量 VSCode WebStorm习惯_前端开发平滑过渡 VSCode linting集成_实时代码质量检查 VSCode配置管理技巧_团队统一开发环境移动开发工作流：VSCode与React Native开发环境