在 React-CRA 應用中配合 VSCode 使用 ESLint 實踐前端代碼規範

更新時間：2019-01-22
React.js create-react-app 項目 + VSCode 編輯器 + ESLint 代碼檢查工具 + Airbnb 編碼規範

前言

爲何要使用 ESLint

在項目開發過程當中，編寫符合團隊編碼規範的代碼是尤其重要的，程序首先是給人看的，其次纔是給機器去執行。咱們在開發工做中，代碼維護會佔很大的比重，不少時候咱們還須要閱讀他人的代碼，若是沒有一個統一的編碼規範，將會給咱們的工做帶來很大的困擾。

所以，咱們指望在開發過程當中遵循統一的編碼規範，以實現避免基本語法錯誤、代碼格式化、規避一些不推薦的用法等目的，最大程度的保證代碼的可讀性和正確性。一般每一個團隊都會制定適合本身的編碼規範和代碼風格，可是僅僅制定規範是不夠的，還須要藉助代碼檢查工具來強制推行團隊的編碼規範，好比 ESLint 代碼檢查工具。

本文會介紹一種 ESLint 的配置方案，但本文關於 ESLint 的配置是基於必定的開發環境的，偏重於實際應用，並不是 ESLint 自己的介紹。這裏對 ESLint 的配置基於如下環境：

• React.js create-react-app 腳手架項目
• 使用 VSCode 編輯器
• 基於 Airbnb 編碼規範

相關連接

1. ESLint 代碼檢查工具
   ESLint（中文） 是一個開源的 JavaScript 代碼檢查工具，由 Nicholas C. Zakas 於2013年6月建立。

   JavaScript 是一個動態的弱類型語言，在開發中比較容易出錯。由於沒有編譯程序，爲了尋找 JavaScript 代碼錯誤一般須要在執行過程當中不斷調試。像 ESLint 這樣的可讓程序員在編碼的過程當中發現問題而不是在執行的過程當中。

   ESLint 的初衷是爲了讓程序員能夠建立本身的檢測規則。ESLint 的全部規則都被設計成可插入的。ESLint 的默認規則與其餘的插件並無什麼區別，規則自己和測試能夠依賴於一樣的模式。爲了便於人們使用，ESLint 內置了一些規則，固然，你能夠在使用過程當中自定義規則。

2. Create-React-App 應用
   Create React App 是 React 官方支持的建立單頁面 React 應用的方式，經過 create-react-app 腳手架命令能夠快速建立一個 React 應用，免去了咱們本身配置 webpack 的麻煩，咱們此次 ESLint 的配置方案就是基於 create-react-app 項目的。
3. VSCode 編輯器
   VSCode 是微軟的良心之做，是一個輕量且強大的代碼編輯器，支持 Windows 和 Linux。內置 JavaScript、TypeScript 和 Node.js 支持，並且擁有豐富的插件生態系統，還能夠經過安裝插件來支持 C++、C#、Python、PHP 等其餘語言，堪稱開發的利器。插件擴展：Extensions for the Visual Studio family of products。
4. Airbnb 編碼規範
   Airbnb JavaScript Style Guide 是獨角獸公司 Airbnb 內部的 JavaScript 編碼規範，該項目是 Github 上很受歡迎的一個開源項目，在前端開發中使用普遍，本文的 ESLint 配置規則就是以Airbnb JavaScript 編碼規範(2.0) 和 Airbnb React/JSX 編碼規範 做爲基礎的。

具體配置方法

在 VSCode 中安裝 ESLint 擴展

在 VSCode 擴展面板搜索 ESLint，找到安裝最多的那個安裝便可，安裝完成以後須要 從新加載 以激活擴展，但想要讓擴展進行工做，咱們還須要進行 ESLint 的安裝配置。

建立 CRA 項目

咱們的配置方案是基於 CRA 腳手架項目進行測試的，所以咱們要先建立一個 CRA 項目，具體方法詳見官方文檔：Create React App。

建立的 CRA 項目文件組織結構以下：

my-app
  ├── README.md
  ├── node_modules
  ├── package.json
  ├── .gitignore
  ├── public
  │   ├── favicon.ico
  │   ├── index.html
  │   └── manifest.json
  └── src
      ├── App.css
      ├── App.js
      ├── App.test.js
      ├── index.css
      ├── index.js
      ├── logo.svg
      └── serviceWorker.js

安裝 ESLint

ESLint 能夠選擇進行本地安裝：

npm install eslint --save-dev

也能夠進行全局安裝：

npm install -g eslint

通常推薦進行全局安裝，使其能夠做用於咱們全部的項目。具體請參見 eslint-npm 文檔。

建立 ESLint 配置文件

ESLint 安裝完成以後，咱們須要建立一個配置文件，爲了詳細演示 ESLint 是如何在實際項目中工做的，咱們接下來的操做都在咱們上面已經建立的 CRA 腳手架項目中進行，且先不考慮 Airbnb 編碼規範的使用，而是先建立一個較爲常見的自定義代碼風格。

咱們在建立的 my-app 項目下執行 cmd 命令 eslint --init，根據提示咱們選擇經過 Answer questions about your style 的方式建立一份自定義的代碼規範，下圖是一個示例，具體可根據項目須要進行配置：

這樣咱們就已經建立了一個自定義的 ESLint 配置文件，能夠看到在 my-app 項目中生成了一個名爲 .eslintrc.js 的文件，其中的規則就是根據咱們上圖中的選擇進行設定的，具體內容以下：

/* .eslintrc.js */
  module.exports = {
      "env": {
          "browser": true,
          "commonjs": true,
          "es6": true
      },
      "extends": "eslint:recommended",
      "parserOptions": {
          "ecmaFeatures": {
              "jsx": true
          },
          "ecmaVersion": 2018,
          "sourceType": "module"
      },
      "plugins": [
          "react"
      ],
      "rules": {
          "indent": [
              "error",
              4
          ],
          "linebreak-style": [
              "error",
              "windows"
          ],
          "quotes": [
              "error",
              "single"
          ],
          "semi": [
              "error",
              "always"
          ]
      }
  };

至此，咱們在 VSCode 中打開 my-app 項目，能夠發現 ESLint 擴展已經能夠正常工做了，ESLint 會自動檢測語法錯誤，並高亮顯示，同時在 VSCode 編輯器的問題窗口會輸出相應的錯誤信息。

忽略特定的文件和目錄

你能夠經過在項目根目錄建立一個 .eslintignore 文件告訴 ESLint 去忽略特定的文件和目錄。具體請參見：Ignoring Files and Directories。

例如：把下面 .eslintignore 文件放到當前工做目錄裏，將忽略項目根目錄下的 node_modules，bower_components 以及 build/ 目錄下除了 build/index.js 的全部文件。

# /node_modules/* and /bower_components/* in the project root are ignored by default

  # Ignore built files except build/index.js
  build/*
  !build/index.js

重要：注意代碼庫的 node_modules 目錄，好比，一個 packages 目錄，默認狀況下不會被忽略，須要手動添加到 .eslintignore。

設置 autoFixOnSave

通過以上步驟操做以後，ESLint 擴展已經正常工做了，而且能夠根據錯誤提示手動修復檢測到的錯誤，可是這樣顯然是低效和繁瑣的，這個時候就須要配置 ESLint 擴展插件的自動修復功能了。

在 VSCode 中依次點擊 文件-->首選項-->設置，打開 settings.json 文件，在設置中搜索 eslint，會發現 ESLint 擴展插件的自動修復功能是關閉的，咱們在右側的用戶設置中對此項進行修改，將其設置爲："eslint.autoFixOnSave": true,，這樣 ESLint 擴展插件的自動修復功能就打開了。

此時，咱們再次打開錯誤頁面，執行保存（Ctrl+s）操做，就會發現 eslint 的錯誤能夠自動修復了，若是當前頁面錯誤較多的話，可能須要屢次執行 Ctrl+s。

使用 Airbnb 編碼規範

上面咱們已經使 ESLint 在咱們的項目中正常工做了，但使用的代碼風格是咱們自定義的，有時候咱們但願使用一些大廠的比較成熟的代碼規範，好比 Airbnb JavaScript Style，接下來咱們就將自定義的 ESLint 配置改成使用 Airbnb 編碼規範配置。

首先，咱們須要安裝 2 個 npm 依賴包：

1. babel-eslint，加強語法識別能力

   babel-eslint allows you to lint ALL valid Babel code with the fantastic ESLint.

   $ npm i babel-eslint

2. eslint-config-airbnb，Airbnb 提供的支持 ECMAScript 6+ 和 React 的 ESLint rules，包括 eslint eslint-plugin-import eslint-plugin-react 以及 eslint-plugin-jsx-a11y。

   Our default export contains all of our ESLint rules, including ECMAScript 6+ and React. It requires eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y. If you don't need React, see eslint-config-airbnb-base.

   // If using npm 5+, use this shortcut
   $ npx install-peerdeps --dev eslint-config-airbnb

而後咱們要修改 .eslintrc.js 文件，以使用咱們安裝的 Airbnb 編碼規範，修改後內容以下：

/* .eslintrc.js */
  module.exports = {
      "env": {
          "browser": true,
          "commonjs": true,
          "es6": true
      },
      "extends": "airbnb", // 使用 eslint-config-airbnb
      "parser": "babel-eslint", // 加強語法識別能力
      "parserOptions": {
          "ecmaFeatures": {
              "jsx": true
          },
          "ecmaVersion": 2017,
          "sourceType": "module"
      },
      "rules": {
          // 這裏能夠根據須要對 airbnb 的規則進行修改，此處僅爲示例
          "linebreak-style": 0,
          "prefer-destructuring": 0,
          "prefer-const": 0,
          "one-var": 0,
          "comma-dangle": ['error', {
              arrays: 'only-multiline',
              objects: 'always-multiline',
              imports: 'only-multiline',
              exports: 'only-multiline',
              functions: 'ignore',
          }],
          "no-console": 1,
          "import/prefer-default-export": 0,
          "import/no-extraneous-dependencies": [2, {'devDependencies': true}],
          "react/prop-types": 1,
          "react/forbid-prop-types": 0,
          "react/jsx-filename-extension": [2, {extensions: ['.js', '.jsx', '.tsx']}],
          "jsx-a11y/anchor-is-valid": 0,

          // VSCode 的 ESLint 擴展插件暫時沒法正確修復這條規則帶來的錯誤
          "react/jsx-one-expression-per-line": 0,
      }
  };

至此，咱們完成了在 React-CRA 應用中配合 VSCode 使用 ESLint 的所有配置。

錯誤信息

在修改 .eslintrc.js 文件以使用Airbnb 編碼規範（eslint-config-airbnb）的過程當中，發現 VSCode 的 ESLint 擴展插件對其中的有些規則不能正確的自動修復，好比：

// One JSX Element Per Line
  // https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/jsx-one-expression-per-line.md
  'react/jsx-one-expression-per-line': ['error', { allow: 'single-child' }],

查閱 eslint-config-airbnb 的文檔發現，eslint-config-airbnb v17.1.0 版本修改了上面這條規則，具體能夠參見：re-enabling jsx-one-expression-per-line allowing single children 以及 One JSX Element Per Line (react/jsx-one-expression-per-line)。

當前版本的 VSCode 的 ESLint 擴展插件沒法正確修復這條規則帶來的錯誤，因爲暫時找不到其餘解決方法，這裏就先將這條規則關閉。

因而可知，隨着 VSCode 或 ESLint 相關的插件和依賴包版本的變更，配置也會發生一些不可預期的變化，這裏將用來測試的 CRA 腳手架項目的 package.json 文件內容附錄以下；

/* package.json */
  {
    "name": "my-app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "babel-eslint": "^10.0.1",
      "react": "^16.7.0",
      "react-dom": "^16.7.0",
      "react-scripts": "2.1.3"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": [
      ">0.2%",
      "not dead",
      "not ie <= 11",
      "not op_mini all"
    ],
    "devDependencies": {
      "eslint": "^5.3.0",
      "eslint-config-airbnb": "^17.1.0",
      "eslint-plugin-import": "^2.14.0",
      "eslint-plugin-jsx-a11y": "^6.1.1",
      "eslint-plugin-react": "^7.11.0"
    }
  }