前端工程lint浅析前端工程lint浅析，讲解前端lint工具commitlint、husky、lint-staged、

要讲的工具：

工具	版本号
commitlint	v17
husky	v8
lint-staged	v13
eslint	v8
prettier	v2

Commitlint

commitlint是用于规范提交信息的工具。

Commitlint官方文档

值得一说，commitlint通常是配合husky一起使用的，具体方法在文档中有 LocalSetup篇

.husky中commit-msg文件如下

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit ${1}

配置文件名为commitlint.config.js，配置规则

Husky

husky 是 githook 工具，githook指的是在git操作中可以预先设置并在几个特定状态下触发的程序。有多少个特定状态？具体看git相关文档。husky支持所有githook。

Husky官方文档

值得一说，1、这里所用到githook有两个，pre-commit 和 commit-msg，代码检查与格式化放在pre-commit，而commitlint 则放在commit-msg。

2、husky 需要执行 husky install 命令，才能使用。这就是为什么一定要有一条prepare script在package.json

{ 
    "scripts": { 
        "prepare": "husky install" 
    } 
}

Lint-staged

想在代码提交之前格式化，如果只是简单的将格式化命令写在husky githook上是不行的（结果是提交的代码没有格式化，本地的代码被格式化了却没有提交），这是因为提交之前代码都被git暂存起来了。而lint-staged就是能对暂存的git文件运行linters的工具。

安装：

npm install --save-dev lint-staged # requires further setup

安装之后，生成husky pre-commit钩子，并放入npx lint-staged命令

npx husky add .husky/pre-commit "npx lint-staged"

.husky中pre-commit文件如下

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

lint-staged 的配置可以写在package.json中。

{
  "lint-staged": {
    "*": "your-cmd"
  }
}

Eslint

Eslint是对js、ts进行代码质量检测、发现问题的工具。Eslint也能进行代码格式化，不过建议将格式化的任务交给prettier。

Eslint官网

首先，运行命令

npm init @eslint/config #帮助你构建eslint配置，并安装依赖，推荐配置文件为js文件形式

举例：下面是我为React + TypeScript 工程添加的eslint配置。

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended', // react hook eslint规则
    'prettier', // 这里prettier写在最后，关闭与prettier产生冲突的规则
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'react/jsx-uses-react': 'off', // 无需在jsx文件中引入 import React from ‘react’
    'react/react-in-jsx-scope': 'off', // 同上
    '@typescript-eslint/no-var-requires': 'off', // 允许使用require语句
  },
  settings: {
    react: {
      version: 'detect', // react版本自行获取
    },
  },
};

最后，要把npx eslint 命令放进lint-staged配置中，达到代码提交前检查的作用。

// lint-staged.config.js
module.exports = {
  'src/**/*.{js,jsx,tsx,ts}': ['eslint'],
};

值得一说，建议在编辑器中开启eslint检测，如在vscode中添加eslint插件。安装就行无需其他操作

Prettier

Prettier 是代码格式工具、可以用于管控js、ts等代码风格。

Prettier官网 Prettier 应与编辑器配合使用。

在vscode中安装prettier插件，将vscode中js、ts、jsx、tsx等文件的格式化工具默认为Prettier
在vscode中开启FormatOnSave，保存时进行格式化。（推荐）

注意，不要为vscode中的prettier插件手动添加规则，该插件会自动从当前工程文件目录中获取配置文件。

Prettier配置文件规则， prettier配置举例：

// prettier.config.js
module.exports = {
  // 最大长度80个字符
  printWidth: 80,
  // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
  singleQuote: true,
  // 行末分号, 默认true
  semi: true,
  // JSX双引号
  jsxSingleQuote: false,
  // 尽可能使用尾随逗号（包括函数参数）,默认none,可选 none|es5|all
  // es5 包括es5中的数组、对象
  // all 包括函数对象等所有可选
  trailingComma: "all",
  // 在对象括号之间的空格。 默认true
  bracketSpacing: true,
  // 箭头函数参数括号 默认avoid 可选 avoid| always
  // avoid 能省略括号的时候就省略 例如x => x
  // always 总是有括号
  arrowParens: "avoid",
  // 在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。
  insertPragma: false,
  // 行尾换行格式
  endOfLine: "auto",
  // html空格敏感度
  htmlWhitespaceSensitivity: "ignore",
  // tab缩进大小,默认为2
  tabWidth: 2,
  // 使用tab缩进还是空格，默认false
  // useTabs: true,
  // vue缩进脚本和样式
  vueIndentScriptAndStyle: false,
  // > 标签放在最后一行的末尾，而不是单独放在下一行 默认false
  jsxBracketSameLine: false,
};

最后，将npx prettier命令写进 lint-staged配置中

// lint-staged.config.js
module.exports = {
  'src/**/*.{js,jsx,tsx,ts}': ['prettier --write --ignore-unknown', 'eslint'],
};