Lint Your Code

头像
Yawenina
    阅读 5 分钟
    8

    形成良好统一的代码规范，有利于提高代码的可读性，减少潜在的错误，便于团队协作开发。本文简单介绍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中的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 也是完全符合规范的哦~

    总结

    javascriptgitlinter
    Yawenina
    2.3k 声望117 粉丝
    « 上一篇
    懒人神器：svg-sprite-loader实现自己的Icon组件

    引用和评论

    推荐阅读
    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.9k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新