Lint
#介绍
使用 lint 的好处
具备基本工程素养的同学都会注重编码规范,而代码风格检查(Code Linting,简称 Lint)是保障代码规范一致性的重要手段。
遵循相应的代码规范有以下好处
较少 bug 错误率
高效的开发效率
更高的可读性
项目内集成了以下几种代码校验方式
eslint 用于校验代码格式规范
commitlint 用于校验 git 提交信息规范
stylelint 用于校验 css/less 规范
prettier 代码格式化
WARNING
lint 不是必须的,但是很有必要,一个项目做大了以后或者参与人员过多后,就会出现各种风格迥异的代码,对后续的维护造成了一定的麻烦
#ESLint
ESLint 是一个代码规范和错误检查工具,有以下几个特性
所有东西都是可以插拔的。你可以调用任意的 rule api 或者 formatter api 去打包或者定义 rule or formatter。
任意的 rule 都是独立的
没有特定的 coding style,你可以自己配置
#手动校验代码
执行下面代码.能修复的会自动修复,不能修复的需要手动修改
yarn run lint:eslint
#配置项
项目的 eslint 配置位于根目录下 .eslintrc.js 内,可以根据团队自行修改代码规范
#编辑器配合
推荐使用 vscode 进行开发,vscode 自带 eslint 插件,可以自动修改一些错误。
同时项目内也自带了 vscode eslint 配置,具体在 .vscode/setting.json 文件夹内部。只要使用 vscode 开发不用任何设置即可使用
#CommitLint
在一个团队中,每个人的 git 的 commit 信息都不一样,五花八门,没有一个机制很难保证规范化,如何才能规范化呢?可能你想到的是 git 的 hook 机制,去写 shell 脚本去实现。这当然可以,其实 JavaScript 有一个很好的工具可以实现这个模板,它就是 commitlint(用于校验 git 提交信息规范)。
#配置
commit-lint 的配置位于项目根目录下 commitlint.config.js
#Git 提交规范
参考 vue 规范
feat 增加新功能
fix 修复问题/BUG
style 代码风格相关无影响运行结果的
perf 优化/性能提升
refactor 重构
revert 撤销修改
test 测试相关
docs 文档/注释
chore 依赖更新/脚手架配置修改等
workflow 工作流改进
ci 持续集成
mod 不确定分类的修改
wip 开发中
types 类型修改
#如何关闭
在 .husky/commit-msg 内注释以下代码即可
npx --no-install commitlint --edit “$1”
#示例
git commit -m ‘feat(home): add home page’
#Stylelint
stylelint 用于校验项目内部 css 的风格,加上编辑器的自动修复,可以很好的统一项目内部 css 风格
#配置
stylelint 配置位于根目录下 stylelint.config.js
#编辑器配合
如果您使用的是 vscode 编辑器的话,只需要安装下面插件,即可在保存的时候自动格式化文件内部 css 样式
插件
StyleLint
#Prettier
prettier 可以用于统一项目代码风格,统一的缩进,单双引号,尾逗号等等风格
#配置
prettier 配置文件位于项目根目录下 prettier.config.js
#编辑器配合
如果您使用的是 vscode 编辑器的话,只需要安装下面插件,即可在保存的时候自动格式化文件内部 js 格式
插件
Prettier
#Git Hook
git hook 一般结合各种 lint,在 git 提交代码的时候进行代码风格校验,如果校验没通过,则不会进行提交。需要开发者自行修改后再次进行提交
#husky
有一个问题就是校验会校验全部代码,但是我们只想校验我们自己提交的代码,这个时候就可以使用 husky。
最有效的解决方案就是将 Lint 校验放到本地,常见做法是使用 husky 或者 pre-commit 在本地提交之前先做一次 Lint 校验。
项目在 .husky 内部定义了相应的 hooks
#如何关闭
删除husky依赖即可
yarn remove huksy
#如何跳过某一个检查
加上 --no-verify即可跳过git hook校验(–no-verify 简写为 -n)
git commit -m “xxx” --no-verify
#lint-staged
用于自动修复提交文件风格问题
lint-staged 配置位于项目 .husky 目录下 lintstagedrc.js
module.exports = {
// 对指定格式文件 在提交的时候执行相应的修复命令
‘.{js,jsx,ts,tsx}': [‘eslint --fix’, ‘prettier --write’],
'{!(package).json,.code-snippets,.!(browserslist)rc}': [‘prettier --write–parser json’],
‘package.json’: [‘prettier --write’],
'.vue’: [‘eslint --fix’, ‘stylelint --fix’, ‘prettier --write’, ‘git add .’],
'.{scss,less,styl,css,html}’: [‘stylelint --fix’, ‘prettier --write’, ‘git add .’],
‘*.md’: [‘prettier --write’],
};