ReactNative配置git hooks进行eslint检查

为了让我们commit代码时，可以避免提交一些测试性的例如alert、if判断写死等调试性代码，同时增强项目代码的健壮性和可维护性，特引入git hooks配置使得没有通过eslint的规则校验的暂存区文件无法commit的到本地仓库

引入过程

引入依赖包

  yarn add -D [email protected] @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规则自动格式化

1. 安装eslint插件，并启用
2. 在.vscode/settings.json文件中，添加以下配置

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

eslint在项目中的常用配置

在RN配置eslint规则一文中记录了项目中的常见配置，仅供参考

其他

如果在使用中有任何问题和建议，欢迎评论区沟通交流。