按Ctrl+S保存时Prettier自动移除tsx文件React导入的修复方法

在.tsx文件中按下CTRL + S保存时，Prettier联动的代码检查逻辑会误判定React导入未在文件中使用，自动移除该导入语句。

这个问题不是Prettier本身的格式化逻辑导致的，基本都是TypeScript/ESLint的自动清理未使用导入规则和保存动作联动触发的，根据自己的项目场景选对应方案即可：

• 项目使用React 17及以上版本的话，官方已经支持新JSX转换，编写JSX不需要显式导入React，直接修改项目根目录tsconfig.json里的JSX编译配置即可：

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

注意：修改tsconfig配置后，在VS Code中按CTRL + Shift + P调出命令面板，执行TypeScript: Restart TS Server重启TS服务，配置才会生效。

• 如果是维护React 17以下的老项目，必须保留顶部的React导入，就修改ESLint配置，给未使用变量检查规则加白名单，跳过对React导入的校验：

// .eslintrc.js 对应规则配置
module.exports = {
  rules: {
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        varsIgnorePattern: "^React$"
      }
    ]
  }
}

• 如果是VS Code自带的组织导入功能在保存时自动触发（这个功能的判断逻辑经常漏掉JSX隐式依赖的React导入），直接打开编辑器设置，搜索editor.codeActionsOnSave，把其中的source.organizeImports项关闭，只保留Prettier的格式化触发动作即可。

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