中小型前端團(tuán)隊(duì)代碼規(guī)范工程化最佳實(shí)踐 - ESLint

作者：axuebing

來(lái)源：Segmentfault 思否社區(qū)

前言

There are a thousand Hamlets in a thousand people's eyes.

• 單引號(hào)還是雙引號(hào)？
• 代碼行結(jié)束是否需要分號(hào)？
• 兩個(gè)空格還是四個(gè)空格？
• ...

關(guān)于 ESLint

• Find Problems。ESLint 通過(guò)靜態(tài)代碼分析可以快速發(fā)現(xiàn)代碼中的問(wèn)題。ESLint 可以運(yùn)行在大多數(shù)文本編輯器中，并且也可以在工作流中接入 ESLint
• Fix Automatically。ESLint 發(fā)現(xiàn)的很多問(wèn)題都可以自動(dòng)修復(fù)
• Customize。可以定制 ESLint 檢查規(guī)則

1. 基于業(yè)界現(xiàn)有的 ESLint 規(guī)范和團(tuán)隊(duì)代碼習(xí)慣定制一套統(tǒng)一的 ESLint 代碼規(guī)則
2. 將統(tǒng)一代碼規(guī)則封裝成 ESLint 規(guī)則包接入
3. 將 ESLint 接入腳手架、編輯器以及研發(fā)工作流中

快速上手

// index.js
const name = 'axuebin'

npm install eslint --save-dev

module.exports = {
  env: {
    es2021: true,
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {},
};

簡(jiǎn)單配置

module.exports = {
  env: {
    es2021: true,
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {
    semi: ['error', 'always'],
    quotes: ['error', 'single'],
  },
};

// index.js
const name = "axuebin"

執(zhí)行 eslint 命令之后：

• [no-unused-vars] 'name' is assigned a value but never used。定義了 name 變量卻未使用。
• [quotes] Strings must use singlequote。字符串必須使用單引號(hào)。
• [semi] Missing semicolon。缺失分號(hào)。

自動(dòng)修復(fù)

使用配置包

module.exports = {
  extends: "eslint:recommended"
}

• eslint-config-airbnb: Airbnb 公司提供的配置集
• eslint-config-prettier: 使用這個(gè)配置集，會(huì)關(guān)閉一些可能與 Prettier 沖突的規(guī)則
• eslint-config-react: create react app 使用的配置集
• eslint-config-vue: vuejs 使用的配置集
• ...

最佳實(shí)踐

抽象配置集

• 技術(shù)選型不一致：框架上 PC 使用 React，H5 使用 Vue；是否使用 TypeScript
• 跨端場(chǎng)景多：Web 端和小程序端，還有 Node
• ...

開(kāi)發(fā)插件

腳手架 / CLI 工具

• 詢問(wèn)用戶當(dāng)前項(xiàng)目的類型（是 JavaScript 還是 TypeScript、是 React 還是 Vue）
• 根據(jù)項(xiàng)目類型寫 .eslintrc.js 文件
• 根據(jù)項(xiàng)目類型安裝所需依賴（比如 vue 需要 eslint-plugin-vue）
• 在 package.json 的 scripts 中寫入 "lint": "eslint src test --fix"  

const path = require('path');
const fs = require('fs');
const chalk = require('chalk');
const spawn = require('cross-spawn');

const { askForLanguage, askForFrame } = require('./ask');
const { eslintrcConfig, needDeps } = require('./config');

module.exports = async () => {
  const language = await askForLanguage();
  const frame = await askForFrame();

  let type = language;
  if (frame) {
    type += `/${frame}`;
  }

  fs.writeFileSync(
    path.join(process.cwd(), '.eslintrc.js'),
    `// Documentation\n// https://github.com/axuebin/eslint-config-axuebin\nmodule.exports = ${JSON.stringify(
      eslintrcConfig(type),
      null,
      2
    )}`
  );

  const deps = needDeps.javascript;
  if (language === 'typescript') {
    deps.concat(needDeps.typescript);
  }
  if (frame) {
    deps.concat(needDeps[frame]);
  }

  spawn.sync('npm', ['install', ...deps, '--save'], { stdio: 'inherit' });
};

• 開(kāi)發(fā)時(shí)：依賴編輯器的能力
• 手動(dòng)運(yùn)行：在終端中手動(dòng)執(zhí)行 eslint 命令
• pre-commit：在提交 git 前自動(dòng)執(zhí)行 eslint 命令
• ci：依賴 git 的持續(xù)集成，可以將檢查結(jié)果輸出文件上傳到服務(wù)器

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint --cache --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

總結(jié)