將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命令在終端中成功驗證文件。