ESLint這是VSCode ESLint擴展,將ESLint JavaScript集成到VS Code中。
首先簡單說一下使用流程：
1.安裝ESLlint庫(在項目本地或全局安裝，看具體項目需要)
2.創建.eslintrc配置文件(手動創建或者複製其它已有配置文件均可，看具體項目需求)
3.根據文檔設置完，保存文件時即可進行eslint修復
安裝
該擴展使用安裝在打開的工作區文件夾中的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" ]
推薦使用：
{ //主題設置 "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----- }