帶你了解規范化-eslint、stylelint、prettier、git hooks

Study Notes

本博主會持續更新各種前端的技術，如果各位道友喜歡，可以關注、收藏、點贊下本博主的文章。

規范化標準

規范化是我們踐行前端工程化中重要的一部分

為什么要有規范化標準

軟件開發需要多人協同
不同開發者具有不同的編碼習慣和喜好
不同的喜好增加項目維護成本
每個項目或者團隊需要明確統一的標準

哪里需要規范化標準

代碼、文檔、甚至是提交日志
開發過程中人為編寫的成果物
代碼標準化規范最為重要

常見的規范化實現方式

ESLint 工具使用
定制 ESLint 校驗規則
ESLint 對 TypeScript 的支持
ESLint 結合自動化工具或者 Webpack
基于 ESLint 的衍生工具
Stylelint 工具的使用

ESLint

最為主流的 JavaScript Lint 工具監測 JS 代碼質量
ESLint 很容易統一開發者的編碼風格
ESLint 可以幫助開發者提升編碼能力

安裝

npm i eslint -D

快速上手

初始化 eslint 配置

eslint --init

使用 eslint，支持通配符

eslint *.js

自動格式化代碼風格

eslint *.js --fix

ESLint 配置

parserOptions

ESLint 允許你指定你想要支持的 JavaScript 語言選項。默認情況下，ESLint 支持 ECMAScript 5 語法。你可以覆蓋該設置，以啟用對 ECMAScript 其它版本和 JSX 的支持。

parser

ESLint 默認使用 Espree 作為其解析器，你可以在配置文件中指定一個不同的解析器，只要該解析器符合下列要求：

它必須是一個 Node 模塊，可以從它出現的配置文件中加載。通常，這意味著應該使用 npm 單獨安裝解析器包。
它必須符合 parser interface。

processor

插件可以提供處理器。處理器可以從另一種文件中提取 JavaScript 代碼，然后讓 ESLint 檢測 JavaScript 代碼。或者處理器可以在預處理中轉換 JavaScript 代碼。

若要在配置文件中指定處理器，請使用 processor 鍵，并使用由插件名和處理器名組成的串接字符串加上斜杠。

env

一個環境定義了一組預定義的全局變量。

globals

當訪問當前源文件內未定義的變量時，no-undef 規則將發出警告。如果你想在一個源文件里使用全局變量，推薦你在 ESLint 中定義這些全局變量，這樣 ESLint 就不會發出警告了。你可以使用注釋或在配置文件中定義全局變量。

plugins

ESLint 支持使用第三方插件。在使用插件之前，你必須使用 npm 安裝它。

rules

ESLint 附帶有大量的規則。你可以使用注釋或配置文件修改你項目中要使用的規則。

為了在文件注釋里配置規則，使用以下格式的注釋：

/* eslint eqeqeq: "off", curly: "error" */

在這個例子里，eqeqeq 規則被關閉，curly 規則被打開，定義為錯誤級別。你也可以使用對應的數字定義規則嚴重程度：

/* eslint eqeqeq: 0, curly: 2 */

這個例子和上個例子是一樣的，只不過它是用的數字而不是字符串。eqeqeq 規則是關閉的，curly 規則被設置為錯誤級別。

如果一個規則有額外的選項，你可以使用數組字面量指定它們，比如：

/* eslint quotes: ["error", "double"], curly: 2 */

這條注釋為規則 quotes 指定了 “double”選項。數組的第一項總是規則的嚴重程度（數字或字符串）。

settings

ESLint 支持在配置文件添加共享設置。你可以添加 settings 對象到配置文件，它將提供給每一個將被執行的規則。如果你想添加的自定義規則而且使它們可以訪問到相同的信息，這將會很有用，并且很容易配置。

extends

一個配置文件可以被基礎配置中的已啟用的規則繼承。

ESLint 與 Gulp 結合

安裝

npm i eslint gulp-eslint -D

用法

const script = () => {
  return (
    src(config.build.paths.scripts, {
      base: config.build.src,
      cwd: config.build.src,
    })
      // eslint校驗
      .pipe(plugins.eslint())
      .pipe(plugins.eslint.format())
      .pipe(plugins.eslint.failAfterError())
      .pipe(plugins.babel({ presets: [require('@babel/preset-env')] }))
      // .pipe(plugins.uglify())
      // .pipe(plugins.rename({extname: '.min.js'}))
      .pipe(dest(config.build.temp))
  );
};

ESLint 結合 Webpack

安裝

npm i eslint eslint-loader -D

用法

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/main.js',
  },
  output: {
    path: path.join(__dirname, '../dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: { loader: 'eslint-loader' },
        enforce: 'pre',
      },
    ],
  },
};

react 項目使用

除了上述配置外，還需配置.eslintrc.js

安裝

npm i eslint-plugin-react -D

配置一

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: ['standard', ''],
  parserOptions: {
    ecmaVersion: 11,
  },
  rules: {
    'react/jsx-uses-react': 2,
    'react/jsx-uses-vars': 2,
  },
};

配置二

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: ['standard', 'plugin:react/recommended'],
  parserOptions: {
    ecmaVersion: 11,
  },
  rules: {},
};

ESLint 檢查 TypeScript

在初始化 eslint 的時候選擇 TypeScript

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: ['standard'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 11,
  },
  rules: {},
  plugins: ['@typescript-eslint'],
};

Stylelint

了解最新的 CSS 語法
從 HTML，markdown 和 CSS-in-JS 對象和模板文字中提取嵌入式樣式
解析類似于 CSS 的語法，例如 SCSS，Sass，Less 和 SugarSS
擁有 170 多個內置規則，可捕獲錯誤，應用限制并強制執行樣式規則
支持插件，因此您可以創建自己的規則或使用社區編寫的插件
自動修復大多數樣式違規
支持可擴展或創建的可共享配置

安裝

npm i stylelint stylelint-config-standard -D

校驗 css

創建stylelint.config.js

module.exports = {
  extends: 'stylelint-config-standard',
};

運行

npx stylelint "**/*.css"

校驗 scss

安裝

npm i stylelint-config-sass-guidelines -D

stylelint.config.js

module.exports = {
  extends: 'stylelint-config-sass-guidelines',
};

Webpack 上使用

安裝

npm i stylelint  stylelint-webpack-plugin -D

webpack.config.js

const StylelintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  // ...
  plugins: [new StylelintPlugin()],
  // ...
};

gulp 上使用

安裝

npm i stylelint gulp-stylelint -D

gulpfile.js

const gulp = require('gulp');

gulp.task('lint-css', function lintCssTask() {
  const gulpStylelint = require('gulp-stylelint');

  return gulp.src('src/**/*.css').pipe(
    gulpStylelint({
      reporters: [{ formatter: 'string', console: true }],
    }),
  );
});

Prettier

代碼格式化，有了 Prettier 之后，它能去掉原始的代碼風格，確保團隊的代碼使用統一相同的格式，用官網的原話是"Building and enforcing a style guide"。它能支持很多格式:

JavaScript
JSX
Angular
Vue
Flow
TypeScript
CSS, Less, and SCSS
HTML
JSON
GraphQL
Markdown, 包括 GFM 和 MDX
YAML

安裝

npm i prettier -D

Option

.prettierrc.js

module.exports = {
  singleQuote: true,
  trailingComma: 'all',
};

運行

npx prettier --write .

Git Hooks

案例

使用 git 鉤子，在 commit 前校驗代碼，并格式化代碼

安裝

husky

husky 是一個 Git Hook 工具
lint-staged

lint-staged 是一個在 git 暫存文件上（也就是被 git add 的文件）運行已配置的 eslint（或其他）任務。lint-staged 將所有暫存文件的列表傳遞給任務。

npm i husky lint-staged -D

配置

husky

package.json

{
  "name": "wuner-notes",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint **/*.js",
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  }
}

lint-stated and husky