08.ESLint基本使用


認識ESLint

ESLint是一個靜態JavaScript代碼分析工具(static program analysis),也就是ESLint可以在代碼沒有運行的時候就對代碼進行分析並且對模式匹配錯誤的代碼進行報告,ESLint的目的是保證代碼的一致性和避免錯誤,可以幫助我們在項目開發中建立統一的團隊代碼規范,保持一致的代碼風格,提高代碼的可讀性和可維護性。

ESLint和之前的JSLint、JSHint等類似,都是用來對js代碼進行靜態分析和檢查的工具。

在命令行工具中使用ESLint

ESLint作為一個js代碼靜態分析工具,是可以獨立於webpack等這些構建工具而工作的,也就是ESLint可以使用其提供的命令行工具對指定的文件或者文件目錄進行檢查。

  1. 首先安裝ESLint
npm i eslint -D
  1. 生成配置文件.eslintrc.js
    要想ESLint生效必須要創建一個配置文件,一般名為.eslintrc.js。但是多數情況下我們不手動創建,而是基於ESLint提供的命令來創建:
npx eslint --init
// 或者
npm init @eslint/config

執行生成ESLint配置文件的命令,此時ESLint會依次彈出多個選擇,並最終根據我們選擇的選項來生成不同的配置文件。
注意:雖然基於不同的選擇生成的配置文件可能不同,但是這些配置文件中信息都是可以修改的。

  1. 使用命令行工具對目標文件進行靜態檢查
npx eslint ./src/index.js

ESLint的配置文件信息

module.exports = {
    "env": {
        "browser": true, // 要檢查的js代碼是運行在瀏覽器端
        "commonjs": true, // 使用commonjs模塊化規范
        "es2021": true // 對ES2021以前的語法都可以進行檢查
    },
    "extends": [
        "eslint:recommended", // 繼承eslint官方推薦的檢查規則
        "plugin:react/recommended", // 繼承react推薦的檢查規則
        "plugin:@typescript-eslint/recommended" //繼承typescript推薦的檢查規則
    ],
    "parser": "@typescript-eslint/parser", // js代碼的解析器,eslint默認的代碼解析器是espree;由於項目中存在ts代碼所以編譯指定為專門解析ts代碼的解析器
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true  // 對jsx語法也進行檢查
        },
        "ecmaVersion": "latest",  // 和env中配置的ECMA版本對應
		"sourceType":"module" // 如果我們在初始化的時候選擇了模塊化規范是Commonjs 如果要想同時支持ESmodule,那么必須在解析配置這里寫上這一句,否則會報錯
		
    },
    "plugins": [
        "react",  
        "@typescript-eslint"
    ],
    "rules": {
    }
}

ESLint的基本原理

  1. ESLint通過默認的JS編譯器espree將要檢查的源代碼進行詞法分析,轉化為tokens數組
  2. tokens數組經過語法分析,生成抽象語法樹AST
  3. 深度遍歷AST的同時訪問每一個節點,並為每一個節點應用插件
  4. 插件在工作的時候對不符合規則的語法報告錯誤並進行修復

解決ESLint報錯的幾種思路

如下是一段源代碼,繼承airbnb推薦配置規則進行代碼檢查:

const a = "hello world"

function demo(){
	return 100
}

export {
	
}

執行npx eslint ./src/eslint/index.js命令之后,控制台顯示ESLint檢查出了下面這些錯誤:

 1:7   error  'a' is assigned a value but never used            no-unused-vars
  1:11  error  Strings must use singlequote                      quotes
  1:24  error  Expected linebreaks to be 'LF' but found 'CRLF'   linebreak-style
  1:24  error  Missing semicolon                                 semi
  2:1   error  Expected linebreaks to be 'LF' but found 'CRLF'   linebreak-style
  3:16  error  Missing space before opening brace                space-before-blocks
  3:16  error  Missing space before opening brace                space-before-blocks
  3:17  error  Expected linebreaks to be 'LF' but found 'CRLF'   linebreak-style
  4:1   error  Unexpected tab character                          no-tabs
  4:1   error  Expected indentation of 2 spaces but found 1 tab  indent
  4:12  error  Expected linebreaks to be 'LF' but found 'CRLF'   linebreak-style
  4:12  error  Missing semicolon                                 semi
  5:2   error  Expected linebreaks to be 'LF' but found 'CRLF'   linebreak-style
  6:1   error  Expected linebreaks to be 'LF' but found 'CRLF'   linebreak-style
  7:9   error  Expected linebreaks to be 'LF' but found 'CRLF'   linebreak-style
  8:1   error  Unexpected tab character                          no-tabs
  8:1   error  Trailing spaces not allowed                       no-trailing-spaces
  8:2   error  Expected linebreaks to be 'LF' but found 'CRLF'   linebreak-style
  9:2   error  Newline required at end of file but not found     eol-last
  9:2   error  Missing semicolon                                 semi

解決ESLint報錯思路一:直接關閉對應的規則校驗

  1. linebreak-style:此條規則的意思是強制使用一致的換行符風格。
    報錯的原因是在 windows 操作系統中換行符通常是回車 (CR) 加換行分隔符 (LF),也就是回車換行(CRLF),然而在 Linux 和 Unix 中只使用簡單的換行分隔符 (LF)。對應的控制字符為 "\n" (LF) 和 "\r\n"(CRLF)。由於繼承了airbnb的規則中要求所有換行符都是LF,所以會報錯,在此我們先將其關閉。

  2. space-before-blocks:該規則將強制塊之前的空格的一致性。
    此規則要求我們在塊語句之前總是要有一個空格,值為never代表塊之前永遠不出現空格,值為always代表快之前必須有一個空格,在此先將其關閉。

  3. no-unused-vars:不允許存在已經聲明但是從未使用的變量,關閉該規則。

  4. no-tabs:文件中任何位置不允許出現tab字符,包括代碼和注釋,將其關閉。

ESLint中對於規則的設置有數字和字符串兩種方式:
"off"或者0,代表關閉規范校驗
"warn"或者1,代表開啟規則,並且使用警告級別的錯誤,程序並不會退出
"error"或者2,代表關閉規則,並且使用錯誤級別的錯誤,程序會退出

rules: {
  "linebreak-style":"off",
  "space-before-blocks":"off",
  "no-unused-vars":0,
  "no-tabs":"off",
},

解決ESLint報錯思路二:根據自己的源代碼來定義適配於自己項目的規則,這會覆蓋掉繼承得來的規則

  1. quotes:該規則強制使用一致的反勾號、雙引號或單引號,airbnb中定義的是單引號,在此我們自定義一個雙引號的規則來覆蓋這個繼承的規則.
rules: {
	"quotes":["error","double"],
}

解決ESLint報錯思路三:修改源代碼以解決校驗報錯

  1. semi:該規則要求在一行代碼的末尾必須要有一個分號,這里我們遵守它的規則,來修改源代碼將代碼的末尾添加一個分號;。
  2. indent:該規則要求代碼的縮進分隔為2個空格,這里我們遵守它的規則,來修改源代碼將代碼的縮進變為2個空格
  3. eol-last:該規則要求文件的最后一行應該有一個空行,這里我們遵守它的規則,來修改源代碼將代碼的最后添加一個空行

VSCode中的ESLint插件

在webpack中配置eslint-loader來進行代碼檢查

在實際的項目開發中,我們不可能對整個項目的js文件都使用命令行工具去依次校驗,為了更好的幫助我們在開發階段發現代碼風格的錯誤,還可以使用專門的eslint-loader來處理:

  1. 安裝eslint-loader
npm i eslint-loader -D
  1. 配置eslint-loader
    注意:eslint-loader的書寫順序應該在數組的末尾,先進行代碼校驗,然后使用babel-loader進行代碼轉換。
module:{
	rules:[
		{
			test:/\.js$/,
			exclude:/node_modules/,
			use:[
				"babel-loader",
				"eslint-loader"
			]
		},
		
	]
},

配置好之后就可以在每次npm run build打包或者啟動本地服務的時候先對js代碼進行校驗,校驗通過之后才會對代碼進行轉化,但是要注意運用eslint-loader對代碼進行的校驗是在代碼的編譯階段工作的,而不是在代碼的編寫階段就工作的。

在VSCode等IDE工具中使用ESLint插件進行代碼檢查

實際上在真實的項目開發中是基本不會使用eslint-loader的,因為兩個原因:

  1. eslint-loader是在代碼的編譯階段開始工作的,我們在寫代碼的時候並不能幫助我們檢查出錯誤
  2. eslint-loader是一定會影響最終的打包構建的速度的

因此最好的情況就是在寫代碼的時候ESLint就可以幫助我們檢查出來錯誤,並且對檢查出來的代碼風格類錯誤可以進行自動修復。

VSCode中ESLint插件運行的原理是:VSCode會默認去項目的根目錄下讀取.eslintrc.js配置文件,如果有此文件就會按照此文件中的配置信息對代碼進行靜態檢查,如果沒有那么會按照VSCode默認的規則來對代碼進行檢查,並實時將錯誤報告顯示在終端。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM