zoukankan      html  css  js  c++  java
  • 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库时才有影响。有效的值是npmyarnpnpm
    • 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_xoff,迁移设置将会被禁用。
      可以手动使用命令ESLint:Migrate Settings来触发迁移。
  • 相关阅读:
    接口类和抽象类
    生成器和迭代器
    装饰器
    KMP算法(java,c++)
    java EE
    XML
    SQL语法
    单元测试
    JDBC
    SpringCloud
  • 原文地址:https://www.cnblogs.com/yayoi/p/12455529.html
Copyright © 2011-2022 走看看