代碼規(guī)范

每個(gè)團(tuán)隊(duì)、每個(gè)人都有自己的代碼規(guī)范。

規(guī)范的代碼可以讓整個(gè)項(xiàng)目的編碼風(fēng)格更統(tǒng)一。

一個(gè)項(xiàng)目的代碼規(guī)范涉及許多方面：

• 是否該用分號(hào)結(jié)尾
• 可否使用位運(yùn)算符
• 能不能寫行 if 語(yǔ)句
• 是否必須要用函數(shù)聲明的形式創(chuàng)建函數(shù)
• …

在沒有工具檢測(cè)的情況下，統(tǒng)一多人項(xiàng)目的編碼風(fēng)格是一件比較困難的事情，每次提交代碼都需要詳細(xì)的 review 每一行代碼，因?yàn)檫@些規(guī)范點(diǎn)都非常細(xì)。

好在目前的前端生態(tài)有許多工具幫我們解決這個(gè)問題。

代碼是否符合規(guī)范，就是要對(duì)代碼進(jìn)行檢查。
對(duì) JavaScript 代碼的檢查，目前使用最多最廣的是 ESLint。

1. ESLint

可組裝的JavaScript和JSX檢查工具

ESLint 的主要作用就是檢查代碼，許多不符合規(guī)范的代碼還可以通過(guò) ESLint 直接修復(fù)。

1.1 安裝 ESLint

ESLint 可以直接使用 npm 安裝。

首先在空目錄創(chuàng)建一個(gè)項(xiàng)目，然后安裝 ESLint。

npm init -y

npm i eslint -D

安裝后修改 package.json 的 scripts 配置項(xiàng)。

{
  "scripts": {
    "lint": "eslint ./src/**/*.*"
  }
}

eslint 命令就可以執(zhí)行 eslint，./src/**/*.* 表示檢查 src 目錄開始的所有文件。

接下來(lái)創(chuàng)建配置文件：

1.2 創(chuàng)建配置文件

在項(xiàng)目根目錄下創(chuàng)建一個(gè) .eslintrc.js 的配置文件，.eslintrc 是 eslint 會(huì)去默認(rèn)找的配置文件名。

eslint 可以用多種格式的配置，如 JSON、YAML，通常會(huì)選則 .js 文件，因?yàn)榭梢苑奖銜鴮懸恍┉h(huán)境相關(guān)的邏輯、寫注釋等。

// .eslintrc.js
module.exports = {
  'rules': { // 椒鹽規(guī)則
    'indent': [ // 鎖進(jìn)為2個(gè)一鎖 不然報(bào)錯(cuò)
      'error',
      2,
    ],
    'quotes': [ // 引號(hào)必須使用單引號(hào) 不然報(bào)錯(cuò)
      'error',
      'single',
    ],
    'semi': [ // 語(yǔ)句結(jié)束必須要分號(hào) 不然報(bào)錯(cuò)
      'error',
      'always',
    ],
  },
};

配置文件創(chuàng)建后可以在項(xiàng)目下創(chuàng)建 src 目錄，并且寫一個(gè)不符合規(guī)則的 .js 文件。

// ./src/index.js
var number = 1

if (number < 10) {
    console.log("咕咕？");
}

完成后，就可以執(zhí)行 npm run lint 命令了。

可以看到其炸了三個(gè) error 級(jí)別的通知，因?yàn)樵谂渲玫臅r(shí)候提供的級(jí)別就是 error。

第一個(gè) Missing semicolon，就是表示沒有分號(hào)。
第二個(gè) Expected indentation of 2 spaces but found 4，表示應(yīng)該需要2個(gè)鎖進(jìn)，但其實(shí)有4個(gè)。
第三個(gè) Strings must use singlequote，表示字符串應(yīng)使用單引號(hào)包裹。

eslint 通過(guò)提供的配置規(guī)則來(lái)檢查代碼，發(fā)現(xiàn)不符合規(guī)則的部分就會(huì)告訴你錯(cuò)誤。

如果把他提供的錯(cuò)誤都修好，代碼檢測(cè)就會(huì)正常通過(guò)。

// ./src/index.js
var number = 1;

if (number < 10) {
  console.log('咕咕？');
}

如果放心把修復(fù)的權(quán)利交給 eslint，可以使用 eslint ./src/**/*.* --fix 命令，來(lái)修復(fù)這些報(bào)錯(cuò)。

// package.json
{
  "scripts": {
    "fix": "eslint ./src/**/*.* --fix"
  }
}

增加 fix 命令后執(zhí)行 npm run fix，就會(huì)根據(jù)配置修復(fù)報(bào)錯(cuò)。

eslint --init 命令會(huì)調(diào)用 eslint 并以交互問答方式來(lái)快速創(chuàng)建一個(gè)配置文件。

2. 小結(jié)

ESLint 的規(guī)則有許多，還有很多大廠使用的預(yù)設(shè)規(guī)范，ESLint 也采用了配置項(xiàng)的方式可以配置。

對(duì)團(tuán)隊(duì)規(guī)范的檢查其實(shí)就是將團(tuán)隊(duì)內(nèi)的規(guī)則映射到 ESLint 的規(guī)則上。

許多編輯器和 IDE 都有對(duì) eslint 規(guī)則的分析，從而對(duì)代碼進(jìn)行靜態(tài)檢查，在推送代碼前就可以處理掉很多問題，通常情況下代碼的規(guī)范檢查發(fā)生在 git commit 的時(shí)候，git 提供了對(duì)應(yīng)階段的鉤子。

如果需要對(duì)樣式進(jìn)行檢查，可以考慮使用 stylelint， 使用方式和 eslint 大同小異。