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

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

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

安装 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 国际 许可协议,如需转载,请注明出处

评论

  •  
  • 使用git hooks(post-receive)实现简单的远程自动部署

    使用git hooks(post-receive)实现简单的远程自动部署

    发布:2019-06-05 阅读(438)

  • linux下设置git(pull,push等)免密码操作

    linux下,设置git免密码操作

    发布:2019-06-04 阅读(417)

  • 批量转换LF和CRLF的小技巧

    做跨平台开发移植的时候,最常见的问题就是不同操作系统的换行不同(例如,Windows 上是 CRLF,而 Linux 上是 LF,MacOS 以前是 CR,现在也是 LF),如果不注意的话,可能会导致编译的时候报诡异的错误,虽然说有些优秀的文本工具(notepad++, vscode 等)可以自动转换,但是它们都没有提供批量转换的方法,所以一旦遇到有成百上千个的文件需要转换,那么一个个手动去转明显效率低下。虽然网上提到批量转换的文章很多,但是感觉都没有介绍清楚,可能大神们都觉得太简单了吧。。。为了同学们能够和我一样少走弯路,我就把我的转换过程详细记录下来。

    发布:2019-05-24 阅读(671)

  • 源文件名长度大于文件系统支持的长度。请尝试将其移动到具有较短路径名称的位置,或者在执行此操作前尝试将其重命名为较短的名称

    源文件名长度大于文件系统支持的长度。请尝试将其移动到具有较短路径名称的位置,或者在执行此操作前尝试将其重命名为较短的名称

    发布:2019-05-07 阅读(534)

  • vscode插件开发,发布

    vscode插件开发过程

    发布:2019-03-27 阅读(667)

  • 什么是第一输入延迟(First Input Delay)

    第一输入延迟(FID)测量用户首次与您的站点交互时的时间(即,当他们单击链接,点击按钮或使用自定义的JavaScript驱动控件时)到浏览器实际能够的时间回应这种互动。

    发布:2019-03-07 阅读(919)

  • vs code非常实用的插件

    推荐一些vs code开发中,非常实用的插件

    发布:2019-03-04 阅读(633)

  • 查看浏览器、操作系统、分辨率等使用份额~

    浏览器、操作系统、分辨率等使用份额~

    发布:2019-02-25 阅读(506)

  • 使用MuMu模拟器和fiddler抓包app

    是不是觉得用手机调试app h5页面很麻烦?是不是不方便抓APP的包?在电脑上可以抓吗,可以,用mumu+fiddler就走向人生巅峰了。。。

    发布:2019-01-24 阅读(499)

  • ESLint的使用

    eslint使用注意事项

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

  • 'define' is not defined.'$' is not defined.

    eslint环境变量设置

    发布:2019-01-02 阅读(868)

  • windows下利用nvm安装node,管理node版本

    nvm是node安装及版本管理工具

    发布:2018-12-29 阅读(681)

  • git cherry-pick使用指南

    **git cherry-pick**可以选择某一个分支中的一个或几个commit(s)来进行操作。例如,假设我们有个稳定版本的分支,叫v2.0,另外还有个开发版本的分支v3.0,我们不能直接把两个分支合并,这样会导致稳定版本混乱,但是又想增加一个v3.0中的功能到v2.0中,这里就可以使用cherry-pick了,其实也就是对已经存在的commit 进行再次提交.

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

  • 找回Git中丢失的Commit(git如何撤消reset操作)

    在使用Git的过程中,有时候会因为一些误操作,比如reset、rebase、merge等。特别是在Commit之后又执行了`git reset --hard HEAD`强制回滚本地记录以及文件到服务器版本,导致本地做的修改全部恢复到Git当前分支的服务器版本,同时自己的Commmit记录也消失了。碰到这种情况,不要慌,我们在Git上做的任何操作都只是在原来之前的操作上做修改,并且会被记录下来保存,也就是说无论你做了什么,对于Git来说都可以进行回滚操作。

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

  • eslint:no-case-declarations

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

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

  • eslint:no-restricted-globals

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

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

  • git bisect 命令教程

    它的原理很简单,就是将代码提交的历史,按照两分法不断缩小定位。所谓"两分法",就是将代码历史一分为二,确定问题出在前半部分,还是后半部分,不断执行这个过程,直到范围缩小到某一次代码提交。

    发布:2018-12-27 阅读(620)

  • git输入不显示,只有光标在闪的问题

    当在git操作log,如`git log`后,然后非正常退出,即使用`CTRL+C`退出,这个时候git输入命令就不会显示了,只有光标,这时怎么办?

    发布:2018-12-26 阅读(648)

  • .gitignore文件配置不生效

    .gitignore文件配置不生效

    发布:2018-12-24 阅读(631)

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

    团队成员多,虽然制定了代码规范,但也不一定能执行的起来,时间一长,各自的代码规范可能又会有出入了。husky解决了这个问题,让代码检查自动化,流程化,如果不符合规范,则不能commit

    发布:2018-12-24 阅读(1860)

  • Sinon 入门,看这篇文章就够了

    当我们在开发前端项目的时候, 很多时候需要根据后端返回的数据来渲染页面, 我们通常使用AJAX发送请求给服务端。当我们开发后端逻辑的时候有时候需要连接数据库,根据从数据库中得到的数据来执行后续的逻辑代码, 或者其他的依赖, 甚至会更加复杂棘手。这些开发都存在一个共同的局限性, 就是会去依赖别的服务, 需要别的系统的支持。 例如, 如果我们使用Ajax请求网络, 您需要有一个服务器来响应对应的请求。对于数据库, 您需要有一个为测试设置的测试数据库

    发布:2018-12-21 来源:segmentfault

  • 使用tree命令生成目录树(目录结构)

    项目目录树是如何做的?手动写吗,不可能的,很简单就是使用tree命令

    发布:2018-12-20 阅读(1328)

  • git修改当前项目用户

    git修改当前项目用户

    发布:2018-12-11 阅读(525)

  • Git修改最近一次已经提交了的commit及push

    Git修改最近一次已经提交了的commit及push

    发布:2018-12-11 阅读(489)

  • git查看某个文件的修改记录

    git查看某个文件的修改记录

    发布:2018-11-30 阅读(538)

  • Git 分支 - 分支的新建与合并

    发布:2018-11-27

  • 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 阅读(1090)

  • ESLint Parsing error: Unexpected token ...

    eslist报错: Unexpected token ...

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

  • git diff忽略某些文件,不比较

    通过设置git-diff driver,结合.gitattributes文件,使git diff命令忽略某些目录。例如我们只希望看到比较src目录,不希望看到比较dist目录

    发布:2018-10-26 阅读(719)

  • git教程(写的比较详细,适合初学者,值得阅读)

    学习这本书的目的是让你了解版本控制,并且尽可能快速简单的掌握 Git。但是和另外一些关于介绍版本控制的图书不一样,阅读这本书并不需要你有很专业的 IT 或者电脑背景知识,它也面向那些编程的初学者,软件构架师,或者是项目经理。在技术方面你也不需要有很多专业知识,我们会以循序渐进的方式帮助你来理解版本控制和掌握 Git。

    发布:2018-10-19 来源:git-tower.com

  • git打包成tar\zip文件

    git如何打包增量文件?

    发布:2018-05-30 阅读(645)

  • github push免密码

    github push时免密码

    发布:2015-01-05 阅读(296)

  • Image Optimizer5.0—非常不错的JPG,GIF,PNG,TIFF图片无损压缩工具

    用了很多图片压缩工具,Image Optimizer5.0图片压缩工具,个人觉得是非常不错的,特别是对JPG图片的压缩,真正能达到不改变图片质量,图片大小压缩达到50%以上。图片压缩能达到50%以上,这对网站性能是很大的提升的。

    发布:2013-10-29 阅读(358)