VSCode のプラグインを使用して Prettier を構成すると、保存時のフォーマット機能によって、valueReact+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。
私の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
}
}
}
ベストアンサー1
拡張ホストの再起動私の問題を解決してくれました。
これを行うには、コマンドパレット (デフォルトのキーボードショートカットCtrl⇧Pまたは⌘⇧P) を開き、次を検索します。
開発者: 拡張機能ホストを再起動