安装 husky、lint-staged、eslint

npm install husky --save-dev
npm install lint-staged --save-dev
// prettier
npm install prettier --save-dev
// eslint 相关
npm install eslint eslint-config-airbnb eslint-config-prettier eslint-formatter-pretty eslint-plugin-compat eslint-plugin-import eslint-plugin-promise --save-dev
// 样式相关
npm install stylelint-config-standard stylelint-config-prettier --save-dev

检测JS规范

这里使用了eslint和prettier两种方式混合检测，先用eslint检测，再用prettier检查，并自动修复格式问题后提交

在上面我们安装了很多关于eslint的插件，来看看各是什么作用

package.json配置

"husky": {
        "hooks": {
            "pre-commit": "lint-staged",
            "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
        }
    },
    "lint-staged": {
        "*.js": [
            "eslint --fix --cache --format=pretty",
            "prettier --ignore-path .eslintignore --single-quote --write",
            "git add"
        ]
    },

检测css规范

使用了stylelint
添加.stylelintrc,并配置两插件

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
}

支持vue项目

增加使用eslint-plugin-vue插件，具体使用 https://vuejs.github.io/eslint-plugin-vue/
支持webpack别入引入 使用eslint-import-resolver-webpack

.eslintrc增加配置
解析vue，使用parserOptions.parser，增加plugin:vue/recommended到extends,增加setting项

module.exports = {
    parserOptions: {
        parser:'babel-eslint',
    },
    extends: ['airbnb', 'prettier', 'plugin:vue/recommended'],
    ...
    settings: {
        polyfills: ['wasm', 'promises'],
        'import/resolver': {
            webpack: {
                config: 'build/webpack.base.conf.js'
            }
        }
    }
};

vs code支持vue语法检测，自定义用户设置

"eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "vue", "autoFix": true }
  ]

问题集合

Unknown option “*.js” with value [‘eslint —cache —format=pretty’, ‘git add’] was found in the config root

如下，问题在ignore配置错误，删除ignore项后解决

"lint-staged": {
        "*.js": [
            "eslint --cache --format=pretty",
            "prettier --ignore-path .eslintignore --single-quote --write",
            "git add"
        ],
        "ignore": [
            "**/dist/*.js"
        ]
    }

$ git commit -m 'test husky'
husky > pre-commit (node v10.14.2)
● Validation Warning:
  Unknown option "*.js" with value ['eslint --cache --format=pretty', 'git add'] was found in the config root.
  You are probably trying to mix simple and advanced config formats. Adding
  "linters": {
    "*.js": ["eslint --cache --format=pretty","git add"]
  }
  will fix it and remove this message.
Please refer to https://github.com/okonet/lint-staged#configuration for more information...
husky > commit-msg (node v10.14.2)
'commitlint' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еij▒▒▒
▒▒▒▒▒▒▒▒▒ļ▒▒▒
husky > commit-msg hook failed (add --no-verify to bypass)

eslint —cache —format=pretty found some errors. Please fix them and try committing again.

.eslintrc文件里配置flow-type静态类型检查，安装eslint-plugin-flowtype后解决（或删除.eslintrc里的配置)，文章最后有.eslintrc最终配置

$ git commit -m 'test husky'
husky > pre-commit (node v10.14.2)
Stashing changes... [started]
Stashing changes... [completed]
Running linters... [started]
Running tasks for *.js [started]
eslint --cache --format=pretty [started]
eslint --cache --format=pretty [failed]
→
Running tasks for *.js [failed]
→
Running linters... [failed]
Updating stash... [started]
Updating stash... [skipped]
→ Skipping stash update since some tasks exited with errors
Restoring local changes... [started]
Restoring local changes... [completed]
× eslint --cache --format=pretty found some errors. Please fix them and try committing again.
Oops! Something went wrong! :(
ESLint: 5.11.0.
ESLint couldn't find the plugin "eslint-plugin-flowtype". This can happen for a couple different reasons:
1. If ESLint is installed globally, then make sure eslint-plugin-flowtype is also installed globally. A globally-installed ESLint cannot find a locally-installed plugin.
2. If ESLint is installed locally, then it's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
npm i eslint-plugin-flowtype@latest --save-dev
Path to ESLint package: D:\project\ue_qianduan_git\imqianduan
ode_modules\eslint
If you still can't figure out the problem, please stop by https://gitter.im/eslint/eslint to chat with the team.
husky > pre-commit hook failed (add --no-verify to bypass)

husky > commit-msg hook failed (add —no-verify to bypass)

从husky的github上复制了一个commit-msghooks过来，没必要，删除后解决

"husky": {
        "hooks": {
            "pre-commit": "lint-staged",
            "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
        }
    },

$ git commit -m 'test husky'
husky > pre-commit (node v10.14.2)
Stashing changes... [started]
Stashing changes... [skipped]
→ No partially staged files found...
Running linters... [started]
Running tasks for *.js [started]
Running tasks for *.js [skipped]
→ No staged files match *.js
Running linters... [completed]
husky > commit-msg (node v10.14.2)
'commitlint' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еij▒▒▒
▒▒▒▒▒▒▒▒▒ļ▒▒▒
husky > commit-msg hook failed (add --no-verify to bypass)

stylelint could not be found. Try npm install stylelint

安装stylelint解决

$ git commit -m 'test husky css'
husky > pre-commit (node v10.14.2)
Stashing changes... [started]
Stashing changes... [skipped]
→ No partially staged files found...
Running linters... [started]
Running tasks for *.js [started]
Running tasks for {*.json,.{eslintrc,prettierrc,stylelintrc}} [started]
Running tasks for *.{css,scss} [started]
Running tasks for *.js [skipped]
→ No staged files match *.js
Running tasks for {*.json,.{eslintrc,prettierrc,stylelintrc}} [skipped]
→ No staged files match {*.json,.{eslintrc,prettierrc,stylelintrc}}
Running tasks for *.{css,scss} [failed]
→ stylelint could not be found. Try `npm install stylelint`.
Running linters... [failed]
stylelint could not be found. Try `npm install stylelint`.
husky > pre-commit hook failed (add --no-verify to bypass)

.eslint

{
    "parser": "babel-eslint",
    "parserOptions": {
        "sourceType": "module",
        "allowImportExportEverywhere": true
    },
    "extends": ["airbnb", "prettier"],
    "env": {
        "browser": true,
        "node": true
    },
    "rules": {
        "arrow-parens": ["off"],
        "compat/compat": "error",
        "consistent-return": "off",
        "comma-dangle": "off",
        "generator-star-spacing": "off",
        "import/no-unresolved": "error",
        "import/no-extraneous-dependencies": "off",
        "jsx-a11y/anchor-is-valid": "off",
        "no-console": "off",
        "no-use-before-define": "off",
        "no-unused-vars": "off",
        "no-multi-assign": "off",
        "promise/param-names": "error",
        "promise/always-return": "error",
        "promise/catch-or-return": "error",
        "promise/no-native": "off",
        "prefer-destructuring": "off",
        "no-lonely-if": "off"
    },
    "plugins": ["import", "promise", "compat"]
}

.prettierrc

{
  "overrides": [
    {
      "files": [".prettierrc", ".babelrc", ".eslintrc", ".stylelintrc"],
      "options": {
        "parser": "json"
      }
    }
  ],
  "singleQuote": true,
  "tabWidth": 4
}

.stylelintrc

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
}

总结

使用husky设置代码格式检查，使得团队代码规范能保持一致，便于合并代码、代码review，减少出错等等。