如何解决VS Code中JavaScript导入语句自动隐藏的问题

这个问题我之前也碰到过，本质是VS Code内置的语言服务或者你安装的代码检查/格式化插件（比如ESLint），在你保存文件时自动执行了“清理未使用导入”的操作。下面给你几个针对性的解决办法：

1. 调整VS Code内置的TypeScript/JavaScript语言服务设置 #

VS Code自带的JS/TS工具链有自动移除未使用导入的功能，你可以直接关闭它：

• 打开VS Code设置（快捷键Ctrl+,或者Cmd+,）
• 在搜索框输入javascript.format.removeUnusedImports（如果是TS项目就搜typescript.format.removeUnusedImports）
• 将这个选项的开关设置为false

2. 检查ESLint配置（如果项目用了ESLint） #

如果你的项目配置了ESLint，大概率是相关规则在起作用：

• 找到项目根目录的.eslintrc.json（或.eslintrc.js、.eslintrc）配置文件
• 检查是否启用了unused-imports/no-unused-imports或者import/no-unused-modules这类规则
• 把对应的规则设置为"off"即可，比如：

  {
    "rules": {
      "unused-imports/no-unused-imports": "off",
      "import/no-unused-modules": "off"
    }
  }
  

• 另外，no-unused-vars规则也可能影响，你可以给它添加例外，允许未使用的导入：

  {
    "rules": {
      "no-unused-vars": ["error", { "varsIgnorePattern": "^cloneDeep$" }]
    }
  }
  

3. 检查“保存时自动修复”的设置 #

如果开启了VS Code的“保存时自动修复所有ESLint问题”，也会触发导入清理：

• 打开设置，搜索editor.codeActionsOnSave
• 找到source.fixAll.eslint选项，把它设置为false（如果不想完全关闭自动修复，也可以单独排除移除导入的规则）

4. 临时保留导入的小技巧 #

如果只是暂时需要保留这个导入，不想修改全局设置，可以在导入行后面加一个禁用检查的注释：

import cloneDeep from './node_modules/lodash-es/cloneDeep.js' // eslint-disable-line unused-imports/no-unused-imports

这样就能绕过工具的自动清理逻辑，保留这条导入语句。

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