學習最受歡迎的 JavaScript Linter 基礎知識,它可以協助你的程式碼遵守特定的語法規範,檢查程式碼中是否存在潛在問題的來源,以及程式碼是否符合你或你的團隊所定義的一套標準。
ESLint 是一個 JavaScript Linter。
什麼是 Linter?
好問題!Linter 是一種用於檢查程式碼中問題的工具。
運行 Linter 可以告訴你許多事情:
- 程式碼是否遵從特定的語法規範
- 程式碼是否包含可能的問題來源
- 程式碼是否符合你或你的團隊所定義的一套標準
它會提出警告,你或你的工具可以分析這些警告並提供可行的數據,以改進程式碼。
ESLint
ESLint 是用於 JavaScript 程式語言的 Linter,使用 Node.js 撰寫。
它非常有用,因為 JavaScript 是一種解釋語言,並且許多錯誤只有在運行時才能發現。
ESLint 將幫助你捕捉這些錯誤。你問的是哪些錯誤呢?
- 避免在
for
迴圈條件中出現無窮迴圈 - 確保所有 getter 方法返回某些值
- 不允許使用 console.log(或類似)語句
- 檢查 switch 中的重複 case
- 檢查無法訪問的程式碼
- 檢查 JSDoc 的有效性
還有更多!完整列表請參閱 https://eslint.org/docs/rules/
由於 Prettier 作為一個程式碼格式化工具的日益流行,ESLint 中的程式碼風格部分變得有些過時,但 ESLint 仍然非常有用,可以用於捕捉程式碼中的錯誤和壞味道。
ESLint 非常靈活且可配置,你可以選擇要檢查哪些規則或強制使用哪種樣式。許多可用的規則都是禁用的,你可以在 .eslintrc
配置文件中啟用它們,該文件可以是全域的或特定於你的專案。
全域安裝 ESLint
使用 npm。
npm install -g eslint
eslint --init
eslint yourfile.js
本地安裝 ESLint
npm install eslint --save-dev
./node\_modules/.bin/eslint --init
./node\_modules/.bin/eslint yourfile.js
在你喜愛的編輯器中使用 ESLint
最常見的使用方式是在你的編輯器內使用 ESLint。
常見的 ESLint 設定
ESLint 可以以多種不同的方式進行配置。
Airbnb 程式碼風格指南
常見的設定是使用 Airbnb JavaScript 程式碼風格 來檢查你的程式碼。
執行以下命令:
yarn add --dev eslint-config-airbnb
或者
npm install --save-dev eslint-config-airbnb
安裝 Airbnb 配置套件,然後在你的項目根目錄下的 .eslintrc
文件中添加以下內容:
{
"extends": "airbnb",
}
React
使用 React 插件可以輕鬆檢查 React 代碼:
執行以下命令:
yarn add --dev eslint-plugin-react
或者
npm install --save-dev eslint-plugin-react
在 .eslintrc
文件中加入以下內容:
{
"extends": "airbnb",
"plugins": [
"react"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
}
}
使用特定版本的 ECMAScript
ECMAScript 現在每年更換一個版本。
默認版本目前設定為 5,表示 2015 年之前的版本。
通過在 .eslintrc
文件中設置以下屬性,可以開啟 ES6(或更高版本):
{
"parserOptions": {
"ecmaVersion": 6,
}
}
強制使用嚴格模式
{
"parserOptions": {
"ecmaFeatures": {
"impliedStrict": true
}
}
}
更進階的規則
你可以在官方網站 https://eslint.org/docs/user-guide/configuring 找到有關規則的詳細指南。
在特定行上禁用規則
有時,一個規則可能會給出一個誤報,或者你可能明確希望採取一條 ESLint 標記的路線。
在這種情況下,你可以完全取消在幾行上的 ESLint 檢查:
/* eslint-disable */
alert('test');
/* eslint-enable */
或者在一行上禁用:
alert('test'); // eslint-disable-line
或者禁用一行或多行上的一個或多個特定規則:
/* eslint-disable no-alert, no-console */
alert('test');
console.log('test');
/* eslint-enable no-alert, no-console */
或者禁用一行上的一個或多個特定規則:
alert('test'); // eslint-disable-line no-alert, quotes, semi