前言
eslint它规范的是代码偏向语法层面上的风格。
本篇文章以一个基于react+ts项目,来说明eslint+prettier+husky+lint-staged配置项目代码规范, 可以搭配vscode中的eslint插件,我就不做介绍了。
一、eslint
1、安装在项目中安装eslint
1 | yard add eslint -D |
2、创建eslint配置文件
1 | npx eslint —-init |
获得一个.eslintrc.json文件,根据终端提示,选择项目框架类型,本文是以react+ts,按照提示选择,并生成.eslintrc.json文件
3、创建.eslintignore文件
针对项目结构,定义需要检测的目录,配置.eslintignproore忽略检测的文件目录
4、总结:
- 我们为什么需要eslint?
因为每个人的代码习惯不一样,每个开发人员都需要和他人协作或者项目需要交接给下一代开发者。 保持统一的代码规范,可以极大地提高效率,降低沟通和理解代码的成本。
二、prettier
1、安装prettier
安装:
1 | yarn add prettier -D |
在根目录创建.prettierrc,定义自己的规则
2、创建.prettierignore文件
同eslint一样,prettier也需要对一些特定目录进行格式化,忽略不检查的目录
3、prettier搭配eslint使用
让编译器能报prettier的错
安装:
1 | yarn add eslint-plugin-prettier eslint-config-prettier -D |
介绍:
1、
eslint-config-prettier为了解决eslint和prettier的冲突问题。
2、eslint-plugin-prettier搭配eslint-config-prettier使用,通过eslint-plugin-prettier插件,配置rules中开启”prettier/prettier”: “error”规则。
3、在extends中加入 “plugin:prettier/recommended”,这样就成功配置prettier插入eslint规则了。
完整配置如下:
1 | { |
4、项目中import会很多行,且混在一起,很难区分外部、三方、内部包引入
你可能认识到这里的问题。很难区分什么是所有的第三方和本地(内部)导入。它们没有被分组,似乎到处都是。
解决方案:
安装:
1 | yarn add eslint-plugin-import -D |
完整配置如下:
1 | { |
5、总结
这里需要再强调一点,这个extends数组中的规则,后面的会覆盖前面的,也就是plugin:react/recommended会覆盖掉recommended中的重复部分。
并且这里的规则是由安装依赖引入的,存放在node_modules文件夹中,也就是为了保证其他开发人员代码一致,这里面的文件是不允许改动的。
所以说eslint和prettier的冲突问题,其实说的是这些依赖引入的规则和prettier的冲突!
husky的使用
安装:
1 | yarn add husky -D |
用法:
1 | npm set-script prepare "husky install" |
Add a hook:
1 | npx husky add .husky/pre-commit "npx lint-staged" |
会在.husky目录生成一个pre-commit文件
在package.json中配置husky
lint-staged使用
考虑要使用lint-staged如果这是一个新项目以上的就已经满足要求了,但是如果拿到的项目是一个老项目呢,别人开发了很久,这个时候加入再加入 eslint 规则,全局去检查,会发现一堆报错信息。这个就慌了。修改可能带来其他问题。
这时候就需要用到lint-staged缓存区,只有在缓存区的文件做eslint检测。
为了解决这种问题,我们就需要引入 lint-staged
在package.json中增加配置
1 | { |
到这一步,配置基本就完成了。开始提交测试吧。
根据项目需要,自己定制eslint中的rules和prettier规则。