先安装ESLint和Prettier依赖及VSCode插件，再配置.eslintrc.js和settings.json，确保保存时自动格式化并修复代码，最后可选自定义.prettierrc规则。

在 VSCode 中集成 ESLint 和 Prettier，可以让代码在编辑时自动格式化并符合团队的编码规范。关键在于正确安装和配置这两个工具，并确保它们协同工作，避免冲突。

安装必要的扩展和依赖

先在项目中安装 ESLint 和 Prettier 的依赖包：

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

如果你使用的是 React 项目，可能还需要：

npm install –save-dev eslint-plugin-react

然后，在 VSCode 扩展市场中安装以下两个插件：

• ESLint（由 Microsoft 提供）
• Prettier – Code formatter（由 Prettier 官方提供）

配置 ESLint 规则文件

在项目根目录创建或修改 .eslintrc.js 文件：

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    ‘eslint:recommended’,
    ‘plugin:prettier/recommended’
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: ‘module’
  },
  rules: {}
};

注意： plugin:prettier/recommended 会自动关闭 ESLint 中与 Prettier 冲突的规则。

壁纸样机神器

免费壁纸样机生成

0

查看详情

设置 VSCode 默认格式化工具

为了让保存时自动用 Prettier 格式化，需要在 VSCode 的 .vscode/settings.json 中添加配置：

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

这样设置后，每次保存文件时，ESLint 会自动修复可修复的问题，Prettier 负责格式化代码。

可选：添加 .prettierrc 配置文件

如果需要自定义格式化风格，可在项目根目录创建 .prettierrc 文件：

{
  “semi”: false,
  “singleQuote”: true,
  “trailingComma”: “es5”
}

这会让 Prettier 使用单引号、不加分号，并在对象最后一个属性后加逗号（如支持）。

基本上就这些。配置完成后，打开一个 JS 文件，输入一些不符合规范的代码，保存后应该会自动修正。如果没反应，检查终端是否有 ESLint 或 Prettier 报错，或确认扩展是否启用。