ESLint 是一個開源的 JavaScript 代碼檢查工具。JavaScript 是一個動態的弱類型語言,在開發中比較容易出錯。因為沒有編譯程序,為了尋找 JavaScript 代碼錯誤通常需要在執行過程中不斷調試。像 ESLint 這樣的可以讓程序員在編碼的過程中發現問題而不是在執行的過程中。
說明:
- ESLint 並不推薦任何編碼風格,規則是自由的
- 所有內置規則都是泛化的
1.初始化ESLint
(1)安裝
npm install eslint --save-dev
(2)設置配置文件
控制台輸入:npx eslint --init 即開始選擇配置:
How would you like to use ESLint? ——希望如何使用ESLint
這里選擇第二個
What type of modules does your project use?——選擇什么風格
這里選擇第一個
Which framework does your project use?——所在的項目是什么項目:VUE或者REACT
這里示例沒有使用任何框架,所以選第三個
Where does your code run?——運行在什么環境
這里可以多選,所以兩個都選
What format do you want your config file to be in? ——希望以什么格式的文件保存配置
這里選擇JavaScript
選擇完畢會在當前根目錄創建一個.eslintrc.js:
(3)測試ESLint
新建src目錄創建index.js文件,寫上如下代碼:
控制台運行: npx eslint ./src/index.js
此時報錯:
報錯為:變量a已被聲明但是從未調用
(4)校驗多個文件
在src目錄下新建一個文件util.js
此時如果需要同時校驗兩個文件,控制台輸入: npx eslint .\src\index.js .\src\util.js
或者使用*通配符校驗多個js文件:npx eslint .\src\*.js
或者直接使用腳本命令來執行教養:
現在packages.json中添加命令:"eslint":"eslint ./src/*.js"
此時直接在命令行執行命令:yarn eslint(或者npm run eslint)即可實現同樣的目的
說明,如果src文件夾內有多級目錄,命令可以改成 "eslint":"eslint ./src"
這樣,src目錄下所有的js文件都可以被監聽到