将ESLINT集成到VS代码中。如果您不熟悉Eslint,请检查文档。
扩展程序使用已打开的工作区文件夹中安装的ESLINT库。如果该文件夹不提供一个文件夹,则扩展程序寻找全局安装版本。如果您尚未在本地或全球安装ESLINT,则通过在Workspace文件夹中运行npm install eslint
,用于本地安装或npm install -g eslint
以进行全局安装。
在新文件夹上,您可能还需要创建.eslintrc
配置文件。您可以通过使用VS Code命令Create ESLint configuration
或在带有npx eslint --init
的终端中运行eslint
命令来完成此操作。
本节描述了主要版本及其改进。有关更改的详细列表,请参考更改日志。
从前向奇数或补丁版本编号上的2.2.3版本表示内部或预发行。因此2.2.5
2.2.3
2.3.1
都是预释放版本。 2.2.10
和2.4.10
3.0.0
常规发布版本。
eslint.validate
设置,则仅在该列表中的文件进行验证。例如,表格的设置 "eslint.validate": [
"javascript"
]
eslint.useFlatConfig
设置,由ESLINT版本8.57.0及以上兑现。如果使用其中一个版本,则扩展程序会遵守ESLINT FLAT CONFIG推出计划。该设置的含义与环境变量ESLINT_USE_FLAT_CONFIG
相同。这意味着:eslint.experimental.useFlatConfig
被弃用,仅应用于ESLINT版本> = 8.21 <8.57.0。ESLint: Revalidate all open files
以重新验证所有打开文件。eslint.timeBudget.onValidation
和eslint.timeBudget.onFixes
untitled
不可知论eslint.alwaysShowStatus
被删除,因为现在状态显示为语言状态指标。eslint.timeBudget.onValidation
和eslint.timeBudget.onFixes
untitled
不可知论eslint.alwaysShowStatus
被删除,因为现在状态显示为语言状态指标。添加了对ESLINT V8.0 Beta的支持。为了使向后与Eslint设置兼容该版本(如果有)仍然使用Cliengine。但是,用户可以使用设置eslint.useESLintClass
强制使用新的ESLINT API。提防ESLINT NPM模块改变了解释选项的方式。它还更改了某些选项的名称。如果您使用eslint.options
将特殊选项传递给ESLINT NPM模块,则可能需要调整设置为新表单。
调整VS代码的工作空间信任模型。结果,在2.1.7
版中引入的自定义对话框ESLINT被删除。此外,将off
值添加到ESLINT规则自定义支持中。
添加了支持以自定义ESLINT规则的严重性。请参阅新设置eslint.rules.customizations
。
要求确认eslint.nodePath
值显示了一个设置,其中该值是在工作区文件夹级别分别定义的,尽管已打开了多工程空间文件夹设置(例如,代码 - 工作空间空间文件)。这些设置需要在相应的code-workspace
文件中定义eslint.nodePath
值,现在扩展名警告用户。在此类code-workspace
文件的示例下
{
"folders" : [
{
"path" : " project-a "
},
{
"path" : " project-b "
}
],
"settings" : {
"eslint.nodePath" : " myCustomNodePath "
}
}
要遵循VS代码的模型以确认工作区本地设置,以影响代码执行的两个设置eslint.runtime
和eslint.nodePath
现在需要用户确认,如果在工作区文件夹或工作区文件中本地定义。在这些本地范围中使用这些设置的用户将看到通知提醒他们确认需求。
该版本还添加了一个命令来重新启动ESLINT服务器。
允许执行ESLINT库的批准流进行了重新设计。它的最初经验如下:
可以使用以下手势拒绝或批准ESLINT库的执行:
ESLint: Manage Library Execution
所有手势将打开以下对话框:
然后,以下方式将所选操作反映在ESLINT状态栏项目中:
Allow
将带有复选标记的状态栏项目前缀。Allow Everywhere
将带有双复选标记的状态栏项目。Deny
和Disable
将带有阻塞符号的状态栏项目。您可以使用以下命令来管理我们的决定:
ESLint: Manage Library Execution
将重新打开以上对话框ESLint: Reset Library Decisions
使您可以重置以前做出的决定。该版本还解决了CVE-2021-27081中描述的漏洞。
扩展程序的2.0.4版本包含以下重大改进:
eslint.validate
设置进行其他配置。 HTML和vue.js文件也是如此。eslint.workingDirectories
自定义工作目录的项目。WorkingDirectories现在可以使用Glob模式,而不是列出每个项目文件夹。例如, { "pattern": "code-*" }
将匹配所有以code-
开头的项目文件夹。此外,默认情况下,扩展名现在更改工作目录。您可以使用新的!cwd
属性禁用此功能。eslint.format.enable
设置。editor.codeActionsOnSave
来定制的。该设置支持ESLINT特定属性source.fixAll.eslint
。该扩展名还尊重通用属性source.fixAll
。下面的设置打开了所有提供商的自动修复程序,包括ESLINT:
"editor.codeActionsOnSave" : {
"source.fixAll" : " explicit "
}
相比之下,此配置仅将其打开以供Eslint:
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : " explicit "
}
您也可以通过以下方式选择性地禁用ESLINT:
"editor.codeActionsOnSave" : {
"source.fixAll" : " explicit " ,
"source.fixAll.eslint" : " never "
}
另请注意,在保存上运行代码操作的时间预算为750ms,这对于大型JavaScript / Typescript文件可能还不够。您可以使用editor.codeActionsOnSaveTimeout
设置增加时间预算。
旧的eslint.autoFixOnSave
设置现在已弃用,可以安全地删除。
如果您使用的是ESLINT扩展版本<2.x,请参考此处的设置选项。
该扩展名为设置贡献以下变量:
eslint.enable
:启用/禁用工作区文件夹的ESLINT。默认情况下启用。
eslint.debug
:启用Eslint的调试模式(与 - debug命令行选项相同)。请参阅ESLINT输出通道以获取调试输出。此选项非常有助于跟踪ESLINT的配置和安装问题,因为它提供了有关ESLINT如何验证文件的详细信息。
eslint.lintTask.enable
:扩展程序是否贡献了一项棉布任务以使整个Workspace文件夹。
eslint.lintTask.options
:运行覆盖整个工作区的任务时应用的命令行选项(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 . "
}
旧的eslint.packageManager
设置现在已弃用,可以安全地删除。这控制了用于解决ESLINT库的软件包管理器。如果ESLINT库在全球范围内得到解决,则只有影响。有效值是"npm"
或"yarn"
或"pnpm"
。
eslint.options
:配置使用ESLINT类API或Cliengine API启动ESLINT的选项。如果使用ESLINT版本8或更高版本,或者使用ESLINT版本7,并且使用设置eslint.useESLintCLass
设置为true,则该扩展名使用ESLINT类API。在所有其他情况下,都使用Cliengine API。使用新的Eslint API指向自定义.eslintrc.json
文件的示例是:
{
"eslint.options" : { "overrideConfigFile" : " C:/mydirectory/.eslintrc.json " }
}
使用旧的Cliengine API指向自定义.eslintrc.json
文件的一个示例是:
{
"eslint.options" : { "configFile" : " C:/mydirectory/.eslintrc.json " }
}
eslint.useESLintClass
(@since 2.2.0) - 即使存在cliengine API,是否使用ESLINT类API。使用ESLINT版本7.x时,设置仅是荣誉。
eslint.run
运行linter onSave
或onType
,默认值为onType
。
eslint.quiet
忽略警告。
eslint.runtime
使用此设置设置节点运行时的路径以在下面运行ESLINT。如果要使用节点的默认系统版本,请使用"node"
。
eslint.execArgv
使用此设置将其他参数传递给节点运行时,例如-m --max_old_space_size=4096
eslint.nodeEnv
如果要定义的ESLINT插件或配置需要process.env.NODE_ENV
,请使用此设置。
eslint.nodePath
如果无法检测到已安装的ESLINT软件包,例如/myGlobalNodePackages/node_modules
。
eslint.probe
语言标识符的数组,应激活ESLINT扩展名,并应尝试验证文件。如果验证语言失败,则扩展名为无声。默认为["astro", "javascript", "javascriptreact", "typescript","typescriptreact", "html", "mdx", "vue", "markdown", "json", "jsonc"]
。
eslint.validate
一系列语言标识符,指定要执行验证的文件。如果仅指定了具有指定语言ID之一的文件,则将验证。这与--ext
命令行选项相当。默认为null
。
eslint.format.enable
:启用ESLINT作为验证文件的格式化。尽管您还可以使用设置editor.formatOnSave
在保存上使用格式器,但建议使用editor.codeActionsOnSave
功能,因为它允许更好地配置性。
eslint.workingDirectories
指定如何计算工作目录ESLINT。 ESLINT解析配置文件(例如eslintrc
, .eslintignore
)相对于工作目录,因此正确配置此文件很重要。如果在终端中执行ESLINT要求您将终端中的工作目录更改为子文件夹,则通常有必要调整此设置。 (另请参见ESLINT类选项#CWD)。还请记住,考虑到父目录的.eslintrc*
文件已解决,而.eslintignore
文件仅在当前工作目录中得到尊敬。可以使用以下值:
[{ "mode": "location" }]
(@since 2.0.0):指示ESLINT使用Workspace文件夹位置或文件位置(如果没有工作空间文件夹打开)作为工作目录。这是默认值,与Eslint扩展版(1.9.x版本)的旧版本中使用的策略相同。[{ "mode": "auto" }]
(@since 2.0.0):指示ESLINT根据package.json
, eslint.config.js
, .eslintignore
和.eslintrc*
文件来推断工作目录。这在许多情况下可能起作用,但也可能导致意外的结果。string[]
:要使用的一系列工作目录。考虑以下目录布局: root/
client/
.eslintrc.json
client.js
server/
.eslintignore
.eslintrc.json
server.js
"eslint.workingDirectories" : [ "./client" , "./server" ]
!cwd
属性的字面意思(例如{ "directory": "./client", "!cwd": true }
)。这将使用客户端目录作为ESLINT工作目录,但不会更改过程的工作目录。[{ "pattern": glob pattern }]
(@since 2.0.0):允许指定一个图案来检测工作目录。这基本上是列出每个目录的捷径。如果您有一个单声道存储库,您的所有项目都在包装文件夹下方,则可以使用{ "pattern": "./packages/*/" }
使所有这些文件夹都在工作目录。 eslint.codeAction.disableRuleComment
具有属性的对象:
enable
- 在快速修复菜单中显示禁用棉绒规则。默认情况下为true
。location
- 选择在separateLine
或sameLine
上添加eslint-disable
评论。 separateLine
是默认值。例子: { "enable" : true , "location" : " sameLine " }
eslint.codeAction.showDocumentation
具有属性的对象:
enable
- 在快速修复菜单中显示打开的棉绒规则文档网页。默认情况下为true
。 eslint.codeActionsOnSave.mode
(@SINCE 2.0.12) - 控制在保存上运行代码操作时哪些问题是解决的。
all
:通过重新验证文件的内容来解决所有可能的问题。这与在终端中使用--fix
选项运行ESLINT的代码路径相同,因此可能需要一些时间。这是默认值。problems
:只要其文本编辑是非重叠的,就仅修复当前已知的解决问题。此模式要快得多,但很可能只能解决部分问题。请注意,如果eslint.codeActionsOnSave.mode
设置为problems
,则忽略了eslint.codeActionsOnSave.rules
。
eslint.codeActionsOnSave.rules
(@SINCE 2.2.0) - 控制在保存执行中代码操作中考虑的规则。如果未指定,请考虑通过正常的ESLINT配置机制指定的所有规则。一个空数组无需考虑任何规则。如果该数组包含多个条目,则订单很重要,并且第一匹匹配确定规则的打开状态。此设置仅在以下情况下得到尊重:
eslint.codeActionsOnSave.mode
具有与problems
不同的值eslint.useESLintClass
设置为true(版本> = 8 ||(版本== 7.x && eslint.useeslintclass))。在此示例中,仅考虑了与半隆相关的规则:
"eslint.codeActionsOnSave.rules" : [
" *semi* "
]
此示例将从“保存通过的代码操作”中删除所有Typescript Eslint特定规则,但保留所有其他规则:
"eslint.codeActionsOnSave.rules" : [
" !@typescript-eslint/* " ,
" * "
]
此示例将缩进和半规则从打字稿ESLINT中保留,禁用所有其他打字稿ESLINT规则,并保留其余的:
"eslint.codeActionsOnSave.rules" : [
" @typescript-eslint/semi " ,
" @typescript-eslint/indent " ,
" !@typescript-eslint/* " ,
" * "
]
eslint.rules.customizations
(@since 2.1.20) - 与项目的真实ESLINT配置相比,在VS代码中报告不同严重性的规则。包含这些属性:
"rule
”:选择具有匹配名称的规则,在星号中以通配符为特征: { "rule": "no-*", "severity": "warn" }
"!"
定位所有与名称不匹配的规则: { "rule": "!no-*", "severity": "info" }
"severity"
:为匹配的规则设置了一个新的严重性, "downgrade"
, "upgrade"
S升至较高的严重性,或"default"
将它们升级为原来的严重性"fixable"
:仅选择自动固定规则: { "rule": "no-*", "fixable": true, "severity": "info" }
在此示例中,所有规则都被警告覆盖:
"eslint.rules.customizations" : [
{ "rule" : " * " , "severity" : " warn " }
]
在此示例中, no-
规则是有益的,其他规则被降级, "radix"
被重置为默认值:
"eslint.rules.customizations" : [
{ "rule" : " no-* " , "severity" : " info " },
{ "rule" : " !no-* " , "severity" : " downgrade " },
{ "rule" : " radix " , "severity" : " default " }
]
在此示例中,所有可自动固定规则都被覆盖为信息:
"eslint.rules.customizations" : [
{ "rule" : " * " , "fixable" : true , "severity" : " info " }
]
eslint.format.enable
(@since 2.0.0) - 使用ESLINT作为通过ESLINT验证的文件的格式。如果启用了,请确保禁用其他格式化器,如果要使此默认值。这样做的一个好方法是为JavaScript添加以下设置"[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }
。对于Typescript,您需要添加"[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }
。
eslint.onIgnoredFiles
(@since 2.0.10):用于控制试图忽略文件时是否应生成警告。默认值off
。可以设置为warn
。
editor.codeActionsOnSave
(@since 2.0.0):此设置现在支持entry source.fixAll.eslint
。如果将所有插件中的所有自动固定ESLINT错误设置为TRUE,则将在保存上修复。您还可以使用VS Code的语言范围设置选择性地启用和禁用特定语言。为了禁用HTML文件的codeActionsOnSave
,请使用以下设置:
"[html]" : {
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : false
}
}
旧的eslint.autoFixOnSave
设置现在已弃用,可以安全地删除。另请注意,如果您使用ESLINT作为默认格式化器,则应关闭editor.formatOnSave
当您打开editor.codeActionsOnSave
时。否则,您的文件将固定两次,这是不必要的。
eslint.problems.shortenToSingleLine
:( @since 2.3.0) - 缩短带下划线问题的文本跨度到其第一个相关行。
eslint.experimental.useFlatConfig
:( @since 2.3.0) - 启用实验平面config(aka eslint.config.js),由Eslint版本8.21或更高版本支持)
eslint.timeBudget.onValidation
(@since 2.3.5) - 控制在警告或错误之前可用于验证的时间预算。
eslint.timeBudget.onFixes
(@since 2.3.5) - 控制可用于在警告或错误之前用于计算修复程序的时间预算。
如果将旧的eslint.autoFixOnSave
选项设置为True Eslint将提示将其转换为新的editor.codeActionsOnSave
。如果要避免迁移,则可以通过以下方式在对话框中响应:
eslint.migration.2_x
将off
禁用迁移始终可以使用命令ESLint: Migrate Settings
该扩展名为命令调色板贡献了以下命令。
Create '.eslintrc.json' file
:创建一个新的.eslintrc.json
文件。Fix all auto-fixable problems
:将ESLINT自动固定分辨率应用于所有可解决的问题。 该扩展名仅在键入时凸起单个文件。如果您想凸显整个工作区集eslint.lintTask.enable
则可以对true
配置,并且扩展名还将贡献eslint: lint whole folder
任务。无需再定义tasks.json
中的自定义任务。
关于如何使用ESLINT的凸版字样的很好的介绍,可以在Typescript -Eslint中找到。在使用打字稿设置中的VS代码ESLINT扩展之前,请让自己熟悉介绍。特别要确保可以使用eslint
命令在终端中成功验证打字条文件。
该项目本身使用ESLINT验证其打字稿文件。因此,它可以用作启动的蓝图。
为了避免使用"tslint.enable": false
。
与JavaScript验证了单声道存储库中的打字稿一样,您需要告诉VS代码ESLINT扩展程序当前工作目录是什么。使用eslint.workingDirectories
设置进行操作。对于此存储库,工作目录设置看起来如下:
"eslint.workingDirectories" : [ " ./client " , " ./server " ]
从ESLINT 5.X到ESLINT 6.X迁移可能需要一些适应性(有关详细信息,请参见《 ESLINT迁移指南》)。在针对VS代码ESLINT扩展程序提交问题之前,请确保您可以使用ESLINT命令在终端中成功验证文件。