前端Lint工具链随笔前端的自动化代码规范工具 JavaScript/TypeScript 规范。主流的 Lint 工具

前端的自动化代码规范工具

JavaScript/TypeScript 规范。主流的 Lint 工具包括 Eslint、Prettier；
样式开发规范。主流的 Lint 工具包括Stylelint、Prettier；
Git 提交规范。主流的 Lint 工具包括Commitlint。

ESLint

关于ESLint相关配置和解读，解读.eslintrc.js文件。

虽然 ESLint 本身具备自动格式化代码的功能(eslint --fix)，但术业有专攻，ESLint 的主要优势在于代码的风格检查并给出提示，而在代码格式化这一块 Prettier 做的更加专业，因此我们经常将 ESLint 结合 Prettier 一起使用。

Prettier

先安装prettier,通过在项目根目录新建.prettierrc.js文件并在该文件内配置相关校验规则。

// .prettierrc.js
module.exports = {
  printWidth: 80, //一行的字符数，如果超过会进行换行，默认为80
  tabWidth: 2, // 一个 tab 代表几个空格数，默认为 2 个
  useTabs: false, //是否使用 tab 进行缩进，默认为false，表示用空格进行缩减
  singleQuote: true, // 字符串是否使用单引号，默认为 false，使用双引号
  semi: true, // 行尾是否使用分号，默认为true
  trailingComma: "none", // 是否使用尾逗号
  bracketSpacing: true // 对象大括号直接是否有空格，默认为 true，效果：{ a: 1 }
};

再安装eslint-config-prettier eslint-plugin-prettier来将Prettier集成到现有的ESLint工具中。

其中eslint-config-prettier用来覆盖 ESLint 本身的规则配置，
而eslint-plugin-prettier则是用于让 Prettier 来接管eslint --fix即修复代码的能力。

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    // 1. 接入 prettier 的规则
    "prettier",
    "plugin:prettier/recommended"
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: "latest",
    sourceType: "module"
  },
  // 2. 加入 prettier 的 eslint 插件
  plugins: ["react", "@typescript-eslint", "prettier"],
  rules: {
    // 3. 注意要加上这一句，开启 prettier 自动修复的功能
    "prettier/prettier": "error",
    quotes: ["error", "single"],
    semi: ["error", "always"],
    "react/react-in-jsx-scope": "off"
  }
};

将这两个插件配置到.eslintrc.js后，再在package.json里面配置脚本：

// package.json
"lint:script": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./",

这样就完成了 ESLint 的规则检查以及 Prettier 的自动修复。

通过配置Vite 插件vite-plugin-eslint，可以在开发阶段进行 ESLint 扫描，以命令行的方式展示出代码中的规范问题，并能够直接定位到原文件。

Stylelint

Stylelint 主要专注于样式代码的规范检查，内置了 170 多个 CSS 书写规则，支持 CSS 预处理器(如 Sass、Less)，提供插件化机制以供开发者扩展规则，已经被 Google、Github 等大型团队投入使用。与 ESLint 类似，在规范检查方面，Stylelint 已经做的足够专业，而在代码格式化方面，我们仍然需要结合 Prettier 一起来使用。

CommitLint

ESLint、Prettier和Stylelint的 VSCode 插件或者 Vite 插件，在开发阶段提前规避掉代码格式的问题，但实际上这也只是将问题提前暴露，并不能保证规范问题能完全被解决，还是可能导致线上的代码出现不符合规范的情况。

我们可以在代码提交的时候进行卡点检查，也就是拦截 git commit 命令，进行代码格式检查，只有确保通过格式检查才允许正常提交代码。社区中已经有了对应的工具——Husky来完成这件事情。