利用git-hooks 使用husky+prettier+eslint+stylelint進行代碼校驗和格式化

時間 2020-12-01

標籤 css html 前端 vue node git es6 github vue-cli npm 欄目 Git 简体版

原文原文鏈接

項目中須要對代碼進行格式化，而且對代碼進行校驗。能夠經過git提供的鉤子在commit時能夠對==git暫存區的文件==提早進行校驗和格式化，若是校驗不經過，則不讓提交。css

在項目中最開始運行的時候，能夠把校驗規則配置的等級低一些，後續再增長校驗難度。html

git鉤子

git hooks都存儲在 .git/hooks文件夾，裏面都是一些可執行的腳本。生成項目時，會生成一些帶sample的文件，能夠把sample去掉執行。前端

客戶端鉤子

通常比較經常使用到的鉤子vue

pre-commit：在commit消息以前執行腳本
prepare-commit-msg：能夠在這裏執行提交信息的模板，合併提交、壓縮提交等
commit-msg: 對提交信息進行校驗

服務端鉤子

pre-receive：處理來自客戶端的推送操做時執行

husky 和 vue-cli

husky提供了commits的各類鉤子，包括pre-commit、commit-msg等。node

vue-cli內置了git-hooks yorkie, yorkie是兩年前從 husky 項目中fork出來的，打開能夠看到yorkie已經兩年沒有更新了。git

husky 使用

在pre-commit鉤子中使用 lint-staged, lint-staged只會對git暫存區的文件進行校驗。es6

安裝相應依賴

npm install --save-dev husky lint-staged

npm i -D prettier
npm i -D eslint-plugin-prettier
npm i -D eslint-config-prettier

npm i -D eslint
npm i -D eslint-plugin-standard
npm i -D eslint-plugin-vue

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

husky相應配置

將下面配置拷貝到package.json中github

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{html,vue,css,scss}": [
    "prettier --write",
    "stylelint --fix",
    "git add"
  ],
  "*.{js,vue}": [
    "prettier --write",
    "eslint --fix",
    "git add -A"
  ]
},

Prettier配置

格式化代碼，經過配置.prettierrc達到項目中使用統一格式。能夠與eslint配合使用。vue-cli

新建 .prettierrc文件。npm

{
    "arrowParens": "always",
    "bracketSpacing": true,
    "endOfLine": "auto",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxBracketSameLine": true,
    "jsxSingleQuote": false,
    "printWidth": 120,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true,
    "singleQuote": false,
    "tabWidth": 2,
    "trailingComma": "es5",
    "useTabs": false
}

新建 .prettierignore文件，裏面填寫不須要校驗的文件或文件夾。

EsLint 配置

十分鐘瞭解eslint配置 && 編寫自定義eslint規則
 EsLint 配置文檔

Extends的規則

EsLint 推薦的規則：eslint:recommended, 經過使用 "extends": "eslint:recommended"來啓用推薦的規則。
Vue文件校驗的規則: plugin:vue/essential, 經過安裝官方的 eslint-plugin-vue支持，它支持同時檢查你 .vue 文件中的模板和腳本，增長對v-if，v-for等指令的校驗等。
prettier校驗：plugin:prettier/recommended，根據配置的prettier規則進行校驗。

在項目新建 .eslintrc.js 文件。

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ["eslint:recommended", "plugin:vue/essential", "plugin:prettier/recommended"],
  parserOptions: {
    parser: "babel-eslint",
  },
  // eslint： https://eslint.org/docs/user-guide/configuring
  // "規則名": [規則值, 規則配置]
  // 關閉規則: "off"或者0
  // 在打開的規則做爲警告（不影響退出代碼）: "warn"或者1
  // 把規則做爲一個錯誤（退出代碼觸發時爲1）: "error"或者2
  rules: {
    "prettier/prettier": "warn",
    "arrow-parens": 0,
    // 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-unused-vars": [
      "off",
      {
        ignorePattern: "^_",
      },
    ],
    avoidEscape: 0,
    "space-before-function-paren": 0,
    "generator-star-spacing": 0,
    semi: [0],
    indent: ["off", 2],
    "no-multi-spaces": "warn",
    "no-prototype-builtins": "warn",
    "no-undef": "warn",
    "prefer-const": 0,
    "key-spacing": [
      0,
      {
        singleLine: {
          beforeColon: false,
          afterColon: true,
        },
        multiLine: {
          beforeColon: true,
          afterColon: true,
          align: "colon",
        },
      },
    ],
  },
};

新建 .eslintignore文件，裏面填寫不須要校驗的文件或文件夾。

node_modules
/dist

StyleLint 配置

StyleLint 配置文檔
StyleLint 規則列表
stylelint-config-standard extends stylelint-config-recommended, 開啓附加規則校驗，強制執行 常見的CSS樣式指南（如：經常使用的CSS原則，谷歌的CSS樣式指南、Airbnb的樣式指南）中的一些常見風格校驗。
stylelint-order: css的排序規則，stylelint-config-recess-order是一個配置stylelint-order的樣例。

新建 .stylelintrc.js 。

module.exports = {
  extends: ["stylelint-config-standard", "stylelint-config-recess-order"],
  plugins: ["stylelint-scss"],
  defaultSeverity: "warning",
  rules: {
    // 校驗規則略
  },
};

新建 .stylelintignore文件，裏面填寫不須要校驗的文件或文件夾。