📝
vscode で import を保管する際に 絶対パスを指定する方法
初期状態
vscode でコンポーネントを⌘+.
で 補完インポートをする際に、初期状態だと相対パスでのimport になってしまいます。
以下は意図的にネストさせたフォルダに入れて、コンポーネントを⌘+.
でクイックフィックスでimportしています。
相対パスだと非常に長くて分かりにくいことがわかります。
設定方法
vscodeの設定
vscodeの設定を開きます。(⌘+,
がショートカットキーです)
Import Module Specifier
で検索をして、「自動 import の優先パス スタイル」を「non-relative」へ変更します。
config ファイルの設定
以下では ts.config を例にしますが、javascriptの場合は js.config に設定を追加します。
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@components/*": ["components/*"],
"@pages/*": ["pages/*"]
}
baseUrl は、ベースディレクトリを指定します。ここでは "." と設定しており、これはプロジェクトのルートディレクトリを基準にすることを意味します。
そして、"paths"に@components というエイリアスを設定することで、compnentsディレクトリから下っていく形でパスを指定することができます。
このような具合にimport文を絶対パスで指定することができました。
Discussion