前端编码规范工具小结

Lint

单词意思：软麻布；线头；棉绒。

lint工具是用来检查前端源代码以发现程序错误、漏洞、样式错误以及可疑的构造。Lint工具可以帮助开发者在代码运行之前就发现潜在的问题，从而提高代码质量和可维护性。

常见的前端lint工具有ESLint （针对JavaScript）、Stylelint （针对CSS）

• ESLint可以检查的内容示例：

  1. 未使用的变量或函数。
  2. 未定义的变量或函数。
  3. 不恰当的比较：比如要使用===比较而不能是==
  4. 不可达的代码。

• Stylelint可以检查的内容示例：

  1. 无效的十六进制颜色
  2. 未使用的或重复的选择器
  3. 缺少的分号
  4. 不必要的单位

项目中可以把lint工具安装到dev环境：

pnpm install eslint -D
pnpm install stylelint -D

• ESLint的配置文件可以有多种格式，包括：.eslintrc.js 、.eslintrc.json 、.eslintrc.yml 或package.json文件中的eslintConfig字段。
• Stylelint的配置文件类似，是以.stylelintrc开头。

umi max 项目中，已提供了关于这两个lint的配置，项目里的配置文件只需要继承过来就可以。（使用umi官方脚手架创建的项目已经有这两个配置文件）

// .eslintrc.js
module.exports = {
  extends: require.resolve('@umijs/max/eslint'),
};

// .stylelintrc.js
module.exports = {
  extends: require.resolve('@umijs/max/stylelint'),
};

Prettier

prettier是一个代码格式化工具，它可以自动格式化前端代码以确保一致的代码风格。相对lint来说，它更关注的时代码的外观，而不是代码的质量或正确性。例如，它可以确保：

• 代码缩进的一致性
• 代码行的长度
• 单引号和双引号的使用
• 对象和数组的括号间距
• 以及更多…….

所以它和Lint工具是互补的，许多项目中，这两个工具都是被同时使用的。

prettier的配置文件，以.prettierrc开头。umi max脚手架创建的项目已经配置好了。

lint-staged与husky

lint-staged也是lint工具，他是用来帮助开发者用在package.json里配置的方式执行lint命令的。他的特点是只检查被修改的文件，而不是整个代码库，这可以大大提高linting的速度。他自己本身不提供lint功能，而是调用eslint或stylelint命令。可在package.json文件中可做如下配置：

{
  "lint-staged": {
    "*.js": ["eslint --fix"],
    "*.css": ["stylelint --fix"]
  }
}

相当于是对eslint合stylelint作一个封装，同时也可以执行prettier命令。

也可以使用配置文件来进行配置，配置文件以.lintstagedrc开头。umi max已提供配置：

{
  "*.{md,json}": ["prettier --cache --write"],
  "*.{js,jsx}": ["max lint --fix --eslint-only", "prettier --cache --write"],
  "*.{css,less}": [
    "max lint --fix --stylelint-only",
    "prettier --cache --write"
  ],
  "*.ts?(x)": [
    "max lint --fix --eslint-only",
    "prettier --cache --parser=typescript --write"
  ]
}

执行命令就可以lint：

npx lint-staged

注意，它只会对git暂存区里的文件进行操作，也就是说可能要先执行git add . ，才能正常lint和prettier。

一般lint-staged都与husky结合一起使用。

如果只使用 lint-staged 而不使用 husky，你需要手动运行 lint-staged 来检查代码。这可能会导致忘记运行 lint-staged，从而提交了不符合代码质量标准的代码。通过使用 husky，你可以确保 lint-staged 总是在每次提交代码之前自动运行，从而确保所有提交的代码都符合你的代码质量标准。

husky 是一个可以创建和管理 Git hook的工具。Git hook是在特定的 Git 操作（如提交或推送）之前或之后运行的脚本。通过使用 husky，我们可以配置一个 pre-commit 钩子，在每次提交代码之前运行 lint-staged。

使用husky需要在配置好后执行 husky install 命令，可以配置在package.json中：

"script":{
	// 因为git仓库在父目录，需要先路径跳转。
	//（前后端项目一个仓库，前端放在其中一个文件夹）
	"prepare": "cd .. && husky install frontend-pc/.husky"
}

.husky文件夹中 pre-commit脚本内容：

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

cd frontend-pc # 因为git仓库在父目录
npx lint-staged

install之后，每次commit代码时，就会进行lint-staged操作。