带你了解规范化-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 ."]
  }
}

你可能感兴趣的:(带你了解规范化-eslint、stylelint、prettier、git hooks)