After configuring prettier with the plugin in VSCode the format on save function adds weird value keywords to every non-default import in my React+TS code.
Like this:
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';
With this TS complains about Duplicate identifier 'value'.ts(2300)
Could anyone help me with this? Not sure why this is happening and how to solve it. Running npx prettier --write someFile doesn't add the value keywords.
My package.json:
"dependencies": {
"@apollo/client": "^3.3.6",
"axios": "^0.21.1",
"graphql": "^15.4.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.1.2",
"react-scripts": "^4.0.0"
},
"devDependencies": {
"prettier": "^2.1.2",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-cypress": "^2.11.2",
"eslint-plugin-prettier": "^3.1.4",
"@types/jest": "^26.0.15",
"@types/lodash.merge": "^4.6.6",
"@types/node": "^14.14.6",
"@types/react": "^16.9.55",
"@types/react-dom": "^16.9.5",
"@types/react-router-dom": "^5.1.3",
"cypress": "^6.4.0",
"http-proxy-middleware": "^1.0.3",
"lodash.merge": "^4.6.2",
"start-server-and-test": "^1.11.7",
"typescript": "^4.5.4"
},
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"target": "es5",
"lib": [
"es6",
"dom"
],
"allowJs": true,
"rootDir": "src",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"sourceMap": true,
"declaration": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": false
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"build"
],
"typeRoots": [
"./node_modules/@types"
],
"types": [
"react",
"react-dom",
"react-dom-router",
"jest",
"node"
]
}
eslintrc.js
{
"parser": "@typescript-eslint/parser", // Specifies the ESLint parser
"extends": [
"react-app",
"plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
"plugin:@typescript-eslint/recommended", // 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
"plugin:prettier/recommended" // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
],
"plugins": ["react", "@typescript-eslint", "jest", "cypress"],
"env": {
"browser": true,
"es6": true,
"jest": true
},
"parserOptions": {
"ecmaVersion": 2018, // Allows for the parsing of modern ECMAScript features
"sourceType": "module", // Allows for the use of imports
"ecmaFeatures": {
"jsx": true // Allows for the parsing of JSX
}
},
"rules": {
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/no-redeclare": "off",
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/triple-slash-reference": "off"
},
"settings": {
"react": {
"version": "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
}
}
}
did you check your extensions? maybe you are using some auto import or some intellisense that has been replaced in some vscode update. Could you check if you have prettier as default formatter in your vscode settings? and check where prettier library is coming from (node_modules, vscode lib, both?) maybe use .prettierrc file too, I have this settings in mine
{
"bracketSpacing": true,
"jsxBracketSameLine": false,
"singleQuote": true,
"trailingComma": "all",
"arrowParens": "avoid",
"endOfLine": "auto",
"proseWrap": "preserve",
"printWidth": 100 //max width of linecode
}I noticed TS 4.5.x in the dependencies. Things like this have been happening with versions of other libraries (e.g. prettier) that don't properly account for this TS change:
// < 4.5.0
import type { ThingType } from 'mylib';
import { Thing2 } from 'mylib';
// >= 4.5.0
import { type ThingType, Thing2 } from 'mylib';
The reason a restart is working for many people is that VSCode may keep a process alive from prior to an update. The process is killed when it closes, then, provided that compatible versions of prettier and ts are installed, it will work on restart. If it's still not working, you'll either have to upgrade prettier or downgrade TS until you can get a working set of dependencies cobbled together.
Restarting the Extension Host solved the problem for me.
To do so, open the Command Palette (default keyboard shortcut Ctrl⇧P or ⌘⇧P) and search for:
Developer: Restart Extension Host
Prettier 2.6.0 is released now and fixes this issue. This was caused by an outdated TypeScript parser. Please upgrade prettier.