React項目快速搭配eslint，prettier，commitlint，lint-staged

爲了實現代碼規範，咱們在使用中會使用諸多插件，好比eslint、prettier、commitlint、stylelint等等，在新項目中這樣一套組合拳下來，也是稍顯繁瑣，另外還要定製配置文件，某種程度上來講是體力活。

本文的目的是介紹如何簡化配置，統一規範。

1. magic-lint

magic-lint是一款代碼規範工具，集檢查、美化於一體，可以檢查commit信息，經過hook在代碼提交時規範代碼，裏面包含這些:

• eslint
• stylelint
• prettier
• lint-staged
• husky
• commitlint

使用magic-lint以後就不須要單獨安裝上述插件，能夠無門檻使用。

1.1 安裝

npm install magic-lint --save-dev

1.2 參數

Usage: magic-lint [options] file.js [file.js] [dir]

# 提交commit觸發校驗
magic-lint --commit

# 對指定路徑 lint
magic-lint --prettier --eslint --stylelint src/

# 只對提交的代碼進行 lint
magic-lint --staged --prettier --eslint --stylelint

# 對於某些場景須要指定 lint 工具的子參數
magic-lint --eslint.debug  -s.formatter=json -p.no-semi

Options:
--commit, -C              only check commit msg                               [boolean] [default: false]
--staged, -S              only lint git staged files                          [boolean] [default: false]
--prettier, -p            format code with prettier                           [boolean] [default: false]
--eslint, -e              enable lint javascript                              [boolean] [default: false]
--stylelint, --style, -s  enable lint style                                   [boolean] [default: false]
--fix, -f                 fix all eslint and stylelint auto-fixable problems  [boolean] [default: false]
--quiet, -q               report errors only                                  [boolean] [default: false]
--cwd                     current working directory                           [default: process.cwd()

2. 配置

2.1 基礎配置

在package.json中添加如：

+ "husky": {
+   "hooks": {
+     "pre-commit": "magic-lint --staged --eslint --stylelint --prettier --fix"",
+     "commit-msg": "magic-lint --commit"
+   }
+ }

2.2 eslint

eslint是一款代碼檢查工具，使用的時候還需添加具體的配置文件。在React項目中咱們通常會使用eslint-config-airbnb。

經過執行以下命令能夠看到依賴包的版本：

npm info "eslint-config-airbnb@latest" peerDependencies

咱們獲得以下內容：

{
   eslint: '^5.16.0 || ^6.1.0',
  'eslint-plugin-import': '^2.18.2',
  'eslint-plugin-jsx-a11y': '^6.2.3',
  'eslint-plugin-react': '^7.14.3',
  'eslint-plugin-react-hooks': '^1.7.0'
}

若是使用的npm版本大於4，可使用下面的命令快速安裝依賴，無需手動敲打：

npx install-peerdeps --dev eslint-config-airbnb

安裝完成以後在項目根目錄建立.eslintrc.js，一樣可使用下面的命令，或者手動建立：

./node_modules/.bin/eslint --init

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "airbnb",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
};

eslint-config-airbnb本質是eslint配置的定製合集，其實咱們也能夠根據自身狀況維護一套配置，這樣在協做中的項目能夠統一配置，避免配置的來回複製。

2.3 prettier

prettier和eslint須要搭配使用，使用prettier能讓咱們在保存或者提交代碼時格式化代碼，避免不一樣編輯器、開發環境致使的格式問題。

prettier的配置很少，具體的配置介紹能夠看下面的介紹，你們結合eslint的規則配置便可。

這裏咱們使用.prettierrc.js配置方式。

module.exports = {
  // 一行最多 150 字符
  printWidth: 150,
  // 使用 4 個空格縮進
  tabWidth: 4,
  // 不使用縮進符，而使用空格
  useTabs: false,
  // 行尾須要有分號
  semi: true,
  // 使用單引號
  singleQuote: true,
  // 對象的 key 僅在必要時用引號
  quoteProps: 'as-needed',
  // jsx 不使用單引號，而使用雙引號
  jsxSingleQuote: false,
  // 末尾是否須要逗號
  trailingComma: 'es5',
  // 大括號內的首尾須要空格
  bracketSpacing: true,
  // jsx 標籤的反尖括號須要換行
  jsxBracketSameLine: false,
  // 箭頭函數，只有一個參數的時候，也須要括號
  arrowParens: 'always',
  // 每一個文件格式化的範圍是文件的所有內容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不須要寫文件開頭的 @prettier
  requirePragma: false,
  // 不須要自動在文件開頭插入 @prettier
  insertPragma: false,
  // 使用默認的折行標準
  proseWrap: 'preserve',
  // 根據顯示樣式決定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 換行符使用 lf
  endOfLine: 'lf',
};

這裏一樣也有排除文件.prettierignore，語法規則和.gitignore同樣。

2.4 stylelint

stylelint是一款css代碼規範工具，magic-lint裏面已經預置了一些配置和插件：

• stylelint-config-css-modules
• stylelint-config-prettier
• stylelint-config-rational-order
• stylelint-config-standard
• stylelint-declaration-block-no-ignored-properties
• stylelint-order

配置文件能夠命名.stylelintrc.json，填充以下內容：

{
  "extends": ["stylelint-config-standard", "stylelint-config-css-modules", "stylelint-config-rational-order", "stylelint-config-prettier"],
  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
  "rules": {
    "no-descending-specificity": null,
    "plugin/declaration-block-no-ignored-properties": true
  }
}

忽略文件的名稱是.stylelintignore，遵循.gitignore語法。

2.5 commitlint

commitlint是一款校驗commit提交信息的工具，它可讓咱們的提交信息更規範、更有可讀性，甚至能夠基於提交自動生成changelog。

commit的格式要求以下，這段內容一樣也能夠直接用到git提交模板：

Type(<scope>): <subject>

<body>

<footer>

# Type 字段包含:
#  feat：新功能（feature）
#  fix：修補bug
#  docs：文檔（documentation）
#  style： 格式（不影響代碼運行的變更）
#  refactor：重構（即不是新增功能，也不是修改bug的代碼變更）
#  test：增長測試
#  chore：構建過程或輔助工具的變更
# scope用於說明 commit 影響的範圍，好比數據層、控制層、視圖層等等。
# subject是 commit 目的的簡短描述，不超過50個字符
# Body 部分是對本次 commit 的詳細描述，能夠分紅多行
# Footer用來關閉 Issue或以BREAKING CHANGE開頭，後面是對變更的描述、
#  以及變更理由和遷移方法

例子：

git commit -m 'feat: 增長用戶搜搜功能'
git commit -m 'fix: 修復用戶檢測無效的問題'

magic-lint已經內置@commitlint/config-conventional配置方案，它裏面包含了如下幾個type:

'build',
'ci',
'chore',
'docs',
'feat',
'fix',
'perf',
'refactor',
'revert',
'style',
'test'

3. 寫在最後

在前端開發中，須要配置的內容太多太多了，大把的時間花在配置上就真的變成了"前端配置師"。

可能這也是咱們都願意造輪子的緣由了，不過最終在工做中能起到做用的輪子就是好輪子。一樣若是隻是使用別人的輪子，本身又如何能成長呢！

本文同步發表於做者博客: React項目快速搭配eslint，prettier，commitlint，lint-staged