更多VSCode插件使用請訪問：VSCode常用插件匯總
ESLint這是VS Code ESLint擴展,將ESLint JavaScript集成到VS Code中。
首先簡單說一下使用流程：
1.安裝ESLlint庫(在項目本地或全局安裝，看具體項目需要)
2.創建.eslintrc配置文件(手動創建或者復制其它已有配置文件均可，看具體項目需求)
3.根據文檔設置完，保存文件時即可進行eslint修復(MacOS：快捷鍵是 command + s )
安裝
該擴展使用安裝在打開的工作區文件夾中的ESLint庫。如果該文件夾不提供擴展名，則擴展名將查找全局安裝版本。如果您尚未在本地或全局安裝ESLint，請npm install eslint在工作空間文件夾中運行以進行本地安裝或npm install -g eslint全局安裝。
創建配置文件
在新文件夾上，您可能還需要創建一個.eslintrc配置文件。您可以通過使用VS Code命令Create ESLint configuration或eslint在終端中運行該命令來執行此操作。如果您已全局安裝了ESLint（請參閱上文），請eslint --init在終端中運行。如果您在本地安裝了ESLint，則可以.\node_modules\.bin\eslint --init在Windows以及./node_modules/.bin/eslint --initLinux和Mac下運行。
編輯器設置
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: 運行linter 的時間，onSave(保存后)或onType(輸入時)，默認為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。
17.eslint.codeActionsOnSave.mode (@since 2.0.12): 控制在保存時運行代碼操作時修復哪些問題
all: 通過重新驗證文件內容修復所有可能的問題。這將執行與在終端中使用--fix選項運行eslint相同的代碼路徑，因此可能需要一些時間。這是默認值。problems: 僅修復當前已知的可修復問題，只要它們的文本編輯不重疊即可。此模式要快得多，但很可能只能解決部分問題。
18.eslint.format.enable（@since 2.0.0起）:使用ESlint作為由ESlint驗證的文件的格式化程序。如果啟用，請確保禁用其他格式化程序（如果要將其設為默認值）。一個好的方法是為javascript添加以下設置"[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }。對於TypeScript，您需要添加"[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }。
19.eslint.onIgnoredFiles（@since 2.0.10）:用於控制在嘗試清除被忽略的文件時是否應生成警告。默認值為off。可以設置為warn。
20.editor.codeActionsOnSave（@since 2.0.0起）：此設置現在支持條目source.fixAll.eslint。如果設置為true，則來自所有插件的所有可自動修復的ESLint錯誤都將在保存時修復。您還可以使用VS Code的語言范圍設置來有選擇地啟用和禁用特定語言。要禁用codeActionsOnSaveHTML文件，請使用以下設置：
"[html]": {
"editor.codeActionsOnSave": {
"source.fixAll.eslint": false
}
}
舊eslint.autoFixOnSave設置現已棄用，可以安全地刪除。另請注意，如果將ESLint用作默認格式化程序，則應在打開editor.formatOnSave時將其關閉editor.codeActionsOnSave。否則，您的文件將被修復兩次，這是不必要的。
設置遷移
如果舊eslint.autoFixOnSave選項設置為true，則ESLint會提示將其轉換為新editor.codeActionsOnSave格式。如果要避免遷移，可以通過以下方式在對話框中進行響應：
- 現在不行：下次打開工作區時，ESLint提示不會再次遷移設置
- 決不遷移設置：設置遷移將改變用戶設置被禁用
eslint.migration.2_x，以off
始終可以使用以下命令手動觸發遷移ESLint: Migrate Settings
命令：
該擴展將以下命令添加到“命令”面板。
Create '.eslintrc.json' file：創建一個新.eslintrc.json文件。Fix all auto-fixable problems：將ESLint自動修復解決方案應用於所有可修復的問題。Disable ESLint for this Workspace：禁用此工作空間的ESLint擴展。Enable ESLint for this Workspace：為此工作空間啟用ESLint擴展。
在VS Code的任務運行中使用擴展
擴展名只在鍵入時對單個文件進行linting操作。如果要對整個工作區集eslint.lint task.enable進行lint操作，則擴展還將貢獻eslint: lint whole folder 任務。不再需要在tasks.json中定義自定義任務。
使用ESLint驗證TypeScript文件
您可以在TypeScript-ESLint中找到有關如何使用ESlint加載TypeScript的精彩介紹。在TypeScript設置中使用VS Code ESLint擴展之前，請熟悉介紹。尤其要確保可以使用eslint命令在終端中成功驗證TypeScript文件。
此項目本身使用ESLint驗證其TypeScript文件。所以它可以作為開始的藍圖。
為了避免來自任何TSLint安裝的驗證，請使用"tslint.enable": false禁用TSLint。
Mono存儲庫設置
與JavaScript一樣，在mono存儲庫中驗證TypeScript需要告訴VS Code ESLint擴展當前的工作目錄是什么。使用eslint.workingDirectories設置執行此操作。對於此存儲庫，工作目錄設置如下所示：
"eslint.workingDirectories": [ "./client", "./server" ]
我的setting.json
{
//主題設置
"workbench.colorTheme": "Monokai",
// 默認編輯器字號
"editor.fontSize": 14,
//是否自動換行
"editor.wordWrap": "on",
// tab幾個縮進
"editor.tabSize": 2,
// 文件自動保存
"files.autoSave": "afterDelay",
// 自動格式化粘貼的代碼
"editor.formatOnPaste": true,
// 在資源管理器刪除內容時候是否進行用戶提醒
"explorer.confirmDelete": false,
// 控制在資源管理器內拖放移動文件或文件夾時是否進行確認
"explorer.confirmDragAndDrop": false,
// 在資源管理器拖拽文件是否進行用戶提醒
"workbench.statusBar.visible": true,
// 工作區縮放級別
"window.zoomLevel": 0,
// 重命名或移動文件時，啟用或禁用自動更新導入路徑
"javascript.updateImportsOnFileMove.enabled": "always",
// 啟用/禁用導航路徑
"breadcrumbs.enabled": true,
// 終端cmd字號
"terminal.integrated.fontSize": 16,
// 不檢查縮進，保存后統一按設置項來設置
"editor.detectIndentation": false,
// 編輯器初始界面
"workbench.startupEditor": "newUntitledFile",
// 工作台狀態欄是否可見
"workbench.statusBar.feedback.visible":false,
// 添加多個光標時候需要的快捷鍵
"editor.multiCursorModifier": "ctrlCmd",
// 自定義代碼片段顯示的位置
"editor.snippetSuggestions": "top",
"window.menuBarVisibility": "toggle",
// 啟用后，按下 TAB 鍵，將展開 Emmet 縮寫。
"emmet.triggerExpansionOnTab": true,
// 控制編輯器在空白字符上顯示符號的方式
"editor.renderWhitespace": "all",
// 控制編輯器是否應呈現空白字符
"editor.renderControlCharacters": false,
// 在文件和文件夾上顯示錯誤和警告
"problems.decorations.enabled": false,
// html文件格式化程序
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features",
// 禁止eslint對html進行校驗
"editor.codeActionsOnSave": {
"source.fixAll.eslint": false
}
},
// "[javascript]": {
// "editor.defaultFormatter": "vscode.typescript-language-features"
// },
// vscode-fileheader -----settings begin-----
// 文件作者
"fileheader.Author": "JiaoShouf2e",
// 文件最后修改者
"fileheader.LastModifiedBy": "JiaoShouf2e",
// vscode-fileheader -----settings end-----
//stylelint -----settings begin-----
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.enable": false,
//stylelint -----settings end-----
// eslint -----settings begin-----
// 是否為JavaScript文件開啟eslint檢測
"eslint.enable": true,
// 保存之后進行lint
"eslint.run": "onSave",
// 是否啟用eslint的調試模式
"eslint.debug": true,
// 保存文件時進行eslint修復(MacOS：快捷鍵是 command + s ),並不能修復所有問題，多數還是需要手動修復
"editor.codeActionsOnSave":{
"source.fixAll.eslint": true
}
// eslint -----settings end-----
}