vscode配置setting.json文件实现eslint自动格式代码

下面是详细的攻略：

配置 setting.json 文件实现 ESLint 自动格式代码

1. 安装 ESLint 插件

在 VS Code 插件商店中搜索 ESLint 并安装。安装成功后，在 VS Code 左下角会出现 ESLint 的图标，表示已经成功安装。如果没有出现图标，可以按 Ctrl + Shift + P 或 Cmd + Shift + P 打开命令面板，并输入 ESLint: Enable ESLint 来开启 ESLint。

2. 安装 ESLint

在项目根目录下安装 ESLint：

npm install eslint --save-dev

3. 初始化 ESLint 配置文件

在项目根目录下执行以下命令：

npx eslint --init

然后，ESLint 会问一系列问题来生成配置文件。根据实际需求来回答即可。最终生成的配置文件为 .eslintrc.json。

4. 安装 Prettier

在项目根目录下安装 Prettier：

npm install prettier --save-dev

5. 配置 VS Code

打开 VS Code 中的 Settings（按 Ctrl + , 或 Cmd + , 可以打开 Settings），在搜索框中输入 eslint，找到 Eslint: Auto Fix On Save 并勾选上。

然后打开配置文件 settings.json，添加如下内容：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

保存并关闭设置界面，重新打开项目，此时将会在保存文件时自动使用 ESLint 进行代码检查和格式化。

示例

以下是两个示例：

示例 1

在 .eslintrc.json 中，我们可以配置规则来约束我们的代码风格。比如，我们可以配置禁用标准的全局变量：

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "no-console": "off",
    "no-unused-vars": "warn",
    "no-undef": "error"
  }
}

然后，在代码中使用未声明的变量时，ESLint 将会报错并且无法自动保存。

示例 2

在 .prettierrc.json 文件中可以配置格式化规则：

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 120,
  "trailingComma": "none"
}

然后，在保存文件时，ESLint 将会根据这个配置文件来格式化代码。