項目集成eslint、stylelint、commitlint

在實際開發中不免會有協同開發的時候，每一個開發編寫代碼的風格、提交代碼備註信息等方面的風格不盡一致，所以事先統一風格變得尤其重要。本文將在項目中集成eslint、stylelint、commitlint幫助校驗JS腳本代碼規範、CSS腳本規範以及commit msg規範。

準備示例工程

使用create-react-app腳手架搭建示例工程，工程支持typescript

create-react-app react-lint --template typescript

eslint

在終端執行下面命令

npx eslint --init

執行後，終端會出現人機交互，按照本身需求勾選選項便可

最後會提示須要安裝如下這些插件

eslint-plugin-react@latest 
@typescript-eslint/eslint-plugin@latest 
eslint-config-standard@latest 
eslint@^7.12.1 
eslint-plugin-import@^2.22.1 
eslint-plugin-node@^11.1.0 
eslint-plugin-promise@^4.2.1 
@typescript-eslint/parser@latest

解釋下這些插件的做用：

• eslint-plugin-react：請注意，支持 JSX 語法並不等同於支持 React。React 對 ESLint 沒法識別的JSX語法應用特定的語義。若是你正在使用 React 而且想要 React 語義支持，咱們建議你使用 eslint-plugin-react
• @typescript-eslint/parser：ESLint 默認使用Espree做爲其解析器，@typescript-eslint/parser解析器將 TypeScript 轉換成與 estree 兼容的形式，以便在ESLint中使用。
• eslint-config-standard：是一個比較流行的腳本風格插件，裏面提供了不少代碼風格規則。
• @typescript-eslint/eslint-plugin：爲TypeScript代碼庫提供lint規則。
• eslint-plugin-import：該插件旨在支持ES2015 +（ES6 +）導入/導出語法的檢查，並防止文件路徑和導入名稱拼寫錯誤的問題。
• eslint-plugin-node：針對node語法的檢查。
• eslint-plugin-promise：針對Promise語法的檢驗。

執行完npx eslint --init後會在根目錄生成.eslintrc配置文件，也能夠本身手動建立或者在 package.json 裏建立一個 eslintConfig屬性，在那裏定義你的配置

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:react/recommended',
    'standard'
  ],
  parser: '@typescript-eslint/parser', // 將 TypeScript 轉換成與 estree 兼容的形式，以便在ESLint中使用
  parserOptions: {
    ecmaFeatures: {
      jsx: true // 啓用 JSX
    },
    ecmaVersion: 12, // 指定你想要使用的 ECMAScript 版本
    sourceType: 'module'
  },
  plugins: [
    'react', // eslint-plugin-react的縮寫，使ESLint支持 React 語義
    '@typescript-eslint' // @typescript-eslint/eslint-plugin的縮寫，爲TypeScript代碼庫提供lint規則
  ],
  rules: {
    semi: [2, 'always'],
    'no-use-before-define': 'off' // 'React' was used before it was defined
  }
};

配置好了以後，eslint服務會自動校驗.tsx腳本文件，好比語句結尾缺乏分號：

可是，若是報錯的地方比較多了，手動一個一個去改太麻煩了。在VScode中安裝eslint拓展插件，而且在.vscode/settings.json中配置保存時自動修復，以下：

// 如何配置在eslint拓展插件中有使用說明
{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "eslint.enable": true,
}

當Ctrl+S保存時會自動修復代碼格式化問題。

stylelint

stylelint用來校驗CSS腳本語法、格式問題

• 安裝stylelint、stylelint-config-standard，stylelint-config-standard繼承stylelint-config-recommended，提供一些經常使用的CSS規則，是stylelint推薦的配置

  yarn add stylelint stylelint-config-standard -D

• 在根目錄下生成.stylelintrc.json配置文件，並根據以下初始化配置

  {
    "extends": "stylelint-config-standard"
  }

• 安裝stylelint-order、stylelint-config-rational-order，stylelint-order是
  stylelint-config-rational-order提供了CSS順序的規則。這兩個插件能夠幫助矯正樣式順序

  {
    "extends": ["stylelint-config-standard", "stylelint-config-rational-order"],
    "plugins": ["stylelint-order"],
    "rules": {
      "string-quotes": "single"
    }
  }

  stylelint-config-rational-order提供的規則中排除了對scss中'composes', '@import', '@extend', '@mixin', '@at-root'這些屬性的處理
  

commitlint