ウェブサイト検索

typescript - VSCodeで.vueのインポートに対して「モジュールが見つかりません」というTSエラーが表示されるが、コンパイル時には表示されない

簡単に言うと、vscode はモジュールでこのエラーを表示しています：

モジュール '@/components/SidebarToggleIcon' が見つかりません

しかし、そのようなエラーはコンパイル中には表示されません。

これは VueJS プロジェクトで、SidebarToggleIcon は .vue ファイルで、<script lang="ts"> セクションに TypeScript が含まれています。このエラーは以前、VSCode とコンパイル中に表示されていましたが、@vue/eslint-config-typescript パッケージを追加してからは、今では VSCode のみで表示されます。

Sidebar.vue

<script lang="ts">
// [skip other imports]
import SidebarToggleIcon from '@/components/SidebarToggleIcon';

@Component
export default class LayoutSidebar extends Vue {

    get sidebarCollapsed(): boolean {
        return preferenceModule.sidebarCollapsed;
    }
}

</script>

SidebarToggleIcon.vue

<script lang="ts">
import Vue from 'vue';
import { getModule } from 'vuex-module-decorators';
import Component from "vue-class-component";
import PreferencesStore from '@/store/PreferencesStore';

const preferenceModule: PreferencesStore = getModule(PreferencesStore);

@Component
export default class SidebarToggleIcon extends Vue {

    get sidebarCollapsed(): boolean {
        return preferenceModule.sidebarCollapsed;
    }

    toggle(){
        preferenceModule.ToggleSidebar();
    }
}
</script>

これはなぜですか？どうすれば解決できますか？

編集: これは @ エイリアスの問題ではありません。エイリアスは正しく解決されます（スクリーンショットではエラーの上の行で使用されており、プロジェクト内の他の場所でも使用しています）。相対パスを使用した場合でもこのエラーは表示されます。私の TSConfig には適切な "paths": { "@/*": ["src/*"] } 項目があります。もしこれが原因ならコンパイル時にもこのエラーが発生するはずですが、実際には発生せず、これは VSCode のみで見られる現象です。

回答 #1

私にとって、PhpStormでのVite&Vue 3プロジェクトでは、srcディレクトリにshimsファイルを作成するだけで十分でした。私のコンポーネントのほとんどはscript setupのみを使用しています。

src/shims-vue.d.ts

declare module '*.vue';

回答 #2

私は TypeScript Vue Plugin (Volar) の VS Code 拡張機能をインストールし、問題は解決しました。

このVS Code組み込み拡張機能 TypeScript and JavaScript Language Features を無効にすることを忘れないでください。詳細はこちらで読むことができます。

  1. プロジェクトの作業スペースで、Ctrl+Shift+P（macOSの場合：⌘+Shift+P）でコマンドパレットを表示します。
  2. ビルトインと入力して「拡張機能: ビルトイン拡張機能を表示」を選択します。拡張機能の検索ボックスに typescript と入力します（@builtin プレフィックスは削除しないでください）。

  1. 「TypeScript and JavaScript Language Features」の小さな歯車アイコンをクリックし、「無効にする（ワークスペース）」を選択します。
  2. ワークスペースをリロードしてください。VueまたはTSファイルを開くと、テイクオーバーモードが有効になります。
  3. （任意） webpack や vite（または他のモジュールバンドラー）にカスタムパスエイリアスを設定している場合は、TypeScript サポートのためにパスエイリアスを追加することを忘れないでください
tsconfig.json
{
  "compilerOptions": {
    /* other configs */
    "paths": {
      "@/*": [
        "./src/*" // set path `@/*` as alias of `src/*`
      ]
    },
    /* other configs */
  }
}

回答 #3

これは、TypeScript が webpack のエイリアスを自動的に解決しないためです。

TSがエイリアスを解決するためには、tsconfig.json の compilerOptions.paths にそれらを追加する必要があります:

{  
  "compilerOptions": {
   "paths": {
     "@/*": [
      "./*"
     ]
    }
  }
}

これらの変更後にIDEを再読み込みしてください

回答 #4

Sidebar.vue ファイルで、インポート宣言に ".vue" 拡張子を追加してみてください。例えばこんな感じです:

import SidebarToggleIcon from '@/components/SidebarToggleIcon.vue';

回答 #5

私の環境では、マルチプロジェクトリポジトリ内の <script lang="ts"> Vue コンポーネントでの @/ インポートに対して、VS Code の拡張機能 Vetur がエラーメッセージを出します。

VeturはVS Codeのワークスペースの最上位フォルダーでtsconfig.jsonを探すようです。私のVueアプリは、tsconfig.jsonを含むサブフォルダーにあります。VeturはTypeScriptコンパイラーを呼び出す際に正しい設定を渡しません。

解決策 1（一時的なハック）

Vue プロジェクトのルートフォルダー内から VS Code を起動します。（正しい tsconfig.json があるのと同じフォルダーです。）

code .

tsconfig.json に compilerOptions.paths プロパティに加えて compilerOptions.baseUrl プロパティが含まれていることを確認してください（Vetur FAQ）。

これにより、プロジェクトレベルの .vscode フォルダーにアクセスできなくなるため、VS Code の設定と拡張機能の設定が変更されます。（作業スペースレベルと Vue レベルの .vscode フォルダーを同期させるために、シンボリックリンクを使用しています。）

解決策2（ハック）

私はワークスペースに単一のVueプロジェクトを持っているので、全体のワークスペースフォルダ（Vueアプリケーションフォルダの親フォルダ）に修正されたtsconfig.jsonファイルを追加しました。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["myVue/src/*"]
    }
  },
  "exclude": ["node_modules"]
}

私は "baseUrl" プロパティに加えて "paths" プロパティも必要でした（再び Vetur FAQ）。

変更を適用するために、VS Code を再読み込みしました。

「exclude」プロパティは必ずしも必要ではありませんが、Vetur が TypeScript コンパイラを呼び出して node_modules フォルダで時間を無駄にするのではないかと心配しています。

背景

これは現在オープンになっている Vetur の問題「マルチルートサポート #424」に関連している可能性があります。（概要: Vetur は VS Code のワークスペースのトップレベルフォルダーに正確に 1 つの SPA が存在することを期待しています。）

回答 #6

インポートに .vue 拡張子を追加した後、Vue ファイル用の TypeScript シムを追加することでこのエラーを解決しました。

私は typings/sfc.d.ts に次の内容を含むファイルを作成しました:

declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
}

参考文献: https://github.com/vuejs/vue/issues/5298#issuecomment-453036640

回答 #7

少し遅くなりましたが、VSCodeではワークスペースのバージョンのTSを使用して、ローカルのTSプラグインを読み込むようにしてください。こちらのコメントを参照してください: https://github.com/vitejs/vite/issues/965#issuecomment-717248892

VSCodeでは、ワークスペースのTSバージョンを選択できます：

関連記事