Atom编辑器Prettier自动保存时自动添加useEffect依赖项如何关闭

首先明确：自动修改useEffect依赖数组的功能不属于Prettier的内置能力，这是ESLint的eslint-plugin-react-hooks插件中exhaustive-deps规则开启自动修复后触发的效果。你在Atom中开启的自动保存逻辑应该是同时绑定了Prettier格式化和ESLint自动修复，所以会出现保存后依赖被修改的情况。

解决方案 #

你可以根据自己的需求选择以下任意一种配置方式：

1. 全局完全关闭该规则
   在你的项目ESLint配置文件（通常是.eslintrc.json、.eslintrc.js等）中添加如下规则：

{
  "rules": {
    "react-hooks/exhaustive-deps": "off"
  }
}

配置后该规则的提示和自动修复都会完全关闭。

2. 保留规则提示，仅关闭自动修复
   如果不想完全屏蔽规则的依赖缺失提示，只需要关闭自动补全依赖的功能，ESLint v7及以上版本可以做如下配置：

{
  "rules": {
    "react-hooks/exhaustive-deps": ["warn", { "enableAutofix": false }]
  }
}

3. 针对单个useEffect禁用规则
   如果只是部分场景不需要自动补全依赖，不需要修改全局配置，直接在对应依赖数组上方加忽略注释即可：

useEffect(() => {
    dispatch(fetchListPlants());
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

注：exhaustive-deps规则的设计初衷是避免React Hooks的闭包陷阱，直接全局关闭可能会遗漏潜在的业务bug，建议你根据实际项目场景评估后再调整配置。

内容的提问来源于stack exchange，提问作者Mani