ESLint+StyleLint+Commitizen+Husky让代码风格统一起来

相信很多小伙伴在开发的时候都会遇到格式化代码的问题，尤其是换台电脑，或者是接手一个新的项目，不同风格的代码让作为开发的我们十分难受，那么怎么统一代码风格，怎么让代码看起来优雅呢？

ESLint

首先我们安装ESlint,对Js代码格式化

npm i eslint -g
eslint --init

安装完成以后会生成一份.eslintrc.js，这里我选择了standard标准。

VSCODE插件当中下载ESLint插件,有了这个插件以后我们在VScode 设置当中配置如下：

 "editor.codeActionsOnSave": {
       "source.fixAll": true,
  },

是不是很简单，当你保存代码的时候，js就自动格式化了。如果你想对项目当中的其他文件格式化，你可以在package.json当中新增

  "scripts": {
    "lint:js": "eslint src/**/*.js --fix",
   }

StyleLint

styleLint 没有init方法，我们手动新建.stylelintrc.js。

module.exports = {
  extends: ["stylelint-config-standard", "stylelint-config-recess-order"],
  plugins: ["stylelint-order"],
  rules: {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["extends", "tailwind"]
      }
    ],
    "selector-class-pattern": [ // 命名规范 -
      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
      {
          "message": "Expected class selector to be kebab-case"
      }
    ],
    "string-quotes":"single", // 单引号
     },
};

安装 stylelint

npm i stylelint  stylelint-config-recess-order stylelint-config-recommended stylelint-config-standard stylelint-order -D

同样我们在VSCODE插件当中下载StyleLint插件。是不是很简单，当你保存代码的时候，css就自动格式化了。如果你想对项目当中的其他文件格式化，你可以在package.json当中新增

  "scripts": {
      "lint:css": "stylelint src/**/*.*ss --fix  --custom-syntax postcss-less",
  }

这里我使用了less 所以需要postcss-less。

Commitizen

简单使用Commitizen-规范你的commit message

npm install -g commitizen
commitizen init cz-conventional-changelog --save --save-exact

然后在你使用git add .之后，你可以使用git cz代替git commit -m 描述 。

Husky

既然都写了命令了，有没有办法再git cz的时候格式化代码呢？

package.json

{ "scripts": { "prepare": "husky install" } }

npm i husky -D
npm run prepare
npx husky add .husky/pre-commit "npm run lint:css && npm run lint:js"

这样就够了吗？显然不够，git代码错误不能提示

lint-staged

npm i lint-staged -D

修改pre-commit

- npm run lint:css & npm run lint:js
+ npx lint-staged

新建.lintstagedrc文件

{
  "*.js": "eslint --fix",
  "*.{css,less}": "stylelint --fix"
}

任务完成！