Is there a way to oraginize imports in vs code without removing 'react import'

Question

I am trying to organize imports on saving a file. So I updated vs code settings to always organize imports when saving a file.

But it also removes import React from 'react' .

So react gives me this error 'React' must be in scope when using JSX .

For eg,

import React from 'react'

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

export default Temp

organizes to

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

export default Temp;

This is my react version - "react": "^16.13.1" .

Answer 1

Have you tried using a babel.config.js file?

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

I have a project that uses this and it works pretty fine.

Refer the docs for configuration.