前言

最近為vsocde配置Eslint出現了許多問題， 我解決問題之后，覺得還是把這些坑都寫清楚，方便學習前端的初學者。

一、什么是ESLint？

ESLint 是一個用來識別 ECMAScript/JavaScript 并且按照規則給出報告的代碼檢測工具

二、配置步驟

1.基礎配置

這里以新建空項目為例

1. 安裝eslint依賴 (可以使用npm或yarn其中的一種)

• 使用npm

// 在終端輸入下列命令
npm init -y //生成package.json
npm init @eslint/config

之后eslint就會詢問一些問題(以下是我的選擇, 大家可以根據實際情況修改)

1.How would you like to use Eslint? -選擇第3個
2.What type of module does your project use? -選擇JavaScript module
3.What framework does your project use？ -選擇None of these
4.Does your project use TypeScript? -選擇No
5.Where does your code run? -選擇Node(按i選擇)
6.How would you like to define a style for your project? -選擇Use a popular style guide
7.Which style guide do you want to follow？-選擇第1個
8.What format do you want your config file to be in? -選擇JSON
9. 詢問是否更新 -選擇Yes
10.Which package manager do you want to use -選擇npm

之后eslint就會根據你的選擇生成配置文件.eslintrc.json，這樣就完成了第一步工作

• 使用yarn

// 在終端輸入下列命令
yarn init -y //生成package.json
yarn add -D eslint
yarn eslint --init

之后的步驟,除了最后一個問題需要選擇使用 yarn下載，其他都同使用npm

2.下載相關插件(在vscode擴展中下載)

• ESLint
  

• Error Lens(可選擇，功能:可以顯示錯誤信息在當前代碼行后)
  
  效果演示:
  

• 可選操作
  關閉vscode原有的對JavaScript代碼的檢驗
  打開設置，選擇工作區，輸入validate，取消勾選JavaScript

完成上步驟后eslint代碼檢測就可以生效了

2.其他設置

1.自定義檢測規則

規則有三種狀態:

• error 表示規則生效，且違反規則會報錯(代碼下出現紅色波浪線)
• warn 表示規則生效，且違反規則會警告(代碼下出現黃色波浪線)
• off 表示不檢測此規則

// 可以在生成的.eslintrc.json中的rules: 自定義規則
// 舉例:
"rules": {
        // 允許使用tab縮進
        "no-tabs":"off",
        // 允許控制臺輸出
        "no-console":"off",
        // 允許使用alert
        "no-alert": "off",
        // 存在未使用的變量(警告)
        "no-unused-vars":"warn",
        // 沒有使用的表達式(報錯)
        "no-unused-expressions":"error"  
    }

演示：

其他規則都可以在官方文檔中查看，可以根據自己的需要添加或修改

2.設置腳本命令

• 自動修復可修復的錯誤和顯示錯誤

// 在package.json中的
	"scripts": {
	// 配置后在終端 使用 npm(yarn) run lint 自動修復可修復的錯誤
    "lint": "eslint --fix --ext .js,.jsx src(src修改為你js文件存放的位置)"
  }

演示：
運行前:

使用命令:

// 終端
npm run lint

運行后:

自動刪除了多余的空行, 將字符串從“”修改為‘’，并在終端顯示其他不能自動修復的錯誤

總結

以上就是今天要講的內容，本文僅僅簡單介紹了最基礎的配置，更多的內容就需要大家自己探索。