Nuxt.js で ~ や @ を用いた パス表記をIDEに認識させる

Nuxt.js で ~ や @ を用いた パス表記を、 WebStorm などの IDE に認識させる方法を紹介します。

Nuxt.js では Webpack のエイリアスとして ~ や @ が利用可能です。

~@srcDir を指し、 ~~@@rootDir を指します。通常 srcDirrootDir は同じプロジェクトルートを指しますが、 nuxt.config.jssrcDir を明示的に指定する場合、 指定された値がsrcDir となります。

この ~@ の記号を用いたパス記法を用いて ~/components/navbar.vue~/assets/scss/mixins.scss などのように、 .. で親ディレクトリを辿らない パス記法が可能になります。

Nuxt.js では Webpack を用いてこれらのパス記法をエイリアスとして登録しているためにこのような記法が可能になるわけですが、 webpack.config.js が内部で隠蔽されているため、一般的なIDEではこうしたエイリアスの存在を認識することができません。

WebStorm などのように Webpack に対応した IDE でこれらのエイリアスを認識させるためには以下のような形で ダミーの webpack.config.js をプロジェクトルートに生成すると良いでしょう。

// this is dummy webpack config for webstorm

const path = require('path')

module.exports = {
  resolve: {
    extensions: ['.js', '.json', '.vue', '.ts'],
    root: path.resolve(__dirname),
    alias: {
      '@': path.resolve(__dirname),
      '~': path.resolve(__dirname),
    },
  },
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です