带你了解规范化-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 作为其解析器，你可以在配置文件中指定一个不同的解析器，只要该解析器符合下列要求：

1. 它必须是一个 Node 模块，可以从它出现的配置文件中加载。通常，这意味着应该使用 npm 单独安装解析器包。
2. 它必须符合 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

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 ."]
  }
}