📝

vscode で import を保管する際に 絶対パスを指定する方法

2024/07/27に公開

初期状態

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