对于具有一定工程素养的同学来说, 都会尤为注重编码规范, 而代码风格检查(lint)是确保编码规范一致性的重要手段.
lint, 即对代码进行静态分析, 并试图找出潜在问题的工具.
使用Lint好处
- 更高的代码可读性. 代码写出来最终还是需要给其他人阅读的, 乱乱糟糟的代码, 会让代码阅读者望而却步, 代码通常难以理解, 也就无从谈起代码的可维护性了.
- 更少的bug. 有研究表明, 全球因软件Bug造成的经济损失约3000多亿美金
- 更高的开发效率, Lint能够很容易的帮助我们发现低级/显而易见的错误.
前端Lint工具
何时进行代码检查
目前比较常见的代码检查工作流分为本地和远程两种:
1. 本地提前代码前(git hooks触发)
代码commit => 触发git precommit钩子 => 代码检查发现问题(本地) =>
修复问题 => 代码重新commit => 触发git precommit钩子 => 代码检查发现问题(本地)
2. 持续集成阶段(CI)
代码提交 => 代码检查发现问题(远程) => 修复问题 => 代码重新提交 => 代码检查通过(远程)
远程Lint涉及多较多的配置, 且远程Lint的反馈链条太长,不作过多介绍.
这里主要讲解下本地提前代码前, 如何进行代码检查.
本地代码提交前Lint
在本地进行代码检查, 是比较方便的. 常见的做法是使用husky或pre-commit在本地代码提交前进行Lint
这里, 我们以husky为例, 使用vue/cli 3.0创建的vue工程当中来实践下
vue/cli 3.0创建工程的过程, 这里不再介绍, 有需要的同学, 可以参考下vue/cli官网
使用husky
安装依赖
yarn add husky --dev
或者
npm install -D husky
修改package.json
修改package.json, 添加以下配置
"husky": {
"hooks": {
"pre-commit": "yarn lint"
}
}
"pre-commit"调用的"yarn lint"命令, 即package.json中"script"中配置的命令:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
}
尝试git commit
此时, 修改本地代码, 故意写出一些错误代码, 然后提交代码, 在git commit时, 得到的结果可能如下:
$ git commit -m "test: add error code for test"
husky > pre-commit (node v10.15.3)
$ vue-cli-service lint
error: Parsing error: Unterminated string constant
22 | methods: {
23 | submit() {
> 24 | this.$http.get('xxxxhello).then(res => {
| ^
25 | this.list = res.data.data.list
26 |
27 | }); at src\views\About.vue:38:21:
36 | methods: {
37 | submit() {
> 38 | this.$http.get('xxxxhello).then(res => {
| ^
39 | this.list = res.data.data.list
40 |
41 | });
1 error found.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
husky > pre-commit hook failed (add --no-verify to bypass)
error Command failed with exit code 1.
渐进式使用Lint工具
按上面的做法, 会将整个仓库在提交时都会进行格式化. 但在实际工作当中, 有些仓库是存量的, 已经有不少代码编写不规范, 但并不影响功能. 因此, 多数情况下, 大家还是希望在项目当中能够渐进式的使用这些工具. 相对而言, 保证业务系统的稳定性是最重要的事情. 针对此种场景, 我们可以考虑使用lint-staged
lint-staged
lint-staged 就是基于此种场景开发的，其中 staged 是 Git 里面的概念，指待提交区，使用git commit -a，或者先 git add 然后 git commit 的时候，你的修改代码都会经过待提交区。
lint-staged用法
安装依赖
yarn add lint-staged --dev
或者
npm install -D lint-staged
修改package.json
修改package.json
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,vue}": [
"vue-cli-service lint",
"git add"
]
}
尝试提交代码
$ git commit -m "test: test lint "
husky > pre-commit (node v10.15.3)
‼ Some of your tasks use `git add` command. Please remove it from the config since all modifications made by tasks will be automatically added to the git commit index.
[STARTED] Preparing...
[SUCCESS] Preparing...
[STARTED] Running tasks...
[STARTED] Running tasks for src/**/*.{js,vue}
[STARTED] vue-cli-service lint
[FAILED] vue-cli-service lint [FAILED]
[FAILED] vue-cli-service lint [FAILED]
[SUCCESS] Running tasks...
[STARTED] Applying modifications...
[SKIPPED] Skipped because of errors from tasks.
[STARTED] Reverting to original state because of errors...
[SUCCESS] Reverting to original state because of errors...
[STARTED] Cleaning up...
[SUCCESS] Cleaning up...
× vue-cli-service lint:
error: Parsing error: Unterminated string constant
22 | methods: {
23 | submit() {
> 24 | this.$http.get(xxxxhello").then(res => {
| ^
25 | this.list = res.data.data.list;
26 | });
27 | } at src\views\About.vue:38:30:
36 | methods: {
37 | submit() {
> 38 | this.$http.get(xxxxhello").then(res => {
| ^
39 | this.list = res.data.data.list;
40 | });
41 | }
1 error found.
husky > pre-commit hook failed (add --no-verify to bypass)
error Command failed with exit code 1.
更多选择
实际上, lint-staged可以让你在提交代码前有更多的操作自由度, 比如添加以下配置, 能够自动修复错误:
"lint-staged": {
"src/**/*.{js,vue}": [
"vue-cli-service lint --fix",
"git add"
]
}
或者使用下面的配置, 自动格式化代码(请谨慎使用)
"lint-staged": {
"src/**/*.{js,vue}": [
"vue-cli-service lint --fix",
"prettier --write",
"git add"
]
}
