前端代码规范
一、eslint
简介
管代码质量。
可以保证项目的质量。
安装
yarn add eslint@8.31.0 -D
npx eslint --init // 根据自己的项目进行选择配置，举例如下
使用
npx eslint a.js b.js // 校验文件
npx eslint src // 校验目录
npx eslint --ext .ts,.tsx,.js src // 使用ext来校验对应的文件
npx eslint --fix a.js // 使用fix来修复文件
npx eslint --fix --ext a.js // 使用修复并校验文件
在项目的根目录下可以创建.eslintignore,来过滤不想校验的文件/文件目录
src/util
默认走 eslint的官方规则
与vsc结合
打开vsc的扩展面板，搜索ESlint并安装。
这个插件的功能是开发者在编辑代码的时候，如果不符合ESlint的配置，则会进行提示。
二、Prettier
简介
干的事就是只管代码格式化，不管代码质量。
可以保证项目的代码风格。
安装
yarn add --dev --exact prettier@2.8.2
echo {}> .prettierrc.json
使用
yarn prettier --write .
在项目的根目录下可以创建.prettierignore,来过滤不想格式化的文件/文件目录
src/util
与eslint结合
eslint自身也有代码格式化的功能，为了避免与prettier代码格式冲突，需要使用到两个插件
eslint-plugin-prettier 作用：当你的代码风格与prettier不一致的时候，让eslint代替prettier进行报错，因为prettier本身没有报错的功能。
eslint-config-prettier 作用：prettier的代码风格替代eslint的代码风格
# 安装
yarn add eslint-plugin-prettier@4.2.1
yarn add eslint-config-prettier@8.6.0
# 配置eslint-plugin-prettier 打开.eslintrc.js
{
extends:[
...
"prettier",
...
],
plugins: [
"prettier"
],
rules: {
...
"prettier/prettier": "error"
...
},
}
# 配置eslint-config-prettier 打开.eslintrc.js
{
extends:[
...
"prettier",
...
],
}
三、Stylelint
简介
Stylelint 是一个强大、先进的 CSS 代码检查器（linter），可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。
四、husky
简介
可以监听git的hooks,比如监听
git add .
git commit -m ""
git pull
等所有的git命令。 经常要来当执行git commit -m的时候进行拦截，执行package.json里面对应的scripts，如果检验不通过则不执行commit操作。
安装
npx husky-init && npm install # npm版本安装
npx husky-init && yarn # Yarn 1 版本安装
yarn dlx husky-init --yarn2 && yarn # Yarn 2+ 版本安装
pnpm dlx husky-init && pnpm install # pnpm 版本安装
使用
安装完成之后，在根目录里面会有.husky，在该文件夹下面有pre-commit钩子，这个钩子是用来当执行commit操作之前执行对应的脚本。
# .husky/pre-commit
npm run codeFormat
# package.json
{
...
"scripts": {
...
"eslint": "eslint --fix --ext .js,.vue,.ts,.tsx,.js src",
"prettier": "prettier --write .",
"codeFormat": "npm run prettier && npm run eslint",
...
},
...
}
与lint-staged结合，操作git缓存区代码
使用lint-staged这个插件，原因是每次commit时都会全量检查或者修复所有的代码，这不仅仅耗时，并且假如哪些并非我们修改的代码有格式问题，我们也不得不修正后同时提交，尽管它们和我们本次迭代没有任何关系。故此可以使用lint-staged来对那些存储在缓存区(橘色)文件进行单独的文件操作。
# 安装
yarn add lint-staged@13.1.0
# package.json配置
{
...
"scripts":{},
"lint-staged": {
"*": [
"prettier --write", // 先用prettier修复
"eslint --fix --ext" // 再用eslint修复,换位置会不生效
]
},
...
}
# 在.husky/pre-commit中
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
规范commit提交的信息
commitlint：作用是校验提交的commit信息
@commitlint/config-conventional :作用是引用它的commit规范信息
校验规则如下：提交代码commit必须形如 git commit -m "feat: xxx"
| type | type |
|---|---|
| feat | 新增功能 |
| fix | 修复bug |
| docs | 修改文档 |
| refactor | 代码重构，未新增任何功能和修复任何bug |
| build | 改变构建流程，新增依赖库、工具等（例如webpack修改） |
| style | 仅仅修改了空格、缩进等，不改变代码逻辑 |
| perf | 改善性能和体现的修改 |
| chore | 非src和test的修改 |
| test | 测试用例的修改 |
| revert | 回滚到上一个版本 |
| ci | 自动化流程配置修改 |
# 安装，终端输入
yarn add commitlint@17.4.1 @commitlint/config-conventional@17.4.0
# 根目录创建 commitlint.config.js
module.exports = { extends: ['@commitlint/config-conventional'] }
# 添加husky的commit-msg信息，终端输入
npx husky add .husky/commit-msg 'npx commitlint --edit "$1"'
流程图
graph TD
a[开始]-->b{ }
b{ 用户操作 } --> c[ ]
c[ git add . git commit -m `msg` ] --> d[ ]
d[ husky触发git钩子 ]-.在commit信息之前针对git缓存区的git代码.-> e[ ]
e[ 执行prettier格式化代码 ]--> f{ }
f{ 执行eslint代码检查与修复 } -.不通过.-> c[ git add . git commit -m `msg` ]
f{ 执行eslint代码检查并尝试自动修复 } -.通过.-> g[ ]
g{ 执行commitlint检查'msg'信息是否规范 } -.不通过.-> c[ git add . git commit -m `msg` ]
g{ 执行commitlint检查'msg'信息是否规范 } -.通过.-> h[ git push ]
