关于eslint:利用githooks-使用huskyprettiereslintstylelint进行代码校验和格式化

我的项目中须要对代码进行格式化，并且对代码进行校验。能够通过 git 提供的钩子在 commit 时能够对 ==git 暂存区的文件 == 提前进行校验和格式化，如果校验不通过，则不让提交。

在我的项目中最开始运行的时候，能够把校验规定配置的等级低一些，后续再减少校验难度。

git 钩子

git hooks 都存储在 .git/hooks文件夹，外面都是一些可执行的脚本。生成我的项目时，会生成一些带 sample 的文件，能够把 sample 去掉执行。

客户端钩子

个别比拟罕用到的钩子

• pre-commit：在 commit 音讯之前执行脚本
• prepare-commit-msg：能够在这里执行 提交信息的模板，合并提交、压缩提交等
• commit-msg: 对提交信息进行校验

服务端钩子

• pre-receive：解决来自客户端的推送操作时执行

husky 和 vue-cli

husky 提供了 commits 的各种钩子，包含 pre-commit、commit-msg 等。

vue-cli 内置了 git-hooks yorkie, yorkie 是两年前从 husky 我的项目中 fork 进去的，关上能够看到 yorkie 曾经两年没有更新了。

husky 应用

在 pre-commit 钩子中应用 lint-staged, lint-staged 只会对 git 暂存区的文件进行校验。

装置相应依赖

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 中

"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 配合应用。

新建 .prettierrc文件。

{
    "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文件，外面填写不须要校验的文件或文件夹。

成果

格式化工具

• vscode vue-format，对蕴含 jsx 语法的文件反对度不好，不能配合 git 钩子进行校验，其它不错，能够反对依照标签属性个数进行格式化。
• vscode prettier

vscode vue 模板应用 vetur，setting 中有个 template 选项，vetur.validation.template 为 true 时会主动应用 eslint-plugin-vue校验。

参考

• eslint 与 git 钩子
• 最全的 Eslint 配置模板，从此对立团队的编程习惯
• vue eslint 配置
• 应用 ESLint+Prettier 来对立前端代码格调
• VSCode + ESLint + Prettier 代码语法检查和格式化