title: VSCode prettier adds `value` to imports in TypeScript React
body: <p>After configuring prettier with the plugin in VSCode the format on save function adds weird <code>value</code> keywords to every non-default import in my React+TS code.</p>
  <p>Like this:</p>
  <pre><code>import { value ApolloProvider } from '@apollo/client';
  import { value BrowserRouter as Router, value Switch } from 'react-router-dom';
  import Routes from './routes';
  import { value client } from './data/apollo-config';
  </code></pre>
  <p>With this TS complains about <code>Duplicate identifier 'value'.ts(2300)</code></p>
  <p>Could anyone help me with this? Not sure why this is happening and how to solve it. Running <code>npx prettier --write someFile</code> doesn't add the <code>value</code> keywords.</p>
  <p>My package.json:</p>
  <pre><code>    &quot;dependencies&quot;: {
          &quot;@apollo/client&quot;: &quot;^3.3.6&quot;,
          &quot;axios&quot;: &quot;^0.21.1&quot;,
          &quot;graphql&quot;: &quot;^15.4.0&quot;,
          &quot;react&quot;: &quot;^17.0.1&quot;,
          &quot;react-dom&quot;: &quot;^17.0.1&quot;,
          &quot;react-router-dom&quot;: &quot;^5.1.2&quot;,
          &quot;react-scripts&quot;: &quot;^4.0.0&quot;
      },
      &quot;devDependencies&quot;: {
          &quot;prettier&quot;: &quot;^2.1.2&quot;,
          &quot;eslint-config-prettier&quot;: &quot;^8.3.0&quot;,
          &quot;eslint-plugin-cypress&quot;: &quot;^2.11.2&quot;,
          &quot;eslint-plugin-prettier&quot;: &quot;^3.1.4&quot;,
          &quot;@types/jest&quot;: &quot;^26.0.15&quot;,
          &quot;@types/lodash.merge&quot;: &quot;^4.6.6&quot;,
          &quot;@types/node&quot;: &quot;^14.14.6&quot;,
          &quot;@types/react&quot;: &quot;^16.9.55&quot;,
          &quot;@types/react-dom&quot;: &quot;^16.9.5&quot;,
          &quot;@types/react-router-dom&quot;: &quot;^5.1.3&quot;,
          &quot;cypress&quot;: &quot;^6.4.0&quot;,
          &quot;http-proxy-middleware&quot;: &quot;^1.0.3&quot;,
          &quot;lodash.merge&quot;: &quot;^4.6.2&quot;,
          &quot;start-server-and-test&quot;: &quot;^1.11.7&quot;,
          &quot;typescript&quot;: &quot;^4.5.4&quot;
      },
  </code></pre>
  <p>tsconfig.json</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;baseUrl&quot;: &quot;.&quot;,
      &quot;target&quot;: &quot;es5&quot;,
      &quot;lib&quot;: [
        &quot;es6&quot;,
        &quot;dom&quot;
      ],
      &quot;allowJs&quot;: true,
      &quot;rootDir&quot;: &quot;src&quot;,
      &quot;skipLibCheck&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;strict&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;isolatedModules&quot;: true,
      &quot;noEmit&quot;: true,
      &quot;jsx&quot;: &quot;react-jsx&quot;,
      &quot;sourceMap&quot;: true,
      &quot;declaration&quot;: true,
      &quot;noUnusedLocals&quot;: true,
      &quot;noUnusedParameters&quot;: true,
      &quot;noFallthroughCasesInSwitch&quot;: true,
      &quot;noImplicitAny&quot;: false
    },
    &quot;include&quot;: [
      &quot;src/**/*&quot;
    ],
    &quot;exclude&quot;: [
      &quot;node_modules&quot;,
      &quot;build&quot;
    ],
    &quot;typeRoots&quot;: [
      &quot;./node_modules/@types&quot;
    ],
    &quot;types&quot;: [
      &quot;react&quot;,
      &quot;react-dom&quot;,
      &quot;react-dom-router&quot;,
      &quot;jest&quot;,
      &quot;node&quot;
    ]
  }
  </code></pre>
  <p>eslintrc.js</p>
  <pre><code>{
      &quot;parser&quot;: &quot;@typescript-eslint/parser&quot;, // Specifies the ESLint parser
      &quot;extends&quot;: [
          &quot;react-app&quot;,
          &quot;plugin:react/recommended&quot;, // Uses the recommended rules from @eslint-plugin-react
          &quot;plugin:@typescript-eslint/recommended&quot;, // Uses the recommended rules from @typescript-eslint/eslint-plugin+   'prettier/@typescript-eslint',  // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
          &quot;plugin:prettier/recommended&quot; // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
      ],
      &quot;plugins&quot;: [&quot;react&quot;, &quot;@typescript-eslint&quot;, &quot;jest&quot;, &quot;cypress&quot;],
      &quot;env&quot;: {
          &quot;browser&quot;: true,
          &quot;es6&quot;: true,
          &quot;jest&quot;: true
      },
      &quot;parserOptions&quot;: {
          &quot;ecmaVersion&quot;: 2018, // Allows for the parsing of modern ECMAScript features
          &quot;sourceType&quot;: &quot;module&quot;, // Allows for the use of imports
          &quot;ecmaFeatures&quot;: {
              &quot;jsx&quot;: true // Allows for the parsing of JSX
          }
      },
      &quot;rules&quot;: {
          &quot;no-unused-vars&quot;: &quot;off&quot;,
          &quot;@typescript-eslint/no-unused-vars&quot;: &quot;off&quot;,
          &quot;@typescript-eslint/explicit-module-boundary-types&quot;: &quot;off&quot;,
          &quot;@typescript-eslint/no-redeclare&quot;: &quot;off&quot;,
          &quot;@typescript-eslint/explicit-function-return-type&quot;: &quot;off&quot;,
          &quot;@typescript-eslint/triple-slash-reference&quot;: &quot;off&quot;
      },
      &quot;settings&quot;: {
          &quot;react&quot;: {
              &quot;version&quot;: &quot;detect&quot; // Tells eslint-plugin-react to automatically detect the version of React to use
          }
      }
  }
  </code></pre>