RubyMineでwebpackのモジュールパスを解決する

    ユースケース

    components
    ├── shared
    │   ├── ErrorMessage.vue
    │   ├── Loading.vue
    │   ├── Pagination.vue

    こんなコンポーネント郡があり、components/shared/Loading.vuecomponents/shared/ErrorMessage.vue を読み込む場合に、@~を使って絶対パス風に書くことがあります。

    import ErrorMessage from '@/components/shared/ErrorMessage.vue'

    この場合に、webpackのモジュールパスの設定をRubyMineにも設定しておくと、Go to DeclarationGo to Implementation でコンポーネント間の移動がしやすくなり、、Auto Completesでコード補完も効くようになります。

    ダミーのwebpack.jsを作成する

    プロジェクトにwebpackの設定ファイルがあればそれを流用できるのですが、 nextjsNuxt.jsGatsbyJS はフレームワーク内部にwebpackの設定ファイルが隠蔽されてしまっているので、パス解決用にダミーのファイルを作成します。

    $ vi .idea/webpack.js

    下記設定をコピー。(sourcePathは適宜変更してください。)

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

    RubyMineの設定に該当ファイルを設定する

    Languages & Frameworks > Javascript > Webpackにファイルのパスを入れる。