文章目录
首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

使用husky、lint-staged、prettier、eslint保持团队代码一致

2018年12月24日 发布 阅读(639) 作者:懒炖

安装 husky、lint-staged、eslint

  1. npm install husky --save-dev
  2. npm install lint-staged --save-dev
  3. // prettier
  4. npm install prettier --save-dev
  5. // eslint 相关
  6. npm install eslint eslint-config-airbnb eslint-config-prettier eslint-formatter-pretty eslint-plugin-compat eslint-plugin-import eslint-plugin-promise --save-dev
  7. // 样式相关
  8. npm install stylelint-config-standard stylelint-config-prettier --save-dev

检测JS规范

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

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

插件说明
eslint-config-airbnbeslint airebnb标准,除此之外,还有eslint-config-googleeslint-config-standard等标准。github
eslint-config-prettier通过使用eslint-config-prettier配置,能够关闭一些不必要的或者是与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次。github
eslint-formatter-pretty美化eslint错误,告警输出,在命令行使用eslint --fix --cache --format=pretty
eslint-plugin-compat检测浏览器的兼容性。将 “compat” 添加到 .eslintrc”plugins” 部分,将 “browser”: true 添加到 “env”。github
eslint-plugin-import此插件旨在支持ES2015 +(ES6 +)导入/导出语法的linting,并防止错误拼写文件路径和导入名称的问题。
eslint-plugin-promise检测promise.注意,如果全局安装了eslint,那么此插件也必须全局安装。github

package.json配置

  1. "husky": {
  2. "hooks": {
  3. "pre-commit": "lint-staged",
  4. "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  5. }
  6. },
  7. "lint-staged": {
  8. "*.js": [
  9. "eslint --fix --cache --format=pretty",
  10. "prettier --ignore-path .eslintignore --single-quote --write",
  11. "git add"
  12. ]
  13. },

检测css规范

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

  1. {
  2. "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
  3. }

支持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

  1. module.exports = {
  2. parserOptions: {
  3. parser:'babel-eslint',
  4. },
  5. extends: ['airbnb', 'prettier', 'plugin:vue/recommended'],
  6. ...
  7. settings: {
  8. polyfills: ['wasm', 'promises'],
  9. 'import/resolver': {
  10. webpack: {
  11. config: 'build/webpack.base.conf.js'
  12. }
  13. }
  14. }
  15. };

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

  1. "eslint.validate": [
  2. "javascript",
  3. "javascriptreact",
  4. { "language": "vue", "autoFix": true }
  5. ]

问题集合

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

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

  1. "lint-staged": {
  2. "*.js": [
  3. "eslint --cache --format=pretty",
  4. "prettier --ignore-path .eslintignore --single-quote --write",
  5. "git add"
  6. ],
  7. "ignore": [
  8. "**/dist/*.js"
  9. ]
  10. }
  1. $ git commit -m 'test husky'
  2. husky > pre-commit (node v10.14.2)
  3. Validation Warning:
  4. Unknown option "*.js" with value ['eslint --cache --format=pretty', 'git add'] was found in the config root.
  5. You are probably trying to mix simple and advanced config formats. Adding
  6. "linters": {
  7. "*.js": ["eslint --cache --format=pretty","git add"]
  8. }
  9. will fix it and remove this message.
  10. Please refer to https://github.com/okonet/lint-staged#configuration for more information...
  11. husky > commit-msg (node v10.14.2)
  12. 'commitlint' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еij▒▒▒
  13. ▒▒▒▒▒▒▒▒▒ļ▒▒▒
  14. 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最终配置

  1. $ git commit -m 'test husky'
  2. husky > pre-commit (node v10.14.2)
  3. Stashing changes... [started]
  4. Stashing changes... [completed]
  5. Running linters... [started]
  6. Running tasks for *.js [started]
  7. eslint --cache --format=pretty [started]
  8. eslint --cache --format=pretty [failed]
  9. Running tasks for *.js [failed]
  10. Running linters... [failed]
  11. Updating stash... [started]
  12. Updating stash... [skipped]
  13. Skipping stash update since some tasks exited with errors
  14. Restoring local changes... [started]
  15. Restoring local changes... [completed]
  16. × eslint --cache --format=pretty found some errors. Please fix them and try committing again.
  17. Oops! Something went wrong! :(
  18. ESLint: 5.11.0.
  19. ESLint couldn't find the plugin "eslint-plugin-flowtype". This can happen for a couple different reasons:
  20. 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.
  21. 2. If ESLint is installed locally, then it's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
  22. npm i eslint-plugin-flowtype@latest --save-dev
  23. Path to ESLint package: D:\project\ue_qianduan_git\imqianduan
  24. ode_modules\eslint
  25. If you still can't figure out the problem, please stop by https://gitter.im/eslint/eslint to chat with the team.
  26. husky > pre-commit hook failed (add --no-verify to bypass)

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

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

  1. "husky": {
  2. "hooks": {
  3. "pre-commit": "lint-staged",
  4. "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  5. }
  6. },
  1. $ git commit -m 'test husky'
  2. husky > pre-commit (node v10.14.2)
  3. Stashing changes... [started]
  4. Stashing changes... [skipped]
  5. No partially staged files found...
  6. Running linters... [started]
  7. Running tasks for *.js [started]
  8. Running tasks for *.js [skipped]
  9. No staged files match *.js
  10. Running linters... [completed]
  11. husky > commit-msg (node v10.14.2)
  12. 'commitlint' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еij▒▒▒
  13. ▒▒▒▒▒▒▒▒▒ļ▒▒▒
  14. husky > commit-msg hook failed (add --no-verify to bypass)

stylelint could not be found. Try npm install stylelint

安装stylelint解决

  1. $ git commit -m 'test husky css'
  2. husky > pre-commit (node v10.14.2)
  3. Stashing changes... [started]
  4. Stashing changes... [skipped]
  5. No partially staged files found...
  6. Running linters... [started]
  7. Running tasks for *.js [started]
  8. Running tasks for {*.json,.{eslintrc,prettierrc,stylelintrc}} [started]
  9. Running tasks for *.{css,scss} [started]
  10. Running tasks for *.js [skipped]
  11. No staged files match *.js
  12. Running tasks for {*.json,.{eslintrc,prettierrc,stylelintrc}} [skipped]
  13. No staged files match {*.json,.{eslintrc,prettierrc,stylelintrc}}
  14. Running tasks for *.{css,scss} [failed]
  15. stylelint could not be found. Try `npm install stylelint`.
  16. Running linters... [failed]
  17. stylelint could not be found. Try `npm install stylelint`.
  18. husky > pre-commit hook failed (add --no-verify to bypass)

.eslint

  1. {
  2. "parser": "babel-eslint",
  3. "parserOptions": {
  4. "sourceType": "module",
  5. "allowImportExportEverywhere": true
  6. },
  7. "extends": ["airbnb", "prettier"],
  8. "env": {
  9. "browser": true,
  10. "node": true
  11. },
  12. "rules": {
  13. "arrow-parens": ["off"],
  14. "compat/compat": "error",
  15. "consistent-return": "off",
  16. "comma-dangle": "off",
  17. "generator-star-spacing": "off",
  18. "import/no-unresolved": "error",
  19. "import/no-extraneous-dependencies": "off",
  20. "jsx-a11y/anchor-is-valid": "off",
  21. "no-console": "off",
  22. "no-use-before-define": "off",
  23. "no-unused-vars": "off",
  24. "no-multi-assign": "off",
  25. "promise/param-names": "error",
  26. "promise/always-return": "error",
  27. "promise/catch-or-return": "error",
  28. "promise/no-native": "off",
  29. "prefer-destructuring": "off",
  30. "no-lonely-if": "off"
  31. },
  32. "plugins": ["import", "promise", "compat"]
  33. }

.prettierrc

  1. {
  2. "overrides": [
  3. {
  4. "files": [".prettierrc", ".babelrc", ".eslintrc", ".stylelintrc"],
  5. "options": {
  6. "parser": "json"
  7. }
  8. }
  9. ],
  10. "singleQuote": true,
  11. "tabWidth": 4
  12. }

.stylelintrc

  1. {
  2. "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
  3. }

总结

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

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •  
  • ESLint的使用

    eslint使用注意事项

    发布:2019-01-03 阅读(346)

  • eslint:no-case-declarations

    该规则禁止词法声明(`let`,`const`,`function`和`class`在)`case/ default`条款。原因是词法声明在整个开关块中是可见的,但只有在分配时才会被初始化,这只有在达到定义它的情况下才会发生。

    发布:2018-12-28 阅读(316)

  • eslint:no-restricted-globals

    如果您希望通过启用环境来允许一组全局变量,但仍希望禁止其中某些变量,则禁止使用特定的全局变量非常有用。 例如,早期的Internet Explorer版本将当前的DOM事件暴露为全局变量 event,但是长期以来,使用此变量一直被认为是一种不好的做法。限制此操作将确保在浏览器代码中不使用此变量。

    发布:2018-12-28 阅读(363)

  • ESlint: switch case缩进问题:Expected indentation of 16 spaces but found 20.

    ESlint报错:Expected indentation of 16 spaces but found 20,Expected indentation of 12 spaces but found 16.

    发布:2018-11-08 阅读(554)

  • ESLint Parsing error: Unexpected token ...

    eslist报错: Unexpected token ...

    发布:2018-11-07 阅读(371)