VSCode 中 ESLint 插件对不同项目的配置

coderzsp
463 阅读2分钟

前言

在前端项目中，特别是多人协作的场景，保持代码风格统一是非常有必要的，结合 ESLint 工具可以对我们写的代码进行检查。有些时候可能不需要 ESLint，但是有些项目需要，VSCode 直接禁用 ESLint 插件是不可行的。下面整理了一些来针对不同项目选择启用/禁止 ESLint 插件的方法。

方法1——在项目中配置ESLint

通过在每个项目的根目录下分别创建或配置 eslintrc 文件来管理 ESLint 的启用或关闭。

  • A项目（不使用 ESLint）

    在项目根目录下创建一个 .eslintignore 文件，将所有文件添加到忽略列表，这样项目就可以跳过 ESLint 检查了

    /*

  • B项目（开启 ESLint）

正常配置 .eslintrc 或 .eslintrc.json 文件就可以了

方法2——在 VSCode 中设置 ESLint插件的启用/禁用

我们在安装 VSCode 时，会在电脑本地生成很多配置文件，其中有个 .vscode，里面有对编辑器的全局配置，安装的插件配置等。

针对项目也可以添加 .vscode，每个项目使用自己单独的配置。

使用 Ctrl + Shift + P 快捷键，选择 Preferences: Open Workspace Settings (JSON)，会自动在项目根目录下创建一个 .vscode 文件夹，在 settings.json 启用 ESLint 插件：

{
   "eslint.enable: true
}

同理，通过设置 eslint.enable 值为 false 来禁用 ESLint。

方法3——使用 VSCode 工作区配置

VSCode 可以为每个项目创建不同的工作区配置文件。在每个工作区配置文件中，可以根据需要启用或禁用 ESLint 插件。

  1. 在 B 项目中，创建一个工作区文件（.code-workspace），在 settings.json 中启用 ESLint
{
  "folders": [
    {
      "path": "."
    }
  ],
  "settings": {
    "eslint.enable": true
  }
}
  1. 在 A 项目中，也创建一个工作区文件（.code-workspace），并禁用 ESLint
{
  "folders": [
    {
      "path": "."
    }
  ],
  "settings": {
    "eslint.enable": false
  }
}

这样，在不同的工作区中，VSCode会根据工作区的配置自动启用或禁用 ESLint。

WebStorm 中同样也可以配置，还是 A 项目禁用，B 项目启用

  1. A 项目：打开项目设置，进入 Languages & Frmaeworks -> JavaScript/TypeScript -> Code Quality Tools -> ESLint，选择 "Disable ESLint"。

  2. B 项目：打开项目设置，进入 Languages & Frmaeworks -> JavaScript/TypeScript -> Code Quality Tools -> ESLint，选择 "Automatic ESLint configuration"（自动检测配置文件）或者手动指定 .eslintrc 文件

avatar
文章
阅读
粉丝