为了让我们commit
代码时,可以避免提交一些测试性的例如alert、if判断写死等调试性代码,同时增强项目代码的健壮性和可维护性,特引入git hooks
配置使得没有通过eslint
的规则校验的暂存区文件无法commit
的到本地仓库
引入过程
引入依赖包
yarn add -D eslint@7.32.0 @react-native-community/eslint-config lint-staged typescript husky
为什么eslint
使用7.32.0
,而不使用最新的8.x
版本
因为eslint 8.x的版本目前和@react-native-community/eslint-config
插件同时使用会出现报错Cannot find module 'eslint/lib/rules/no-unused-expressions'
,对应的问题描述可以参照github其他同学提出的issue,所以,我们先不采用eslint8
而是先使用7.x
版本,使得可以在不做任何其他复杂配置的前提下能和@react-native-community/eslint-config
共同使用
husky
库的作用
husky
库是为了使得我们在git操作的时候,可以很好使用git hooks
的库。在前端项目中,我们目前暂时先使用pre-commit
的钩子,在git commit
的时候,会结合lint-staged
来阻止不符合eslint
规则的代码提交到本地仓库
此时并没有使用的typescript
,为何要添加typescript
这个库?
由于@react-native-community/eslint-config
库的需要,否则会报找不到typescript
的错误
lint-staged的作用
基于我们是在项目迭代过程中引入eslint全面检查,避免在新的feature中还需要去处理所有的历史代码eslint问题的麻烦。(建议在新的feature逐步去标准化,当然,也可以使用eslint --fix 去自动修复,但是这可能带来一些意想不到的问题,需要所有case回归验证,不建议这么危险的操作)
配置钩子
配置和安装husky
# 将 husky install 命令添加到package.json的scripts当中,使得项目install依赖后会立即执行该任务
npm set-script prepare "husky install"
# 立即执行husky install,会创建 .husky文件夹(内部有 .husky/_/husky.sh 文件)
npm run prepare
配置lint-staged
在package.json文件中,对象的顶层结构上添加lint-staged
,里面的内容可以自行配置
"lint-staged": {
"*.{js,jsx}": [
"eslint --fix"
]
},
配置pre-commit
# 使用命令创建pre-commit文件(也可以手动创建),并添加命令
npx husky add .husky/pre-commit "npm run lint-staged"
eslint配置和忽略
eslint配置
创建.eslintrc.js
(json文件也可以)文件,导出的对象配置extends: ['@react-native-community']
,同时可以手动配置rules
.
示例如下:
module.exports = {
root: true,
extends: ['@react-native-community'],
rules: {
// 'off' or 0 - 关闭规则
// 'warn' or 1 - 将规则视为一个警告(不会影响退出码)
// 'error' or 2 - 将规则视为一个错误 (退出码为1)
'no-const-assign': 2, //禁止修改const声明的变量
'no-redeclare': 2, //禁止重复声明变量
},
};
eslint规则
- 项目的eslint规则主要继承
@react-native-community/eslint-config
,关于它的配置可以查看项目的github。 - eslint的规则配置可以在eslint官网查看。(也可以查看github上有人整理的中文翻译ESLint 规则中文翻译版)
eslint忽略
创建.eslintignore
文件,里面配置忽略内容
# 表示忽略a目录下的所有.js文件(包括所有子目录)
a/**/*.js
vscode编辑器保存时根据eslint规则自动格式化
- 安装eslint插件,并启用
- 在
.vscode/settings.json
文件中,添加以下配置
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
eslint在项目中的常用配置
在RN配置eslint规则一文中记录了项目中的常见配置,仅供参考
其他
如果在使用中有任何问题和建议,欢迎评论区沟通交流。