一、StyleLint

StyleLint使用介绍
提供默认的代码检查规则
提供CLI工具，快速调用
通过插件支持Sass、Less、PostCSS
支持Gulp或者Webpack集成

npm install stylelint —dev
npx stylelint ./index.css
npm install stylelint-config-sass-guidelines stylelint-config-standard
.stylelintrc.js

module.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-sass-guidelines"
  ]
}

运行：npx stylelint ./index.css

二、Prettier 的使用

近两年流行的前端代码通用型格式化工具，几乎可以完成各种代码的格式化。

yarn add prettier —dev安装prettier到当前项目
yarn prettier style.css将格式化的结果输出到命令行
yarn prettier style.css —write 将格式化的结果覆盖原文件
yarn prettier . —write对当前整个项目进行格式化

三、Git Hooks

代码提交至仓库之前为执行lint工作

Git Hook也称为Git钩子，每个钩子都对应一个任务
通过shell脚本可以编写钩子任务出发时要具体执行的操作
在一个Git仓库中，进入.git/hooks目录，然后看到很多sample文件，执行cp pre-commit.sample pre-commit，拷贝了一份pre-commit文件出来，把里面的内容先去掉，就写一句简单的echo看看Git钩子的效果(第一行是可执行文件必须要有的固定语法，不可以删除)

#!/bin/sh
echo "git hooks"

然后回到仓库根目录，执行git add . ， git commit -m"xx"
就可以看到输出了git hooks，说明pre-commit这个钩子已经生效了

四、ESLint结合Git Hooks

很多前端开发者并不擅长使用shell，Husky可以实现Git Hooks的使用需求
在已有了eslint的Git项目中，安装husky，实现在Git commit的时候，进行lint
yarn add husky —dev

package.json

{
  "name": "GitHooks",
  "version": "1.0.0",
  "main": "index.js",
  "author": "jiailing <517486222@qq.com>",
  "license": "MIT",
  "scripts": {
    "test": "eslint ./index.js"
  },
  "devDependencies": {
    "eslint": "^7.3.1",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "husky": "^4.2.5"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn test"
    }
  }
}

然后执行
echo node_modules > .gitignore
git add .
git commit -m “husky”

可以看到我们的index.js的代码报错被输出到控制台了，并且Git commit失败了。
说明husky已经完成了在代码提交前的lint工作。不过husky并不能对代码进行格式化，此时可以使用lint-stage
yarn add lint-staged —dev

package.json

{
  "name": "GitHooks",
  "version": "1.0.0",
  "main": "index.js",
  "author": "jiailing <517486222@qq.com>",
  "license": "MIT",
  "scripts": {
    "test": "eslint ./index.js",
    "precommit": "lint-staged"
  },
  "devDependencies": {
    "eslint": "^7.3.1",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.11"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn precommit"
    }
  },
  "lint-staged": {
    "*.js": [
      "eslint",
      "git add"
    ]
  }
}