VSCode常用插件之ESLint使用

更多VSCode插件使用请访问:VSCode常用插件汇总


ESLint这是VS Code ESLint扩展,将ESLint JavaScript集成到VS Code中。

首先简单说一下使用流程:
1.安装ESLlint库(在项目本地或全局安装,看具体项目需要)
2.创建.eslintrc配置文件(手动创建或者复制其它已有配置文件均可,看具体项目需求)

安装

该扩展使用安装在打开的工作区文件夹中的ESLint库。如果该文件夹不提供扩展名,则扩展名将查找全局安装版本。如果您尚未在本地或全局安装ESLint,请npm install eslint在工作空间文件夹中运行以进行本地安装或npm install -g eslint全局安装。

使用

在新文件夹上,您可能还需要创建一个.eslintrc配置文件。您可以通过使用VS Code命令Create ESLint configurationeslint在终端中运行该命令来执行此操作。如果您已全局安装了ESLint(请参阅上文),请eslint --init在终端中运行。如果您在本地安装了ESLint,则可以.\node_modules\.bin\eslint --init在Windows以及./node_modules/.bin/eslint --initLinux和Mac下运行。

配置文件

以下设置为所有提供程序(包括ESLint),打开“自动修复”:

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

相反,此配置仅对ESLint启用:

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

您还可以通过以下方式选择性禁用ESLint:

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

另请注意,保存时运行代码操作的时间预算为750毫秒,对于大型JavaScript / TypeScript文件而言,这可能还不够。您可以使用该editor.codeActionsOnSaveTimeout设置来增加时间预算。

eslint.autoFixOnSave设置现已弃用,可以安全地删除。

设定选项

1.eslint.enable:启用/禁用ESLint。默认情况下启用。

2.eslint.debug:启用ESLint的调试模式(与--debug命令行选项相同)。请参阅ESLint输出通道以获取调试输出。此选项对于跟踪ESLint的配置和安装问题非常有用,因为它提供了有关ESLint如何验证文件的详细信息。

3.eslint.lintTask.enable:扩展是否为整个工作区文件夹提供lint任务。

4.eslint.lintTask.options:运行任务时应用的命令行选项,用于对整个工作区执行linting操作( https://eslint.org/docs/user-guide/command-line-interface )。指向定制.eslintrc.json文件和定制的示例.eslintignore是:

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

5.eslint.packageManager:控制用于解析ESLint库的包管理器。这只有在全局解析ESLint库时才有影响。有效值为"npm"or "yarn"或"pnpm"。

6.eslint.options:用于配置如何使用ESLint CLI引擎API启动ESLint的选项。默认为空选项包。指向自定义.eslintrc.json文件的示例如下:

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

7.eslint.run - run: 运行linter onSaveonType,默认为onType

8.eslint.quiet: 忽略警告。

9.eslint.runtime: 使用此设置设置要在其下运行ESLint的节点运行时的路径。

10.eslint.nodePath: - 如果无法检测到已安装的ESLint包,请使用此设置,例如 /myGlobalNodePackages/node_modules

11.eslint.probe:应激活ESLint扩展名并尝试验证文件的语言标识符数组。如果对探测语言的验证失败,扩展将显示silent。默认为["javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue"]

12.eslint.validate: 指定要强制验证的文件的语言标识符数组。这是一个旧的遗留设置,在正常情况下应该不再需要。默认为["javascript", "javascriptreact"]

13.eslint.format.enable: 启用ESLint作为已验证文件的格式化程序。尽管您也可以使用设置editor.formatOnSave在保存时使用格式化程序,但建议使用editor.codeActionsOnSave功能,因为它允许更好的可配置性。

14.eslint.workingDirectories: 指定如何计算ESLint使用的工作目录。ESLint解析相对于工作目录的配置文件(例如eslintrc.eslintignore),因此正确配置该文件非常重要。如果在终端中执行ESLint需要将终端中的工作目录更改为子文件夹,则通常需要调整此设置。(另请参见CLIEngine options#cwd)。还请记住,.eslintrc*文件是在考虑父目录的情况下解析的,而.eslintignore文件只在当前工作目录中使用。可以使用以下值:

  • [{ "mode": "location" }](@since 2.0.0): 指示ESLint使用工作区文件夹位置或文件位置(如果没有打开工作区文件夹)作为工作目录。这是默认策略,与ESLint扩展的旧版本(1.9.x版本)中使用的策略相同。
    *[{ "mode": "auto" }] (@since 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 }`(@since 2.0.0):允许指定检测工作目录的模式。这基本上是列出每个目录的捷径。如果您有一个Mono存储库,并且所有项目都位于packages文件夹下,那么可以使用`{ "pattern": "./packages/*/" }`使所有这些文件夹都在目录下工作。

15.`eslint.codeAction.disableRuleComment`: 具有属性的对象:

      * `enable` : 在快速修复菜单中显示禁用lint规则。默认情况下为`true`。
      * `location` : 选择在`separateLine` 或 `sameLine`上添加eslint disable注释。默认为`separateLine `。例子:

{ "enable": true, "location": "sameLine" }
``16.eslint.codeAction.showDocumentation: 具有属性的对象: *enable: 在“快速修复”菜单中显示“打开lint规则文档”网页。默认情况下为true`。

猜你喜欢

转载自www.cnblogs.com/jiaoshou/p/12218642.html