質問
Vue.js では、プロジェクト内の相対パスを参照するためのエイリアスとして「@」記号を使用するのが一般的です。VSCode でこのメソッドを使用しても、VSCode がエイリアスを正しく認識できない場合は、プロジェクトでエイリアスが正しく構成されていないことが原因である可能性があります。
解決
1を試してください
VSCode がエイリアスを正しく認識できるようにするには、プロジェクト内の jsconfig.json または tsconfig.json ファイルにエイリアス構成を追加する必要があります。以下に例を示します。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
この構成では @ 記号が src ディレクトリにマップされ、プロジェクトの構造とニーズに応じて調整できます。
さらに、Vue CLI で作成されたプロジェクトを使用している場合、デフォルトでエイリアスが設定されており、vue.config.js ファイルでこれらの設定を表示または変更できます。
構成が完了すると、VSCode はエイリアスを正しく識別できるようになります。
試して2
Viteビルド ツールとして使用している場合は、Vite 設定ファイル vite.config.js でエイリアスを設定する必要があります。
以下は、Vite でエイリアスを設定する方法を示す vite.config.js ファイルの例です。
import path from 'path';
export default {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
};
この例では、Node.js のpathモジュールプロジェクトのルート ディレクトリを取得し、エイリアス @ を src ディレクトリにマップします。
注: Node.js のパス モジュールを使用してファイル パスを処理し、次のコマンドをインストールします。
npm i --save-dev @types/node
エイリアス設定で他のパス エイリアスとパターン マッチングを使用することもできます。次に例を示します。
import path from 'path';
export default {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@components': path.resolve(__dirname, 'src/components'),
'@views/*': path.resolve(__dirname, 'src/views/*')
}
}
};
この例では、2 つのエイリアス @components と @views/* を使用します。ここで、@views/* はワイルドカードを使用して、src/views/ で始まるすべてのファイル パスと一致します。
設定が完了したら、@ 記号をエイリアスとして使用して、Vue.js プロジェクト内の相対パスを参照できます。
3を試してください
VSCode で「Vue Language features (Volar)」拡張機能を使用し、コード フォーマッタとして設定しているが、TypeScript ファイルをフォーマットしようとすると、「FormattingExtension 'Vue Language features (Volar)」のようなものがフォーマッタとして設定されていますが、フォーマットできません。 format 'TypeScript'-files」エラー メッセージは、拡張機能自体が TypeScript ファイルのフォーマットをサポートしていないことが原因で発生する可能性があります。
この問題を解決するには、「Prettier」や「ESLint」など、TypeScript 形式をサポートする他の拡張機能の使用を試みることができます。Prettier 拡張機能をコード フォーマッタとして設定する方法の例を次に示します。
「Prettier」拡張機能をインストールします。VSCode で拡張パネルを開き、「Prettier」を検索してインストールします。
Prettier の依存関係をプロジェクトにインストールします。ターミナルでプロジェクト ディレクトリに移動し、次のコマンドを実行します。
npm install --save-dev prettier
プロジェクトのルート ディレクトリに .prettierrc.js 構成ファイルを作成し、次の内容を追加します。
Copy code
module.exports = {
semi: true,
trailingComma: "all",
singleQuote: true,
printWidth: 120,
tabWidth: 2,
};
この構成ファイルは、Prettier の書式設定ルールを定義します。
VSCode の設定で「Format: Default Formatter」を検索し、「Prettier」を選択します。これにより、Prettier がデフォルトのコード フォーマッタになります。
上記の手順を完了すると、Prettier を使用して VSCode で TypeScript ファイルをフォーマットできるようになります。それでも問題が解決しない場合は、TypeScript の構成が正しいことを確認し、「Vue Language features (Volar)」拡張機能のバージョンをアップグレードまたは変更してみてください。
如果还是报错尝试4
ディレクトリsrcに shims ファイルを作成するだけで十分です。私のコンポーネントのほとんどは、スクリプトのみを使用してセットアップされています。
src/shims-vue.d.ts
declare module '*.vue';