Lint Your Code

时间 2019-11-06

标签 lint code 繁體版

原文原文链接

造成良好统一的代码规范，有利于提升代码的可读性，减小潜在的错误，便于团队协做开发。本文简单介绍JS、CSS、 Git Commit 的规范工具及用法。css

Lint JS

咱们使用ESlint对JS进行代码规范。node

1. 安装

你能够全局安装：npm install eslint -ggit

或者也能够在你的项目安装 npm install eslint --save-devexpress

安装完成后，可在命令行检查你的代码是否符合规范。若是是全局安装则可使用 eslint your-file 检查你的文件。若是是项目内安装则使用：./node_modules/.bin/eslint your-file。npm

2. 配置

经过eslint --init命令能够生成一个配置文件。你也能够本身建立.eslintrc.*文件，或者在package.json中经过eslintConfig配置。在这里咱们使用.eslintrc文件进行配置。当你使用eslint命令检查你的代码时，它会从当前目录开始一层层向上查找是否存在.eslintrc文件，直到找到最近的一个.eslinrc文件，做为这次检查的规则。json

你能够在ESLint官网查看全部配置项。less

目前已经有不少大厂公开了他们的代码规范，也有不少相对应的 ESLint 插件，咱们能够在.eslintrc中配置相对应的插件，这样就不用咱们手动去添加一个个规则了。ide

以我目前使用的Airbnb的代码规范为例，他提供了eslint-config-airbnb-base插件，所以我只须要在项目安装本插件：工具

npx install-peerdeps --save-dev eslint-config-airbnb-base测试

而且在.eslintrc中配置上这个插件，大功告成！

{
  "extends": ["airbnb-base"]
}

须要注意的一点是，若是你是使用全局命令eslint你的代码，在相应的.eslintrc中的extends，plugins都须要在全局安装。不然eslint会找不到对应的插件。

最后，若是你还想对现有的 airbnb 或者其余规则进行配置，则可在.eslintrc中的rules中加上相应的配置。

{
  "extends": ["airbnb-base"],
  "rules": {
    // 你的个性化配置
        "rule-name": "" // 0-off, 1-warn, 2-error
  }
}

还有一个比较例外的是可使用如下方式，针对某些文件，从新修改相应规则：

"overrides": [
    {
      "files": ["*-test.js","*.spec.js"],
      "rules": {
        "no-unused-expressions": "off"
      }
    }
  ]

3. 禁用

可是有些时候有些地方你可能真的须要禁用某些规则，eslint提供了几种禁用方式：

/* eslint-disable [rules] */：这行以后的全部代码禁用eslint 规则。
/* eslint-disable-line [rules] */: 这一行禁用eslint规则。
/* eslint-disable-next-line [rules] */: 下一行禁用eslint规则。

其中[rules] 是可选的，若是没有rules则禁用全部规则，若是有rules则禁用全部规则。

如 /* eslint-disable */则会禁用掉全部规则，/* eslint-disable no-console*/ 则只会禁用掉no-console 这条规则。

Lint CSS

我选择了StyleLint来规范个人 CSS 。它能够说和eslint很是像了。

1. 安装

一样的，全局或者项目下安装stylelint.

npm install stylelint -g

安装完成后，若是是全局安装则可使用 stylelint your-css-file 检查你的文件。若是是项目内安装则使用：./node_modules/.bin/stylelint your-css-file。

2. 配置

能够经过三种方式对stylelint进行配置：

package.json中的stylelint属性；
.stylelintrc 文件
stylelint.config.js 文件导出一个 JS 对象

和 ESLint同样，咱们能够在extends中指定第三方插件，rules来配置对应的规则。这里咱们仍是继续使用Airbnb CSS 规范。

安装stylelint-config-airbnb:

npm install stylelint-config-airbnb

在配置文件中声明：

{  "extends": "stylelint-config-airbnb"}

注意，若是你的.stylelintrc文件是在根目录下，则extends的路径须要写成绝对路径，好比：

{
  "extends": "/usr/local/lib/node_modules/stylelint-config-airbnb"
}

最后，运行stylelint your-css-file就能够出现规范检查结果啦！stylelint默认会支持css,scss,less因此你也不用担忧哦~

一样，你也能够像ESLint同样，经过rules配置你本身的规则。

3. 禁用

stylelint 的规则也和 ESLint同样。因此若是熟悉了ESLint， stylelint真的但是说是无缝上手哦~

Lint Commit

在这一步我会进行两步操做：

检查前2步的ESLint，stylelint 是否所有经过；
提交的commit信息是否符合规范。

OK, Let's do it!

1. 使用`githooks` 检测代码规范是否经过

咱们使用husky来管理咱们的githooks。在安装husky以前，请确保你的项目已经git init了。

安装husky:npm install husky --save-dev

在package.json中定义咱们须要的钩子及执行的命令：

{
    "scripts": {
    "lint:es": "eslint", // lint js
    "lint:css": "stylelint src/**/*.css", // lint css
    "lint:all": "npm-run-all lint:es lint:css" // lint es, css
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint:all",
    }
  }
}

在这里咱们分别定义了lint:es和lint:css两个命令来检测代码规范。你能够分别运行这两个命令。也能够定义一个命令同时运行这两个命令，我在这里使用了npm-run-all：

npm install npm-run-all --save-dev

咱们定义了在pre-commit钩子触发时会执行npm run lint:all命令。pre-commit钩子会在git commit时触发，若是lint:all 没有经过，则本次commit会失败。

2. 使用commintlint检查 `commit` 信息是否符合规范

在这里，咱们使用阮老师这篇文章中提到的 git 提交规范，大体是：

<type>(<scope>): <subject>
// 空一行
<body>
// 空一行
<footer>

其中，type 可选项为：

feat：新功能（feature）
fix：修补bug
docs：文档（documentation）
style：格式（不影响代码运行的变更）
refactor：重构（即不是新增功能，也不是修改bug的代码变更）
test：增长测试
chore：构建过程或辅助工具的变更

安装commitlint，以及相对应的commit规范。和eslint同样，commitlint为咱们提供检测功能，同时他也有不一样的插件来对应不一样的规范风格。你能够在这里查看你们分享出来的相应规范的配置。

npm install --save-dev @commitlint/{config-conventional,cli}

生成配置文件：

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

它也支持多种文件格式的配置文件：

Configuration is picked up from commitlint.config.js, .commitlintrc.js, .commitlintrc.json, or .commitlintrc.yml file or a commitlint field in package.json

而且经常使用的配置项也与ESLint很类似：

{
      "extends": ['@commitlint/config-conventional'], // 扩展的规则集
      "rules": {
          // commitmsg 的自定义规则
      }
  }

这时候你就能够检查你要提交的commit信息是否符合规范了：

echo "foo" | npx commitlint

不过这样很鸡肋，我要先commit一次要提交的信息，经过了，再用这条消息提交一次。咱们彻底能够在githooks时来解决这个问题：

{
    "scripts": {
        "commitmsg": "commitlint -e GIT_PARAMS"
    },
    "husky": {
    "hooks": {
      "pre-commit": "npm run lint:all",
      "commit-msg": "npm run commitmsg"
    }
  }
}

在这里和githooks同时使用时须要加上GIT_PARAMS这个环境变量。咱们在commit-msg这个钩子时调用npm run commitmsg 来判断commit信息是否符合规范。

3. 使用commitizen来填写`commit msg`

要想记住全部的commit类型和规范也是比较麻烦的事，commitizen提供交互式的方式来帮助咱们填写commit msg。

安装commitizen及其adapater : npm install -g commitizen cz-conventional-changelog
全局安装adapater: echo '{ "path": "cz-conventional-changelog" }' > ~/.czr
安装完成后，使用 git cz 代替 git commit -m 来填写 commit msg，会出现一个交互式工具：

OK。完成以上三步以后咱们的git 工做流变成了：

git add .
git cz

而后就会检查咱们的eslint, stylelint, commitlint。这样，当你提交成功时，你的JS, CSS , Commit Msg 也是彻底符合规范的哦~

总结

检查JS: ESlint
检查CSS：StyleLint
检查Commit Message: commintlint
三者结合，使用Git钩子管理工具：husky

Lint Your Code

Lint JS

1. 安装

2. 配置

3. 禁用

Lint CSS

1. 安装

2. 配置

3. 禁用

Lint Commit

1. 使用githooks 检测代码规范是否经过

2. 使用commintlint检查 commit 信息是否符合规范

3. 使用commitizen来填写commit msg

总结

1. 使用`githooks` 检测代码规范是否经过

2. 使用commintlint检查 `commit` 信息是否符合规范

3. 使用commitizen来填写`commit msg`