Lint Your Code

构成优越一致的代码范例,有利于进步代码的可读性,削减潜伏的毛病,便于团队合作开辟。本文简朴引见JS、CSS、 Git Commit 的范例东西及用法。

Lint JS

我们运用ESlint对JS举行代码范例。

1. 装置

你能够全局装置:npm install eslint -g

或许也能够在你的项目装置 npm install eslint --save-dev

装置完成后,可在敕令行搜检你的代码是不是相符范例。假如是全局装置则能够运用 eslint your-file 搜检你的文件。假如是项目内装置则运用:./node_modules/.bin/eslint your-file

2. 设置

经由历程eslint --init敕令能够天生一个设置文件。你也能够本身建立.eslintrc.*文件,或许在package.json中经由历程eslintConfig设置。在这里我们运用.eslintrc文件举行设置。当你运用eslint敕令搜检你的代码时,它会从当前目次最先一层层向上查找是不是存在.eslintrc文件,直到找到近来的一个.eslinrc文件,作为此次搜检的划定规矩。

你能够在ESLint官网检察一切设置项。

现在已有许多大厂公开了他们的代码范例,也有许多相对应的 ESLint 插件,我们能够在.eslintrc中设置相对应的插件,如许就不必我们手动去增添一个个划定规矩了。

以我现在运用的Airbnb的代码范例为例,他供应了eslint-config-airbnb-base插件,因而我只须要在项目装置本插件:

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

而且在.eslintrc中设置上这个插件, 功德圆满!

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

须要注重的一点是,假如你是运用全局敕令eslint你的代码,在响应的.eslintrc中的extendsplugins都须要在全局装置。不然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一样。所以假如熟习了ESLintstylelint真的但是说是无缝上手哦~

Lint Commit

在这一步我会举行两步操纵:

  • 搜检前2步的ESLintstylelint 是不是悉数经由历程;
  • 提交的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:eslint: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,会涌现一个交互式东西:

    《Lint Your Code》

OK。完成以上三步以后我们的git 事情流变成了:

git add .
git cz

然后就会搜检我们的eslint, stylelint, commitlint。如许,当你提交胜利时,你的JS, CSS , Commit Msg 也是完全相符范例的哦~

总结

    原文作者:Yawenina
    原文地址: https://segmentfault.com/a/1190000015804468
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞