哈喽，大家好，我是 SuperYing。今天我们来聊聊 [那些应该知道的前端规范工具]。
看完本文可以收获：
1.熟悉前端工程常用配置工具：eslint、prettier、husky、commitlint、editorconfig
2.了解以上规范性工具基础配置方法
3.了解以上规范性工具互相搭配使用
4.愿学习知识的心情愉快...哈哈哈...
格式化工具
为什么需要格式化工具
一句话，为了保证代码质量，风格统一。
通常情况下，一个项目需要多个伙伴协作完成，而每个人都有自己的编码风格，没有格式化工具的限制，就可能造成”百家争鸣“的局面。
eslint
eslint 能做什么
eslint 可以对我们的代码进行分析，找出不符合指定规则的错误代码，以确保代码质量。
安装依赖
控制台执行以下命令：
npm i eslint -D
初始化
控制台执行以下命令：
npx eslint --init
执行后，会提示安装缺少的 eslint 相关依赖：
Need to install the following packages:
eslint
Ok to proceed? (y) y
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
@eslint/create-config
Ok to proceed? (y) y
输入 y 继续安装即可。 必要依赖安装完成后，会确认一系列问题。需要根据自己的使用场景，选择合适的选项：
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · prompt
✔ What format do you want your config file to be in? · JavaScript
✔ What style of indentation do you use? · 4
✔ What quotes do you use for strings? · single
✔ What line endings do you use? · windows
✔ Do you require semicolons? · No / Yes
这一套操作下来，eslint 初始化操作就完成了，会根据上面的选项结果生成对应的配置，可能为一个独立的 .eslintrc.* 文件，或者在 package.json 文件里的 eslintConfig 字段，由上面的 What format do you want your config file to be in 决定。
忽略文件
在项目根目录下创建一个 .eslintignore 文件，在文件内维护不需要格式化的文件或目录，即可跳过检查。
// .eslintignore 文件
node_modules/
使用
eslint 规则配置完成后，即可在控制台执行以下命令来使用 eslint 来检查并修复代码了：
npx eslint . --ext .js,.ts,.jsx,tsx,vue src/ --fix
以上命令的意思检查并修复 src 目录下的 js、ts、jsx、tsx、vue 文件。
或者在 package.json 中添加一条 script 命令，控制台执行以下命令：
npm set-script lint:fix "eslint . --ext .js,.ts,.jsx,tsx,vue src/ --fix"
执行成功后，会自动在 package.json 的 script 配置下新增一条命令(直接在 package.json 中手动新增也是可以的)：
"scripts": {
"lint:fix": "eslint . --ext .js,.ts,.jsx,tsx,vue src/ --fix",
},
以后再想执行 eslit 时，只需要在控制台执行以下命令即可：
npm run lint:fix
prettier
prettier 能做什么
prettier 是一个”有态度“的代码格式化工具，专注于代码样式规范，可在文件保存时对代码按照规则进行格式化处理。
安装依赖
控制台执行以下命令：
npm i prettier -D
配置
可以在以下位置维护 prettier 配置：
- package.json 文件中的 prettier 字段。
- 使用 JSON 或 YAML 编写的
.prettierrc文件。 .prettierrc.json,.prettierrc.yml,.prettierrc.yaml或.prettierrc.json5文件。.prettierrc.js,.prettierrc.cjs,prettier.config.js或prettier.config.cjs文件，文件内需要使用 module.exports 导出一个对象。.prettierrc.toml文件。
比较常用的是在根目录下创建 json 和 js 格式配置文件。
示例配置：
// .prettierrc.json 文件
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
// prettier.config.js or .prettierrc.js
module.exports = {
trailingComma: "es5",
tabWidth: 4,
semi: false,
singleQuote: true,
};
这一套操作下来，prettier 基础配置就算完成了，可根据项目规范要求，着手配置自定义规则了。
忽略文件
在项目根目录下创建一个 .prettierignore 文件，在文件内维护不需要格式化的文件或目录，即可跳过检查。
// .prettierignore 文件
node_modules/
使用
prettier 规则配置完成后，即可在控制台执行以下命令来使用 prettier 来格式化代码了：
npx prettier --write --ignore-unknown
或者在 package.json 中添加一条 script 命令，控制台执行以下命令：
npm set-script prettier "prettier --write --ignore-unknown"
执行成功后，会自动在 package.json 的 script 配置下新增一条命令(直接在 package.json 中手动新增也是可以的)：
"scripts": {
"prettier": "prettier --write --ignore-unknown"
},
以后再想执行 prettier 格式化代码时，只需要在控制台执行以下命令即可：
npm run prettier
eslint 结合 prettier
通过以上两步的配置，我们可以分别使用 eslint 和 prettier 对代码的语法或样式进行检验和格式化。但是在实际项目中，我们很少会分别使用两种工具做各自的处理，更何况，eslint 和 prettier 的配置规则可能存在冲突的情况。这时候，如何将 eslint 和 prettier 结合使用显得尤为重要。
prettier 官方提供了插件 eslint-config-prettier，该插件的主要是禁用掉一些和 prettier 冲突的 eslint 规则。
介绍两种eslint-config-prettier 的使用方法：
- 复杂配置
- 安装依赖
npm install --save-dev eslint-config-prettier- 在
eslint的配置文件.eslintrc.*中添加以下配置：
{ "extends": ["prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } } - 简单配置
- 额外安装插件
eslint-plugin-prettier
npm install --save-dev eslint-plugin-prettier eslint-config-prettier- 在
eslint的配置文件.eslintrc.*中添加以下配置：
{ "extends": ["plugin:prettier/recommended"] }plugin:prettier/recommended添加到 extends 最后即可。
到这，就将eslint和prettier的规则结合起来了。后续eslint专注语法检查，prettier负责代码格式规范，相互配合，更好的实现代码规范化处理。 - 额外安装插件
提交校验工具
husky
husky 主要是用来规范 GIT 相关操作，如规范提交信息，提交前检查代码等操作，支持所有的 git 钩子。
下面我们就操练起来：
依赖安装
控制台执行以下命令：
npm install husky --save-dev
启用 husky
控制台执行以下命令：
npx husky install
配置 npm prepare 钩子
在项目依赖 install 后启用 git 钩子，保证协同开发的小伙伴都能启用 husky 功能。
控制台执行以下命令：
npm set-script prepare "husky install"
创建 hook
此处以 pre-commit 钩子为例，实际项目中会在提交 git 前校验代码格式，不符合 eslint 和 prettier 的规范代码不允许提交。若要实现该功能，需要结合 lint-staged（对暂存的 git 文件进行校验）。
控制台执行以下命令：
// 安装 lint-staged
npm install --save-dev lint-staged
// 创建 husky 钩子
npx husky add .husky/pre-commit "npx lint-staged"
执行完以上命令，会在项目根目录下的 .husky 目录生成一个 pre-commit 文件，内容为：
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
在 package.json 中配置 lint-staged：
{
"lint-staged": {
"*.{js,jsx,vue,ts,tsx}": [
"npm run lint:fix"
]
}
}
到这，每次执行 git commit 命令时，都会先执行 npm run lint:fix 命令，若存在不符合规范的代码，则会终止提交。
commitlint
commitlint 主要用于规范 GIT 提交信息。
安装依赖
控制台执行以下命令：
npm install --save-dev @commitlint/{cli,config-conventional}
echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > .commitlintrc.js
以上命令默认使用 @commitlint/config-conventional 的规范，并在根目录下创建配置文件 .commitlintrc.js（配置文件也可以是 commitlint.config.js, .commitlintrc.js, .commitlintrc, .commitlintrc.json, .commitlintrc.yml 或者 package.json 中的 commitlint 配置项）。
添加钩子（假设以完成以上 husky 部分的配置）
控制台执行以下命令：
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
以上命令会新增一个 husky commit-msg 钩子，用于校验提交信息。
到这，commitlint 算是配置完成了，可以在提交信息中输入 test 测试一下。会发现提示提交失败，且 git 日志中报一下信息：
npm notice
⧗ input: test
✖ subject may not be empty [subject-empty]
✖ type may not be empty [type-empty]
✖ found 2 problems, 0 warnings
提交信息调整为：chore: 集成 commitlint，即可正常提交。
IDE 配置规范工具
editorconfig
editorconfig 用于帮助使用不同编译器开发相同项目的开发人员保持一致的编码风格。
与上面的规范工具项目，editorconfig 的配置显得尤为简单，只需要在根目录下创建一个配置文件（.editorconfig）即可。
这里贴一下常用配置：
# 最顶层的 editorconfig 文件
root = true
[*]
# 默认 utf-8 编码
charset = utf-8
# Unix 风格的换行符，以换行符结束
end_of_line = lf
# 缩进
indent_size = 2
好啦，以上就是 【那些应该知道的前端规范工具】的全部内容了，文字较多可能略显枯燥，很荣幸小伙伴能够阅读到这里。欢迎大佬们讨论、指正，共同进步才是硬道理。
