このインポートは値として使用されることはありません。「importsNotusedAsValues」が「error」に設定されているため、「インポートタイプ」を使用する必要があります。

序文

最近、コンピューターシステムを一度更新し、再起動した後、VsCodeプロジェクトを開くと、元の通常のコードに構文プロンプトが大量に表示されることがわかりました。インターネットで検索しましたが、この質問に対する答えは見つかりませんでした。私が最初に遭遇したかどうかはわかりません。この経験をここに記録しておくと、他の誰かが遭遇した場合に、再び穴を踏むことを避けることができます。

1. 問題点

以下の図に示すように、元々は正常だったコードが突然、大量の構文エラープロンプトを報告しました。此导入从不用作值，必须使用 "import type" ，因为 "importsNotUsedAsValues" 设置为 "error"。

画像の説明を追加してください

2、その理由

プロンプトの内容によれば、インポートされたコンポーネントが使用されていないためですが、実際にはコンポーネントは使用されていますが、大文字はで"-"区切られています。

確かに、コードには何も変更を加えていないので、問題はコードの変更によって引き起こされるものではないはずです。そこで、上記のエラーメッセージと合わせて、エディタの特定のプラグインに問題がある可能性が高いと考えたので、関連するプラグインの問題で此导入从不用作值，必须使用 "import type" ，因为 "importsNotUsedAsValues" 设置为 "error"。はないかと推測しました。TypeScript

次に、関連するプラグインを確認して見つけ、最近の更新があるかどうかを確認します。
画像の説明を追加してください

予想どおり、最近更新され、問題が見つかり、次のステップはそれを解決することです。

3、解決策

最初に考えたのはバージョンを下げることでしたが、このオプションをパスしました。このプロンプトが更新されたため、今後新しいプロジェクトで同じ問題が発生する可能性があり、常に下位バージョンのプラグインを使用できるわけではないからです。

方法1

キャメルケースを使用する場合、最初の文字も大文字になります。下図のように、エラーメッセージが消えました。
画像の説明を追加してください

方法 2

コンポーネントを個別に使用しないでください"-"。そのため、上記のヒントはありません。最初の文字が小文字の場合はエラーは報告されませんが、最初の文字には大文字を使用することをお勧めします。

<script setup lang='ts'>
import HeaderTitle from '@/components/headerTitle.vue'
import basicInfo from '@/components/basicInfo.vue'
</script>

<template>
  <HeaderTitle></HeaderTitle>
  <basicInfo></basicInfo>
</template>

方法 3

tsconfig.jsonタイプエラーをチェックしないようにファイル内の構成を変更します。この方法では、各コンポーネントの名前を変更せずに、1 か所を変更するだけでプロンプトの問題を解決できますが、お勧めできません。

compilerOptions-importsNotUsedAsValues構成をに変更するだけでremove、この構成を手動で追加する必要はありません。

tsconfig.json

{
    
    
  "compilerOptions": {
    
    
    "importsNotUsedAsValues": "remove",
  },
}

終わり