摘要：編碼規(guī)范是獨(dú)角獸公司內(nèi)部的編碼規(guī)范，該項(xiàng)目是上很受歡迎的一個(gè)開源項(xiàng)目，在前端開發(fā)中使用廣泛，本文的配置規(guī)則就是以編碼規(guī)范和編碼規(guī)范作為基礎(chǔ)的。

更新時(shí)間：2019-01-22
React.js create-react-app 項(xiàng)目 + VSCode 編輯器 + ESLint 代碼檢查工具 + Airbnb 編碼規(guī)范

在項(xiàng)目開發(fā)過程中，編寫符合團(tuán)隊(duì)編碼規(guī)范的代碼是尤為重要的，程序首先是給人看的，其次才是給機(jī)器去執(zhí)行。我們?cè)陂_發(fā)工作中，代碼維護(hù)會(huì)占很大的比重，很多時(shí)候我們還需要閱讀他人的代碼，如果沒有一個(gè)統(tǒng)一的編碼規(guī)范，將會(huì)給我們的工作帶來很大的困擾。

因此，我們期望在開發(fā)過程中遵循統(tǒng)一的編碼規(guī)范，以實(shí)現(xiàn)避免基本語法錯(cuò)誤、代碼格式化、規(guī)避一些不推薦的用法等目的，最大程度的保證代碼的可讀性和正確性。通常每個(gè)團(tuán)隊(duì)都會(huì)制定適合自己的編碼規(guī)范和代碼風(fēng)格，但是僅僅制定規(guī)范是不夠的，還需要借助代碼檢查工具來強(qiáng)制推行團(tuán)隊(duì)的編碼規(guī)范，比如 ESLint 代碼檢查工具。

本文會(huì)介紹一種 ESLint 的配置方案，但本文關(guān)于 ESLint 的配置是基于一定的開發(fā)環(huán)境的，偏重于實(shí)際應(yīng)用，并非 ESLint 本身的介紹。這里對(duì) ESLint 的配置基于以下環(huán)境：

React.js create-react-app 腳手架項(xiàng)目

使用 VSCode 編輯器

基于 Airbnb 編碼規(guī)范

ESLint 代碼檢查工具
ESLint（中文） 是一個(gè)開源的 JavaScript 代碼檢查工具，由 Nicholas C. Zakas 于2013年6月創(chuàng)建。

JavaScript 是一個(gè)動(dòng)態(tài)的弱類型語言，在開發(fā)中比較容易出錯(cuò)。因?yàn)闆]有編譯程序，為了尋找 JavaScript 代碼錯(cuò)誤通常需要在執(zhí)行過程中不斷調(diào)試。像 ESLint 這樣的可以讓程序員在編碼的過程中發(fā)現(xiàn)問題而不是在執(zhí)行的過程中。

ESLint 的初衷是為了讓程序員可以創(chuàng)建自己的檢測(cè)規(guī)則。ESLint 的所有規(guī)則都被設(shè)計(jì)成可插入的。ESLint 的默認(rèn)規(guī)則與其他的插件并沒有什么區(qū)別，規(guī)則本身和測(cè)試可以依賴于同樣的模式。為了便于人們使用，ESLint 內(nèi)置了一些規(guī)則，當(dāng)然，你可以在使用過程中自定義規(guī)則。

Create-React-App 應(yīng)用
Create React App 是 React 官方支持的創(chuàng)建單頁面 React 應(yīng)用的方式，通過 create-react-app 腳手架命令可以快速創(chuàng)建一個(gè) React 應(yīng)用，免去了我們自己配置 webpack 的麻煩，我們這次 ESLint 的配置方案就是基于 create-react-app 項(xiàng)目的。

VSCode 編輯器
VSCode 是微軟的良心之作，是一個(gè)輕量且強(qiáng)大的代碼編輯器，支持 Windows 和 Linux。內(nèi)置 JavaScript、TypeScript 和 Node.js 支持，而且擁有豐富的插件生態(tài)系統(tǒng)，還可以通過安裝插件來支持 C++、C#、Python、PHP 等其他語言，堪稱開發(fā)的利器。插件擴(kuò)展：Extensions for the Visual Studio family of products。

Airbnb 編碼規(guī)范
Airbnb JavaScript Style Guide 是獨(dú)角獸公司 Airbnb 內(nèi)部的 JavaScript 編碼規(guī)范，該項(xiàng)目是 Github 上很受歡迎的一個(gè)開源項(xiàng)目，在前端開發(fā)中使用廣泛，本文的 ESLint 配置規(guī)則就是以Airbnb JavaScript 編碼規(guī)范(2.0) 和 Airbnb React/JSX 編碼規(guī)范 作為基礎(chǔ)的。

在 VSCode 擴(kuò)展面板搜索 ESLint，找到安裝最多的那個(gè)安裝即可，安裝完成之后需要 重新加載 以激活擴(kuò)展，但想要讓擴(kuò)展進(jìn)行工作，我們還需要進(jìn)行 ESLint 的安裝配置。

我們的配置方案是基于 CRA 腳手架項(xiàng)目進(jìn)行測(cè)試的，因此我們要先創(chuàng)建一個(gè) CRA 項(xiàng)目，具體方法詳見官方文檔：Create React App。

創(chuàng)建的 CRA 項(xiàng)目文件組織結(jié)構(gòu)如下：

  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 可以選擇進(jìn)行本地安裝：

  npm install eslint --save-dev

也可以進(jìn)行全局安裝：

  npm install -g eslint

一般推薦進(jìn)行全局安裝，使其可以作用于我們所有的項(xiàng)目。具體請(qǐng)參見 eslint-npm 文檔。

ESLint 安裝完成之后，我們需要?jiǎng)?chuàng)建一個(gè)配置文件，為了詳細(xì)演示 ESLint 是如何在實(shí)際項(xiàng)目中工作的，我們接下來的操作都在我們上面已經(jīng)創(chuàng)建的 CRA 腳手架項(xiàng)目中進(jìn)行，且先不考慮 Airbnb 編碼規(guī)范的使用，而是先創(chuàng)建一個(gè)較為常見的自定義代碼風(fēng)格。

我們?cè)趧?chuàng)建的 my-app 項(xiàng)目下執(zhí)行 cmd 命令 eslint --init，根據(jù)提示我們選擇通過 Answer questions about your style 的方式創(chuàng)建一份自定義的代碼規(guī)范，下圖是一個(gè)示例，具體可根據(jù)項(xiàng)目需要進(jìn)行配置：

這樣我們就已經(jīng)創(chuàng)建了一個(gè)自定義的 ESLint 配置文件，可以看到在 my-app 項(xiàng)目中生成了一個(gè)名為 .eslintrc.js 的文件，其中的規(guī)則就是根據(jù)我們上圖中的選擇進(jìn)行設(shè)定的，具體內(nèi)容如下：

  /* .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"
          ]
      }
  };

至此，我們?cè)?VSCode 中打開 my-app 項(xiàng)目，可以發(fā)現(xiàn) ESLint 擴(kuò)展已經(jīng)可以正常工作了，ESLint 會(huì)自動(dòng)檢測(cè)語法錯(cuò)誤，并高亮顯示，同時(shí)在 VSCode 編輯器的問題窗口會(huì)輸出相應(yīng)的錯(cuò)誤信息。

你可以通過在項(xiàng)目根目錄創(chuàng)建一個(gè) .eslintignore 文件告訴 ESLint 去忽略特定的文件和目錄。具體請(qǐng)參見：Ignoring Files and Directories。

例如：把下面 .eslintignore 文件放到當(dāng)前工作目錄里，將忽略項(xiàng)目根目錄下的 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

重要：注意代碼庫(kù)的 node_modules 目錄，比如，一個(gè) packages 目錄，默認(rèn)情況下不會(huì)被忽略，需要手動(dòng)添加到 .eslintignore。

經(jīng)過以上步驟操作之后，ESLint 擴(kuò)展已經(jīng)正常工作了，并且可以根據(jù)錯(cuò)誤提示手動(dòng)修復(fù)檢測(cè)到的錯(cuò)誤，但是這樣顯然是低效和繁瑣的，這個(gè)時(shí)候就需要配置 ESLint 擴(kuò)展插件的自動(dòng)修復(fù)功能了。

在 VSCode 中依次點(diǎn)擊 文件-->首選項(xiàng)-->設(shè)置，打開 settings.json 文件，在設(shè)置中搜索 eslint，會(huì)發(fā)現(xiàn) ESLint 擴(kuò)展插件的自動(dòng)修復(fù)功能是關(guān)閉的，我們?cè)谟覀?cè)的用戶設(shè)置中對(duì)此項(xiàng)進(jìn)行修改，將其設(shè)置為："eslint.autoFixOnSave": true,，這樣 ESLint 擴(kuò)展插件的自動(dòng)修復(fù)功能就打開了。

此時(shí)，我們?cè)俅未蜷_錯(cuò)誤頁面，執(zhí)行保存（Ctrl+s）操作，就會(huì)發(fā)現(xiàn) eslint 的錯(cuò)誤可以自動(dòng)修復(fù)了，如果當(dāng)前頁面錯(cuò)誤較多的話，可能需要多次執(zhí)行 Ctrl+s。

上面我們已經(jīng)使 ESLint 在我們的項(xiàng)目中正常工作了，但使用的代碼風(fēng)格是我們自定義的，有時(shí)候我們希望使用一些大廠的比較成熟的代碼規(guī)范，比如 Airbnb JavaScript Style，接下來我們就將自定義的 ESLint 配置改為使用 Airbnb 編碼規(guī)范配置。

首先，我們需要安裝 2 個(gè) npm 依賴包：

babel-eslint，增強(qiáng)語法識(shí)別能力

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

$ npm i babel-eslint

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 編碼規(guī)范，修改后內(nèi)容如下：

  /* .eslintrc.js */
  module.exports = {
      "env": {
          "browser": true,
          "commonjs": true,
          "es6": true
      },
      "extends": "airbnb", // 使用 eslint-config-airbnb
      "parser": "babel-eslint", // 增強(qiáng)語法識(shí)別能力
      "parserOptions": {
          "ecmaFeatures": {
              "jsx": true
          },
          "ecmaVersion": 2017,
          "sourceType": "module"
      },
      "rules": {
          // 這里可以根據(jù)需要對(duì) airbnb 的規(guī)則進(jìn)行修改，此處僅為示例
          "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 擴(kuò)展插件暫時(shí)無法正確修復(fù)這條規(guī)則帶來的錯(cuò)誤
          "react/jsx-one-expression-per-line": 0,
      }
  };

至此，我們完成了在 React-CRA 應(yīng)用中配合 VSCode 使用 ESLint 的全部配置。

在修改 .eslintrc.js 文件以使用Airbnb 編碼規(guī)范（eslint-config-airbnb）的過程中，發(fā)現(xiàn) VSCode 的 ESLint 擴(kuò)展插件對(duì)其中的有些規(guī)則不能正確的自動(dòng)修復(fù)，比如：

  // 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 的文檔發(fā)現(xiàn)，eslint-config-airbnb v17.1.0 版本修改了上面這條規(guī)則，具體可以參見：re-enabling jsx-one-expression-per-line allowing single children 以及 One JSX Element Per Line (react/jsx-one-expression-per-line)。

當(dāng)前版本的 VSCode 的 ESLint 擴(kuò)展插件無法正確修復(fù)這條規(guī)則帶來的錯(cuò)誤，由于暫時(shí)找不到其他解決方法，這里就先將這條規(guī)則關(guān)閉。

由此可見，隨著 VSCode 或 ESLint 相關(guān)的插件和依賴包版本的變動(dòng)，配置也會(huì)發(fā)生一些不可預(yù)期的變化，這里將用來測(cè)試的 CRA 腳手架項(xiàng)目的 package.json 文件內(nèi)容附錄如下；

  /* 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"
    }
  }