【ESLint】vscode eslint prettier 怎么设置？

在 VS Code 中设置 ESLint 和 Prettier 可以帮助你自动格式化代码并确保代码质量。以下是详细的设置步骤：

1. 安装扩展

首先，需要安装 VS Code 的 ESLint 和 Prettier 插件。

1. 打开 VS Code。
2. 点击左侧栏的扩展图标（或按 Ctrl+Shift+X）。
3. 搜索并安装以下扩展：
   • ESLint
   • Prettier - Code formatter

2. 安装 npm 包

在你的项目中，需要安装 ESLint 和 Prettier 以及相关的插件。

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

• eslint: 核心 ESLint 包。
• prettier: 核心 Prettier 包。
• eslint-config-prettier: 关闭 ESLint 中与 Prettier 有冲突的规则。
• eslint-plugin-prettier: 将 Prettier 作为 ESLint 规则运行，使得 ESLint 可以报告和修复格式问题。

3. 配置 ESLint

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

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    // 你的 ESLint 规则
  }
}

4. 配置 Prettier

在项目根目录下创建或修改 .prettierrc 文件：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always"
}

5. 配置 VS Code 设置

在 VS Code 中，可以通过设置文件来配置 ESLint 和 Prettier。

1. 打开 VS Code 设置：文件（File） > 首选项（Preferences） > 设置（Settings），或者使用快捷键 Ctrl+,。
2. 搜索并找到 settings.json，并点击右上角的 “打开设置（JSON）” 图标。
3. 添加以下配置：

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

6. 使用 Prettier 和 ESLint

• 自动格式化：保存文件时，Prettier 会自动格式化代码，确保代码风格一致。
• Linting：ESLint 会检查代码质量，并在有问题的地方给出提示。

7. 验证设置

1. 打开一个 JavaScript 或 TypeScript 文件。
2. 尝试保存文件，确保代码被自动格式化。
3. 查看文件中的 ESLint 错误和警告，并确保它们显示在编辑器中。

通过上述步骤，你应该已经成功在 VS Code 中设置了 ESLint 和 Prettier，以便自动格式化代码并保持代码质量。