代码规范之eslint+prettier实践

eslint：code quality linter
prettier: code formatter

二者结合使用既能达到团队代码协作风格一致(比如空格宽度，缩进等)，又能做代码检查。

今天遇到一个问题：使用eslint时，通常为了约束开发人员，会同时使用pre-commit（利用git hooks），在commit之前如果eslint检查不通过则无法提交。

而在加入prettier的时候，希望能在代码提交的时候prettier能自动格式化我的代码文件，然后再提交。因此加入了husky+lint-staged配和实现。husky也利用了git hooks.

结果这两个git hooks只有一个起到了作用。

为了达到既能自动格式化代码，又能拦截eslint错误提交，可以保留pre-commit，然后将lint-staged加入pre-commit中，此时可以移除husky了。

修改package.json如下：
package.json:

"scripts": {"lint": "node ./node_modules/.bin/eslint src","precommit": "lint-staged"},
"pre-commit": ["precommit","lint"],"lint-staged": {"**/**.{js,json,pcss,md}": ["prettier --write","git add"]},

安装eslint-config-prettier(eslint-plugin-prettier 和 eslint-config-prettier 以及both 中，选择了eslint-config-prettier):

npm i eslint-config-prettier -D

修改.eslintrc，使得format规则冲突时以prettier为准:

{"extends": ["eslint-config-recommended", "prettier"],"rules": {"eqeqeq": "off"}
}

这样就能完美结合了。

代码规范之eslint+prettier实践相关推荐

一套流程教你完成基于vue脚手架的vscode代码规范(vetur+eslint+prettier)配置
在写代码的过程当中一般都会要求生产统一风格的代码.规范,简洁的代码好处就不用我多说了吧.接下来就按我的方法来初始化代码生产环境吧. 配置步骤 1.在vscode中下载三个插件 vetur,Pretti ...
前端代码规范工具ESLint和Prettier
前端代码规范工具ESLint和Prettier 1. ESLint是什么? ESLint 是一个开源的 JavaScript 代码检查工具,由 Nicholas C. Zakas 于2013年6月创建 ...
前端代码规范(es6,eslint,vue)
2019独角兽企业重金招聘Python工程师标准>>> 前端开发规范一.HTML 1.语义化标签 HTML5 提供了很多语义化元素,更好地帮助描述内容.希望你能从这些丰富的标签库中 ...
antd + react model自定义footer_使用ESLint+Prettier规范React+Typescript项目
项目开发过程中,大多数时候我们使用别人搭建好的脚手架编写代码,是项目的参与者.对于一些细节往往被忽略了.其中代码检测本身是一类非常简单的配置,但涉及不同框架和语言组合使用的时候,可能比想象中要困难,本 ...
【总结】1165- 前端团队代码规范最佳实践，个人成长必备！
作者:杨成功原文:https://segmentfault.com/a/1190000040948561 本文从代码规范,代码检查,代码格式化,以及编辑器自动化实现的方向,介绍代码规范统一在我们团队 ...
前端团队代码规范最佳实践，个人成长必备！
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群作者:杨成功原文:https://segmentfault.com/a/119000004 ...
前端团队代码规范最佳实践！
点击上方关注前端技术江湖,一起学习,天天进步作者:杨成功原文:https://segmentfault.com/a/1190000040948561 本文从代码规范,代码检查,代码格式化,以及编 ...
前端通过eslint+prettier+husky统一代码风格
背景多人协作项目,会遇到每个人都有自己的代码风格.所以需要通过工具来统一代码风格. husky是什么? 当您提交或推送时,您可以使用 husky 来检查您的提交消息.运行测试.检查代码等Husky ...
[Client]前端代码规范及最佳实践
前端代码规范及最佳实践 2014/10/29 | 分类: WEB前端, 工具与资源, 开发 | 0 条评论 | 标签: 代码规范, 前端开发, 最佳实践分享到: 62 本文作者: 伯乐在线 - ...

代码规范之eslint+prettier实践

代码规范之eslint+prettier实践相关推荐

最新文章

热门文章