有没有办法在不删除 \'react import\' 的情况下在 vs code 中组织导入答案

【问题标题】：Is there a way to oraginize imports in vs code without removing 'react import'有没有办法在不删除 \'react import\' 的情况下在 vs code 中组织导入
【发布时间】：2022-11-28 15:06:20
【问题描述】：

我正在尝试在保存文件时组织导入。所以我更新了 VS 代码设置，以便在保存文件时始终组织导入。

但它也会删除import React from 'react'。

所以反应给了我这个错误'React' must be in scope when using JSX。

例如，

import React from 'react'

const Temp = () => {
  return (
    <div>Temp</div>
  )
}

export default Temp

组织到

const Temp = () => {
  return <div>Temp</div>;
};

export default Temp;

这是我的反应版本 - "react": "^16.13.1"。

【问题讨论】：

您是否考虑过升级反应版本？从版本 17 开始，您可以删除 React import
我无法更新 React。这是必须的，因为有很多其他依赖项
我使用 prettier 在保存时格式化导入（但不删除它们），然后使用 eslint 发出有关导入但未使用的项目的警告。这种方法可能对你有用。
没关系。但我也想在保存时自动删除未使用的导入。也不要从导入中删除 React。

标签： reactjs visual-studio-code

【解决方案1】：

您是否尝试过使用 babel.config.js 文件？

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                modules: false,
            },
        ],
        ['@babel/preset-react', { runtime: 'automatic' }],
    ],
};

我有一个使用它的项目，它工作得很好。

配置参考docs。

【讨论】：

它会影响项目在生产环境中的编译方式吗？
不完全确定。但如果我没记错的话，您可以针对不同的环境自定义它。
我不知道 babel 。我也不能仅仅为了组织一些进口而改变任何重大的事情。