Study Notes

本博主會(huì)持續(xù)更新各種前端的技術(shù)，如果各位道友喜歡酸些，可以關(guān)注宰译、收藏、點(diǎn)贊下本博主的文章魄懂。

規(guī)范化標(biāo)準(zhǔn)

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

為什么要有規(guī)范化標(biāo)準(zhǔn)

• 軟件開(kāi)發(fā)需要多人協(xié)同
• 不同開(kāi)發(fā)者具有不同的編碼習(xí)慣和喜好
• 不同的喜好增加項(xiàng)目維護(hù)成本
• 每個(gè)項(xiàng)目或者團(tuán)隊(duì)需要明確統(tǒng)一的標(biāo)準(zhǔn)

哪里需要規(guī)范化標(biāo)準(zhǔn)

• 代碼沿侈、文檔、甚至是提交日志
• 開(kāi)發(fā)過(guò)程中人為編寫(xiě)的成果物
• 代碼標(biāo)準(zhǔn)化規(guī)范最為重要

常見(jiàn)的規(guī)范化實(shí)現(xiàn)方式

• ESLint 工具使用
• 定制 ESLint 校驗(yàn)規(guī)則
• ESLint 對(duì) TypeScript 的支持
• ESLint 結(jié)合自動(dòng)化工具或者 Webpack
• 基于 ESLint 的衍生工具
• Stylelint 工具的使用

ESLint

• 最為主流的 JavaScript Lint 工具 監(jiān)測(cè) JS 代碼質(zhì)量
• ESLint 很容易統(tǒng)一開(kāi)發(fā)者的編碼風(fēng)格
• ESLint 可以幫助開(kāi)發(fā)者提升編碼能力

安裝

npm i eslint -D

快速上手

初始化 eslint 配置

eslint --init

使用 eslint市栗，支持通配符

eslint *.js

自動(dòng)格式化代碼風(fēng)格

eslint *.js --fix

ESLint 配置

parserOptions

ESLint 允許你指定你想要支持的 JavaScript 語(yǔ)言選項(xiàng)缀拭。默認(rèn)情況下，ESLint 支持 ECMAScript 5 語(yǔ)法填帽。你可以覆蓋該設(shè)置蛛淋，以啟用對(duì) ECMAScript 其它版本和 JSX 的支持。

parser

ESLint 默認(rèn)使用 Espree 作為其解析器篡腌，你可以在配置文件中指定一個(gè)不同的解析器褐荷，只要該解析器符合下列要求：

1. 它必須是一個(gè) Node 模塊，可以從它出現(xiàn)的配置文件中加載嘹悼。通常叛甫，這意味著應(yīng)該使用 npm 單獨(dú)安裝解析器包。
2. 它必須符合 parser interface杨伙。

processor

插件可以提供處理器其监。處理器可以從另一種文件中提取 JavaScript 代碼，然后讓 ESLint 檢測(cè) JavaScript 代碼限匣《犊啵或者處理器可以在預(yù)處理中轉(zhuǎn)換 JavaScript 代碼。

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

env

一個(gè)環(huán)境定義了一組預(yù)定義的全局變量峦筒。

globals

當(dāng)訪問(wèn)當(dāng)前源文件內(nèi)未定義的變量時(shí)辩涝，no-undef 規(guī)則將發(fā)出警告。如果你想在一個(gè)源文件里使用全局變量勘天，推薦你在 ESLint 中定義這些全局變量怔揩，這樣 ESLint 就不會(huì)發(fā)出警告了捉邢。你可以使用注釋或在配置文件中定義全局變量。

plugins

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

rules

ESLint 附帶有大量的規(guī)則晕拆。你可以使用注釋或配置文件修改你項(xiàng)目中要使用的規(guī)則藐翎。

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

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

在這個(gè)例子里实幕，eqeqeq 規(guī)則被關(guān)閉吝镣，curly 規(guī)則被打開(kāi)，定義為錯(cuò)誤級(jí)別昆庇。你也可以使用對(duì)應(yīng)的數(shù)字定義規(guī)則嚴(yán)重程度：

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

這個(gè)例子和上個(gè)例子是一樣的末贾，只不過(guò)它是用的數(shù)字而不是字符串。eqeqeq 規(guī)則是關(guān)閉的整吆，curly 規(guī)則被設(shè)置為錯(cuò)誤級(jí)別拱撵。

如果一個(gè)規(guī)則有額外的選項(xiàng)，你可以使用數(shù)組字面量指定它們表蝙，比如：

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

這條注釋為規(guī)則 quotes 指定了 “double”選項(xiàng)拴测。數(shù)組的第一項(xiàng)總是規(guī)則的嚴(yán)重程度（數(shù)字或字符串）。

settings

ESLint 支持在配置文件添加共享設(shè)置府蛇。你可以添加 settings 對(duì)象到配置文件集索，它將提供給每一個(gè)將被執(zhí)行的規(guī)則。如果你想添加的自定義規(guī)則而且使它們可以訪問(wèn)到相同的信息汇跨，這將會(huì)很有用务荆，并且很容易配置。

extends

一個(gè)配置文件可以被基礎(chǔ)配置中的已啟用的規(guī)則繼承扰法。

ESLint 與 Gulp 結(jié)合

安裝

npm i eslint gulp-eslint -D

用法

const script = () => {
  return (
    src(config.build.paths.scripts, {
      base: config.build.src,
      cwd: config.build.src,
    })
      // eslint校驗(yàn)
      .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 結(jié)合 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 項(xiàng)目使用

除了上述配置外蛹含，還需配置.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 的時(shí)候選擇 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 語(yǔ)法
• 從 HTML毅厚，markdown 和 CSS-in-JS 對(duì)象和模板文字中提取嵌入式樣式
• 解析類似于 CSS 的語(yǔ)法塞颁，例如 SCSS，Sass吸耿，Less 和 SugarSS
• 擁有 170 多個(gè)內(nèi)置規(guī)則祠锣，可捕獲錯(cuò)誤，應(yīng)用限制并強(qiáng)制執(zhí)行樣式規(guī)則
• 支持插件咽安，因此您可以創(chuàng)建自己的規(guī)則或使用社區(qū)編寫(xiě)的插件
• 自動(dòng)修復(fù)大多數(shù)樣式違規(guī)
• 支持可擴(kuò)展或創(chuàng)建的可共享配置

安裝

npm i stylelint stylelint-config-standard -D

校驗(yàn) css

創(chuàng)建stylelint.config.js

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

運(yùn)行

npx stylelint "**/*.css"

校驗(yàn) 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 之后，它能去掉原始的代碼風(fēng)格妆棒，確保團(tuán)隊(duì)的代碼使用統(tǒng)一相同的格式澡腾，用官網(wǎng)的原話是"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',
};

運(yùn)行

npx prettier --write .

Git Hooks

案例

使用 git 鉤子，在 commit 前校驗(yàn)代碼动分，并格式化代碼

安裝

• husky

  husky 是一個(gè) Git Hook 工具

• lint-staged

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

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

package.json

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