对于具有一定工程素养的同学来说, 都会尤为注重编码规范, 而代码风格检查(lint)是确保编码规范一致性的重要手段.

lint, 即对代码进行静态分析, 并试图找出潜在问题的工具.

使用Lint好处

更高的代码可读性. 代码写出来最终还是需要给其他人阅读的, 乱乱糟糟的代码, 会让代码阅读者望而却步, 代码通常难以理解, 也就无从谈起代码的可维护性了.

更少的bug. 有研究表明, 全球因软件Bug造成的经济损失约3000多亿美金

更高的开发效率, Lint能够很容易的帮助我们发现低级/显而易见的错误.

前端Lint工具

ESLint

Standard

SCSSLint

JSONLint

HTMLHint

github出品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"

]

}

复制代码

相关链接

ESLint

Standard

SCSSLint

JSONLint

HTMLHint

github出品Lint工具列表

husky

lint-staged

pre-commit

vue/cli官网

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[利用husky&lint-staged构建代码检查工作流]http://www.zyiz.net/tech/detail-141701.html