/

用 ESLint 使你的程式碼保持乾淨整潔

用 ESLint 使你的程式碼保持乾淨整潔

學習最受歡迎的 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。

1
2
3
4
5
6
7
npm install -g eslint

# 創建一個 `.eslintrc` 配置文件
eslint --init

# 對文件運行 ESLint
eslint yourfile.js

本地安裝 ESLint

1
2
3
4
5
6
7
npm install eslint --save-dev

# 創建一個 `.eslintrc` 配置文件
./node\_modules/.bin/eslint --init

# 對文件運行 ESLint
./node\_modules/.bin/eslint yourfile.js

在你喜愛的編輯器中使用 ESLint

最常見的使用方式是在你的編輯器內使用 ESLint。

常見的 ESLint 設定

ESLint 可以以多種不同的方式進行配置。

Airbnb 程式碼風格指南

常見的設定是使用 Airbnb JavaScript 程式碼風格 來檢查你的程式碼。

執行以下命令：

1
yarn add --dev eslint-config-airbnb

或者

1
npm install --save-dev eslint-config-airbnb

安裝 Airbnb 配置套件，然後在你的項目根目錄下的 .eslintrc 文件中添加以下內容：

1
2
3
{
 "extends": "airbnb",
}

React

使用 React 插件可以輕鬆檢查 React 代碼：

執行以下命令：

1
yarn add --dev eslint-plugin-react

或者

1
npm install --save-dev eslint-plugin-react

在 .eslintrc 文件中加入以下內容：

1
2
3
4
5
6
7
8
9
10
11
{
 "extends": "airbnb",
 "plugins": [
 "react"
 ],
 "parserOptions": {
 "ecmaFeatures": {
 "jsx": true
 }
 }
}

使用特定版本的 ECMAScript

ECMAScript 現在每年更換一個版本。

默認版本目前設定為 5，表示 2015 年之前的版本。

通過在 .eslintrc 文件中設置以下屬性，可以開啟 ES6（或更高版本）：

1
2
3
4
5
{
 "parserOptions": {
 "ecmaVersion": 6,
 }
}

強制使用嚴格模式

1
2
3
4
5
6
7
{
 "parserOptions": {
 "ecmaFeatures": {
 "impliedStrict": true
 }
 }
}

更進階的規則

你可以在官方網站 https://eslint.org/docs/user-guide/configuring 找到有關規則的詳細指南。

在特定行上禁用規則

有時，一個規則可能會給出一個誤報，或者你可能明確希望採取一條 ESLint 標記的路線。

在這種情況下，你可以完全取消在幾行上的 ESLint 檢查：

1
2
3
/* eslint-disable */
alert('test');
/* eslint-enable */

或者在一行上禁用：

1
alert('test'); // eslint-disable-line

或者禁用一行或多行上的一個或多個特定規則：

1
2
3
4
/* eslint-disable no-alert, no-console */
alert('test');
console.log('test');
/* eslint-enable no-alert, no-console */

或者禁用一行上的一個或多個特定規則：

1
alert('test'); // eslint-disable-line no-alert, quotes, semi

tags: [“JavaScript”, “Linter”, “ESLint”, “Syntax conventions”, “Code standards”]