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

Question

在 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
        }
    }
}

Answer 1

你检查过你的扩展了吗？也许您正在使用一些自动导入或一些已在某些 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
}

Answer 2

我注意到 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 可以使进程在更新之前保持活动状态。该进程在关闭时被杀死，然后，如果安装了 prettier 和 ts 的兼容版本，它将在重新启动时运行。如果它仍然无法正常工作，您将不得不升级 prettier 或降级 TS，直到您可以将一组工作的依赖项拼凑在一起。

Answer 3

重新启动扩展主机 解决了我的问题。

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

Developer: Restart Extension Host

Answer 4

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

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

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

VSCode prettier adds `value` to imports in TypeScript React

typescript

reactjs

eslint

visual-studio-code

prettier