React Native项目本地安装ESLint初始化后node_modules中ESLint消失

我之前在React Native项目里配置ESLint时也碰到过一模一样的问题，先复盘下你的操作流程：

• 用react-native init project_name创建初始RN应用
• 执行yarn add eslint --dev本地安装ESLint
• 初始化前执行ls ./node_modules/.bin能看到acorn、eslint、jest-runtime等文件
• 运行./node_modules/.bin/eslint --init（选择Airbnb风格指南、React框架、JSON配置文件）后，./node_modules/.bin/eslint竟然消失了

为什么会出现这种情况？ #

这其实是yarn在处理依赖时的正常（但容易让人困惑）行为：当你运行eslint --init时，ESLint的初始化脚本会自动检测并安装配套的依赖包（比如Airbnb的规则集eslint-config-airbnb、React相关的ESLint插件eslint-plugin-react等）。在这个过程中，yarn会重新解析依赖树，可能会临时移除旧的软链接，或者在安装新依赖时更新node_modules/.bin目录的结构，导致原本的eslint可执行文件暂时“消失”。

快速解决办法 #

1. 重新生成依赖软链接

最简单的办法就是让yarn重新梳理依赖，生成正确的bin目录链接：

yarn install

执行完这个命令后，再去./node_modules/.bin目录下看，eslint应该就回来了。

2. 跳过bin目录，直接用yarn调用ESLint

其实根本不用纠结./node_modules/.bin里的文件，yarn本身就可以帮你找到ESLint的可执行路径，直接运行：

yarn eslint .

就能正常执行ESLint检查了，这个方式比直接调用bin目录的文件更稳定。

3. 手动补全依赖（如果上述方法无效）

有时候初始化脚本可能因为网络问题没安装全依赖，你可以手动安装Airbnb风格需要的所有包：

yarn add eslint eslint-config-airbnb eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-jsx-a11y --dev

安装完成后，./node_modules/.bin/eslint肯定会出现。

4. 彻底清理缓存重装（极端情况）

如果前面的方法都没用，大概率是yarn缓存出问题了，执行以下命令彻底清理后重装：

yarn cache clean
rm -rf node_modules
rm yarn.lock
yarn install

这一步能解决90%以上的依赖相关奇怪问题。

后续优化建议 #

为了以后更方便地使用ESLint，建议在package.json的scripts里添加一条lint命令：

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
}

之后你只需要运行yarn lint就能检查代码，yarn lint:fix还能自动修复一些可修复的代码问题，非常省心。

内容的提问来源于stack exchange，提问作者Gürsel Canbek