VSCode preceer가 TypeScript React에서 Import에 '가치'를 추가함

VSCode preceer가 TypeScript React에서 Import에 '가치'를 추가함

VSCode 플러그인으로 더 예쁘게 구성한 후 저장 시 포맷이 이상하게 추가됨value기본이 아닌 모든 Import에 대한 키워드 설정(React+)TS 코드

다음과 같이 합니다.

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';

이 경우 TS는 다음과 같은 불만을 제기합니다.Duplicate identifier 'value'.ts(2300)

누가 나 좀 도와줄래?왜 이런 일이 일어나는지, 어떻게 해결해야 하는지 잘 모르겠다.입니다.npx prettier --write someFile추가되지 않음value키워드를 지정합니다.

제 소포요.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.syslog

{
    "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
        }
    }
}

Extension Host를 재부팅하면 문제가 해결되었습니다.

이를 수행하려면 명령 팔레트(기본 키보드 바로 가기 또는 )를 열고 다음을 검색합니다.

개발자:확장 호스트 재시작

의존관계에서 TS 4.5.x를 발견했습니다.이와 같은 현상은 이 TS의 변경을 제대로 설명하지 못하는 다른 라이브러리 버전(예: 더 예쁜 버전)에서 발생하고 있습니다.

// < 4.5.0
import type { ThingType } from 'mylib';
import { Thing2 } from 'mylib';

// >= 4.5.0
import { type ThingType, Thing2 } from 'mylib';

재시작이 많은 사람들에게 효과가 있는 이유는 VSCode가 업데이트 이전부터 프로세스를 계속 유지할 수 있기 때문입니다.프로세스는 닫힐 때 중지됩니다.따라서 호환되는 버전의 pretty 및 ts가 설치되어 있으면 재시작 시 작동합니다.그런데도 기능하지 않는 경우는, 의존 관계를 정리할 수 있을 때까지 TS를 보다 예쁘게 업그레이드하거나 다운그레이드 할 필요가 있습니다.

이제 Prester 2.6.0이 출시되어 이 문제가 해결되었습니다.이는 오래된 TypeScript 파서가 원인입니다.더 예쁘게 업그레이드 해주세요.

https://prettier.io/blog/2022/03/16/2.6.0.html#typescript

확장 기능을 확인했습니까? 일부 vscode 업데이트에서 대체된 일부 자동 가져오기 또는 일부 인텔리센스를 사용하고 있을 수 있습니다.vscode 설정에서 기본 포메터로 예쁜 것이 있는지 확인해 주시겠습니까?그리고 더 예쁜 라이브러리의 출처를 확인합니다(node_modules, vcode lib, 둘 다).아마 .pretierrc 파일도 사용할 수 있습니다.내 설정에는 이 설정이 있습니다.

{
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "singleQuote": true,
  "trailingComma": "all",
  "arrowParens": "avoid",
  "endOfLine": "auto",
  "proseWrap": "preserve",
  "printWidth": 100 //max width of linecode
}

저는 디폴트로 [Pretty - Code Formator]를 선택했습니다.

'예쁘다'로 변경했을 때 문제가 해결되었습니다.

사용 가능한 포맷터

언급URL : https://stackoverflow.com/questions/70564950/vscode-prettier-adds-value-to-imports-in-typescript-react