如何在VS Code中整理导入时保留React导入语句？

你的问题出在React 16.13.1版本还不支持无需导入React即可使用JSX的特性，而VS Code的自动整理导入工具误删了必要的import React from 'react'语句。以下是几种可行的解决方法：

方法1：用ESLint管控导入规则（推荐） #

如果项目使用ESLint，通过配置让它既整理导入顺序，又强制保留React的导入：

1. 修改VS Code的settings.json，把自动整理导入换成ESLint自动修复：

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

2. 在项目根目录的ESLint配置文件（如.eslintrc.js）中添加规则：

module.exports = {
  rules: {
    // 强制JSX文件必须导入React，避免报错
    "react/react-in-jsx-scope": "error",
    // 配置导入排序规则，确保React导入不被移除
    "import/order": [
      "error",
      {
        groups: ["builtin", "external", "internal"],
        pathGroups: [
          {
            pattern: "react",
            group: "external",
            position: "before"
          }
        ],
        pathGroupsExcludedImportTypes: ["react"],
        alphabetize: {
          order: "asc",
          caseInsensitive: true
        }
      }
    ]
  }
};

方法2：给VS Code自带的整理工具加例外 #

如果坚持用VS Code原生的Organize Imports功能，在项目的.vscode/settings.json中添加配置，让它忽略React的导入：

{
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },
  "javascript.preferences.autoImportFileExcludePatterns": ["react"],
  "typescript.preferences.autoImportFileExcludePatterns": ["react"]
}

方法3：用Babel自动注入React导入 #

不想手动写导入语句的话，可以通过Babel插件自动在编译时添加React导入：

1. 安装依赖：

npm install --save-dev babel-plugin-transform-react-jsx

2. 在项目的.babelrc或babel.config.js中配置：

module.exports = {
  plugins: [
    ["transform-react-jsx", { "pragma": "React.createElement" }]
  ]
};

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