Después de configurar más bonito con el complemento en VSCode, el formato en la función de guardar agrega palabras clave de value extraño a cada importación no predeterminada en mi código React + TS.
Me gusta esto:
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'; Con este TS se queja del Duplicate identifier 'value'.ts(2300)
¿Podría alguien ayudarme con esto? No estoy seguro de por qué sucede esto y cómo solucionarlo. Ejecutar npx prettier --write someFile no agrega las palabras clave de value .
Mi paquete.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 } } }Noté TS 4.5.x en las dependencias. Cosas como esta han estado sucediendo con versiones de otras bibliotecas (por ejemplo, más bonitas) que no tienen en cuenta correctamente este cambio de TS:
// < 4.5.0 import type { ThingType } from 'mylib'; import { Thing2 } from 'mylib'; // >= 4.5.0 import { type ThingType, Thing2 } from 'mylib';La razón por la que un reinicio funciona para muchas personas es que VSCode puede mantener vivo un proceso antes de una actualización. El proceso se cancela cuando se cierra, luego, siempre que se instalen versiones compatibles de prettier y ts, funcionará al reiniciar. Si aún no funciona, tendrá que actualizar TS más bonito o degradar TS hasta que pueda obtener un conjunto funcional de dependencias improvisadas.
Reiniciar Extension Host resolvió el problema para mí.
Para hacerlo, abra la Paleta de comandos (método abreviado de teclado predeterminado Ctrl ⇧ P o ⌘ ⇧ P ) y busque:
Desarrollador: reiniciar host de extensión
¿Revisaste tus extensiones? tal vez esté utilizando alguna importación automática o algún intellisense que haya sido reemplazado en alguna actualización de vscode. ¿Podría verificar si tiene más bonito como formateador predeterminado en su configuración de vscode? y verifique de dónde proviene la biblioteca más bonita (node_modules, vscode lib, ¿ambos?) Tal vez use el archivo .prettierrc también, tengo esta configuración en la mía
{ "bracketSpacing": true, "jsxBracketSameLine": false, "singleQuote": true, "trailingComma": "all", "arrowParens": "avoid", "endOfLine": "auto", "proseWrap": "preserve", "printWidth": 100 //max width of linecode }