Visual Studio Codeの補完でエイリアスを利用したい

Question

実現したいこと

Visual Studio Codeで補完機能を利用したときにエイリアス機能を利用した状態で（@ を付けて）補完されるようにしたいです。
現在は相対パスで補完されています。

該当のソースコード

app/page.tsx

// 期待する結果
// import { Navbar } from '@/app/components/Navbar'

// 実際の結果
import { Navbar } from './components/Navbar'

export default function Home() {
  return (
    <Navbar />
  )
}

ディレクトリ構造

実際の動作時の動画

試したこと

tsconfig.json に paths が含まれている事を確認しました。

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

補足情報（FW/ツールのバージョンなど）

• Visual Studio Code 1.108.1
• Next.js 16.1.2
• TypeScript 5.9.3

Answer 1

Visual Studio Codeの設定で以下の1行を追加すると解決しました

"typescript.preferences.importModuleSpecifier": "non-relative"

情報源
https://stackoverflow.com/a/66182900/4771485