プロジェクト構成の @alias パスを指定すると、エディターが正しく識別してプロンプトを表示できるようになります。

序文

プロジェクト内のエイリアス パスの構成は、プロジェクトを作成する際の一般的な操作です。利点は次のとおりです。

1. モジュールのパスを簡略化します。プロジェクトでは、一部のファイルが深いディレクトリに存在し、複数回参照する必要がある場合があります。毎回相対パスで参照していると非常に面倒です。プロジェクトで@aliasパスを構成する と、これらの深いディレクトリのパスをエイリアスに単純化でき、コード内でより明確かつ簡潔になります。

2. リファクタリングの効率を向上させます。コンポーネントをあるディレクトリから別のディレクトリに移動するなど、プロジェクト内のファイルのリファクタリングが必要になることがよくあります。エイリアス パスを参照に使用しない場合、コンポーネントが参照されるすべての場所でパスを変更する必要があり、非常に時間と労力がかかります。エイリアス パスを使用する場合、エイリアス パスの構成を変更するだけで済みます。

3. メンテナンスが簡単。大規模なプロジェクトでは、多くの共有コンポーネント、ツール、その他のリソースが存在し、これらのリソースはさまざまな場所で参照する必要があることがよくあります。エイリアス パスを使用しない場合、参照の欠落や定義の重複などの問題が発生する可能性があります。エイリアス パスを使用すると、これらの問題を回避し、プロジェクト内の共有リソースを統一した方法で管理し、コード内での識別と保守が容易になります。

構成

• 速い

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

• ウェブパック

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

編集者の認識

エディターはエイリアスを自動的に認識しません。プロジェクトにjsconfig.json(または) ファイルを追加しtsconfig.json、その中でエイリアスを構成する必要もあります。

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