如何在VSCode中配置ESLint和Prettier以规范代码-VSCode-PHP中文网

如何在VSCode中配置ESLint和Prettier以规范代码

P粉986688829

发布： 2025-12-06 07:53:07

原创

942人浏览过

在 VSCode 中同时配置 ESLint 和 Prettier 的关键是协同分工：ESLint 检查代码质量与错误，Prettier 统一格式；需安装对应扩展与依赖（eslint、prettier、eslint-config-prettier、eslint-plugin-prettier），配置 .eslintrc.js 启用 plugin:prettier/recommended，设置 .prettierrc 定义格式规则，并在 VSCode 中启用 Format On Save、设置默认 Formatter 为 Prettier、配置 codeActionsOnSave 自动修复 ESLint 问题。

如何在vscode中配置eslint和prettier以规范代码

在 VSCode 中同时配置 ESLint 和 Prettier，关键在于让两者协同工作：ESLint 负责代码质量与潜在错误检查，Prettier 负责统一格式（缩进、引号、换行等），避免规则冲突。

安装必要扩展和依赖

先确保本地项目和编辑器都装好了基础工具：

VSCode 扩展：安装 ESLint（由 Dirk Baeumer 维护）和 Prettier（由 Esben Petersen 开发）两个官方推荐插件
项目依赖：在项目根目录运行以下命令（推荐使用 --save-dev）

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

其中 eslint-config-prettier 用于关闭 ESLint 中与 Prettier 冲突的规则，eslint-plugin-prettier 则把 Prettier 当作 ESLint 的一条规则来执行（比如自动修复格式问题）。

配置 ESLint 规则（.eslintrc.js 或 .eslintrc.json）

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

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error"
  }
};

注意："plugin:prettier/recommended" 已内置 eslint-config-prettier，会自动禁用所有与 Prettier 冲突的规则，无需手动写 extends: ["eslint-config-prettier"]。

配置 Prettier 选项（.prettierrc）

在项目根目录新建 .prettierrc（JSON 格式），定义你想要的格式风格：

AILOGO

LOGO123旗下的AI智能LOGO生成器，只需输入品牌名称就能免费在线生成公司logo设计及配套企业VI，轻松打造您的个性品牌！

139

查看详情

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

这些设置会直接影响 ESLint 的 prettier/prettier 规则报错和自动修复行为。VSCode 的 Prettier 插件也会读取它来做实时格式化。

设置 VSCode 自动修复与保存行为

打开 VSCode 设置（Ctrl+, 或 Cmd+,），搜索并勾选或配置以下几项：

Format On Save：启用，确保保存时自动格式化
Default Formatter：设为 esbenp.prettier-vscode（即 Prettier 插件）
ESLint: Auto Fix On Save：在设置中搜 “eslint.autoFixOnSave”，启用（注意：VSCode 1.8x+ 后该选项已移至 editor.codeActionsOnSave）

更推荐的方式是在 settings.json（用户或工作区）中添加：

"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"

这样保存时先由 ESLint（含 Prettier 规则）统一修复，再由 Prettier 做最终格式化，流程清晰不重复。

基本上就这些。配置完成后重启 VSCode，打开一个 JS/TS 文件，修改后保存，就能看到错误提示、自动修复和格式统一同步生效了。

以上就是如何在VSCode中配置ESLint和Prettier以规范代码的详细内容，更多请关注php中文网其它相关文章！