VSCode prettier 为 TypeScript React 中的导入添加了“价值”答案

【问题标题】：VSCode prettier adds `value` to imports in TypeScript ReactVSCode prettier 为 TypeScript React 中的导入添加了“价值”
【发布时间】：2023-01-12 04:38:31
【问题描述】：

在 VSCode 中使用插件配置 prettier 后，格式保存功能会向我的 React+TS 代码中的每个非默认导入添加奇怪的 value 关键字。

像这样：

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 关键字。

我的 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
        }
    }
}

【问题讨论】：

我今天遇到了同样的问题，通过重新启动编辑器（在我的例子中是 vscode）来修复它
昨天也发生在我身上，今天它没有 - 重启一定有帮助。
遇到同样的问题，关于如何解决它的任何想法？编辑：重新启动 VSCode 修复它
同样的问题，是的，重启 vscode 修复了它，ty
它也发生在更漂亮的 CLI 上。请更新问题。这是 prettier 2.5.1 中的一个问题

标签： reactjs typescript visual-studio-code eslint prettier

【解决方案1】：

重启分机主机为我解决了这个问题。

为此，请打开命令面板（默认键盘快捷键控制键⇧P或者⌘⇧P) 并搜索：

开发商：重启扩展主机

【讨论】：

或者简单地重新启动 IDE（使用 IntelliJ / WebStorm）。
Developer: Reload Window 为我工作

【解决方案2】：

我注意到依赖项中有 TS 4.5.x。其他库（例如 prettier）的版本没有正确考虑此 TS 更改，这样的事情已经发生：

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

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

重启对很多人有效的原因是 VSCode 可能会在更新之前让进程保持活动状态。该进程在关闭时被杀死，然后，如果安装了 prettier 和 ts 的兼容版本，它将在重新启动时运行。如果它仍然无法正常工作，您将不得不升级 prettier 或降级 TS，直到您可以将一组工作的依赖项拼凑在一起。

【讨论】：

降级到更漂亮的 2.4.1 为我解决了这个问题。

【解决方案3】：

Prettier 2.6.0 现已发布并修复了此问题。这是由过时的 TypeScript 解析器引起的。请升级更漂亮。

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

【讨论】：

你有你描述的错误的来源吗？ changelog 没有提到这一点。
他们没有提到这个错误，但他们更新了 TypeScript 解析器以支持解析 TypeScript 4.6，这解决了这个问题。 prettier.io/blog/2022/03/16/2.6.0.html

【解决方案4】：

你检查过你的扩展吗？也许您正在使用一些自动导入或一些已在某些 vscode 更新中被替换的智能感知。你能检查一下你的 vscode 设置中是否有 prettier 作为默认格式化程序吗？并检查更漂亮的库来自哪里（node_modules，vscode lib，两者都有？）也许也使用 .prettierrc 文件，我有这个设置

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

【讨论】：

【解决方案5】：

对我来说，我选择 Prettier - Code formatter 作为默认设置

当我更改为 Prettier - Eslint 时，这解决了问题。

available formatters

【讨论】：