VSCode的ESlint扩展相关配置项（2.0.4 version官方文档粗略翻译）

之前因为升级了VSCode后发现有一部分配置项失效了，保存文件时lint的功能也受到了影响，查了一下官方文档发现是升级后有修改，所以把官方文档大致翻译了一下。

文档官方地址：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

VS Code ESLint 扩展

该插件在VS Code中集成了ESLint，如果你是刚接触到ESLint请查看这篇文档：ESLint官方文档

这个扩展使用了安装在当前工作目录的ESLint库。如果这个目录没有提供ESLint库那么该扩展会寻找全局安装的版本。如果你既没有安装本地也没有安装全局的ESLint，可以在工作目录下运行npm install eslint安装本地版本，或者运行npm install -g eslint安装一个全局版本。

在新的目录下你可能需要创建一个.eslintrc的配置文件。你可以使用VS Code的命令Create ESLint configuration，或者在终端中执行eslint 命令。如果你已经全局安装了ESLint，那么在终端中运行eslint --init。如果你是本地安装了ESLint，那么在Windows下执行. ode_modules.bineslint --init，在Linux和Mac下执行./node_modules/.bin/eslint --init

发行说明

2.0.4版本包含以下几个主要的改进点：

• 加强了TypeScript的检测 - 只要TypeScript在ESLint中配置正确，你就不再需要通过VS Code的eslint.validate设置进行额外的配置。对于HTML和Vue.js文件也是一样的。

• 支持Glob模式的工作目录 - 对于那些有着复杂目录结构和需要通过eslint.workingDirectories自定义工作目录的项目，现在可以使用Glob模式而不需要列举所有项目目录。例如，{ "pattern": "code-*" }会匹配所有以code-开头的项目文件夹。此外，该扩展现在可以默认修改工作目录。你可以使用新!cwd属性禁用该特性。

• 支持Formatter：ESLint现在可以作为formatter使用。使用eslint.format.enable设置可以启用该特性。

• 改进了Auto Fix on Save - Auto Fix on Save现在是VS Code的Code Action on Save的基本结构的一部分，并且可以在一轮计算中计算出所有可能的修复。它可以通过editor.codeActionsOnSave设置进行自定义。该设置支持ESLint特有属性source.fixAll.eslint。它也支持通用属性source.fixAll。

以下配置打开包括ESLint的所有支持的自动修复：

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

相反的，下面的配置只在ESLint中打开自动修复：

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

你可以选择性的禁用ESLint:

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

也请记住，在保存时执行代码相关操作时会有750ms的支出（budget），对于较大的JavaScript/TypeScript文件可能时间还不止。你可以通过设置editor.codeActionsOnSaveTimeout来增加时间支出。

旧的配置项eslint.autoFixOnSave现在不推荐使用，并且可以安全的被移除。

配置选项

如果你使用的ESLint扩展版本小于2.x，请在这里查看配置选项。

该扩展配置了以下变量：

• eslint.enable：启用/禁用ESLint。默认是启用的。
• eslint.debug：启用ESLint的debug模式（和--debug的命令行选项相同）。请在debug输出中查看ESLint的输出。此选项对于跟踪ESLint的配置和安装问题非常有用，因为它提供了有关ESLint如何验证文件的详细信息。
• eslint.lintTask.enable：该扩展是否对整个工作目录执行了lint任务。
• eslint.lintTask.options：命令行会在运行对于整个工作目录的lint任务时应用该选项。一个指向自定义.eslintrc.json文件和自定义.eslintignore的例子：

{
  "eslint.lintTask.options": "-c C:/mydirectory/.eslintrc.json --ignore-path C:/mydirectory/.eslintignore ."
}

• eslint.packageManager：控制用来解析ESLint库的包管理器。仅在全局解析ESLint库时才有影响。有效的值是npm、yarn、pnpm。
• eslint.options：用来配置如何使用ESLint CLI引擎API启动ESLint。 默认为空选项。一个自定义.eslintrc.json文件的例子：

{
  "eslint.options": { "configFile": "C:/mydirectory/.eslintrc.json" }
}

• eslint.run：在onSave还是onType时执行linter。默认为onType。
• eslint.quiet：忽略警告。
• eslint.runtime：使用此设置可以设置要在其下运行ESLint的node运行时的路径。
• eslint.nodePath：如果不能监测到一个已安装的ESLint包时可以使用该配置。例如/myGlobalNodePackages/node_modules。
• eslint.probe：语言标识符的数组，为此ESLint扩展应被激活，并应尝试验证文件。如果验证语言失败，则该扩展会显示为silent。默认为：["javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue"]。
• eslint.validate：语言标识符数组，用于指定要对其执行验证的文件。 这是旧的设置，在正常情况下应该不再需要了。默认为：["javascript", "javascriptreact"]。
• eslint.format.enable：启用ESLint作为已验证文件的格式化程序。虽然你也可以通过配置editor.formatOnSave作为保存时的格式化程序，但是推荐使用editor.codeActionsOnSave特性因为它允许更好的可配置性。
• eslint.workingDirectories：指定ESLint正在应用的工作目录是如何计算的。ESlint解析配置文件（例如.eslintrc,.eslintignore）是相对于工作目录的，所以正确配置十分重要。如果在终端中执行ESLint需要你在终端将工作目录改到子目录下，那么通常有必要调整此项设置。还请记住，.eslintrc*文件是在考虑父目录的情况下解析的，而.eslintignore文件仅在当前工作目录中有效。以下的值可以使用：
  • [{ "mode": "location" }]（从2.0.0起）：指示ESLint使用工作空间文件夹位置或文件位置（如果未打开工作空间文件夹）作为工作目录。 这是默认设置，与旧版ESLint扩展所使用的策略相同。
  • [{ "mode": "auto" }]（从2.0.0起）：指示ESLint根据package.json，.eslintignore和.eslintrc*文件的位置来推断工作目录。在许多情况下这可能会起作用，但也会导致意外结果。
  • string[]：要使用的工作目录数组。请考虑以下的目录布局：

  root/
      client/
          .eslintrc.json
          client.js
      server/
          .eslintignore
          .eslintrc.json
          server.js
  

  那么使用配置：

      "eslint.workingDirectories": [ "./client", "./server" ]
  

  这将使用服务器目录作为当前eslint工作目录来验证服务器目录中的文件。 客户端目录中的文件相同。 ESLint扩展还将把该进程的工作目录更改为提供的目录。如果不希望这样做，可以使用带有!cwd属性的文字。（例如{ "directory: "./client", "!cwd": true }）。这将使用客户端目录作为ESLint工作目录，但不会更改进程的工作目录。
  • { "pattern": glob pattern }（自2.0.0起）：允许指定一种模式来检测工作目录。 这基本上是列出每个目录的捷径。 如果您的Mono项目的所有项目都位于packages文件夹下，则可以使用{"pattern"："./packages/*/"}来使所有这些文件夹成为工作目录。
• eslint.codeAction.disableRuleComment：有如下属性的对象：
  • enable - 在快速修复菜单中显示禁用的lint规则。默认是true。
  • location - 选择在separateLine或者sameLine添加eslint-disable注释。默认是separateLine。例如：

  { "enable": true, "location": "sameLine" }
  

• eslint.codeAction.showDocumentation：有如下属性的对象：
  • enable - 在快速修复菜单显示打开lint规则的文档网页，默认是true。
• eslint.codeActionsOnSave.mode（自2.0.12起）：控制当执行保存代码时的操作时修复哪种问题。
  • all：通过重新验证文件的内容来修复所有可能的问题。这和在终端里用--fix选项运行eslint是执行了相同的代码路径，因此会花些时间。这是默认值。
  • problems：只要它们的文本编辑不重叠，就只解决当前已知的可解决问题。这种模式比较快但是很有可能只修复一部分问题。
• eslint.format.enable（自2.0.0起）：对于经过ESLint验证的文件使用ESLint作为格式化程序。如果启用请确保禁用其他格式化程序（如果你想要让它作为默认情况）。一个好的方式就是为JavaScript添加如下的配置："[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }，对于TypeScript你需要添加 "[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }。
• eslint.onIgnoredFiles（自2.0.10起）：用来控制当试图lint被忽略的文件时是否应该生成警告。默认是off，可以被设置为warn。
• editor.codeActionsOnSave（自2.0.0起）：该设置目前支持入口source.fixAll.eslint。如果设置为true，那么来自所有插件的所有可自动修复的ESlint错误会在保存时被修复。你可以使用VS Code的语言范围设置来选择性的启用和禁用特定的语言。可以用以下的设置为HTML文件禁用codeActionsOnSave：

"[html]": {
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": false
    }
}

旧的eslint.autoFixOnSave设置现在不推荐使用并且可以安全的移除了。也请记住如果你使用ESLint作为默认的格式化程序，在已经开启editor.codeActionsOnSave的情况下你应该关闭editor.formatOnSave，否则文件会被修复两次，这是不必要的。

设置迁移

如果旧的选项eslint.autoFixOnSave被设置为true，ESlint会提示你去转换为新的editor.codeActionsOnSave格式。如果你想要避免迁移，可以通过下面方法在对话框中进行响应：

• Not now：下一次打开工作区时，该设置不会再次被ESLint提示尚未被迁移。
• Never migrate Settings：通过修改用户设置eslint.migration.2_x为off，迁移设置将会被禁用。
  可以手动使用命令ESLint：Migrate Settings来触发迁移。