Webpack aliases in IntelliJ (WebStorm, PyCharm, etc)

[ajenkins]

I’m looking for a way to make PyCharm (or any IntelliJ-based IDE) aware of the Webpack aliases that Quasar defines, like components, layouts, etc. As it is, when I use an import in one of my .vue files, for example

import MyComponent from 'components/MyComponent'

PyCharm shows a “module not installed” warning, because it doesn’t know about the components alias.

When using Vue CLI, I can set “Preferences/Languages & Frameworks/JavaScript/Webpack/webpack configuration file” to “node_modules/@vue/cli-service/webpack.config.js”, and then the IDE knows about Vue’s Webpack configuration. I don’t see any equivalent for Quasar. I found a few old threads about this topic but they didn’t have any current solution. For example this thread mentions using “/build/webpack.base.conf.js” for this purpose, but that file doesn’t exist in my quasar project.

I know about quasar inspect. One solution I thought of would be if quasar inspect had a --js option which made it output a valid Javascript Webpack config instead of the human readable version it currently displays. Then we could save this file locally to point the IDE at.

[ajenkins]

Answering my own question. I found quasar-ide-helper, which solves this problem. However it seemed to do a bunch of other stuff to my project that I didn’t want or need. In one of the issues for that project I found this solution.

Make this change to your quasar.conf.js.

At the top add

let fs = require('fs')

Then in the extendWebpack function, add:

        if (!fs.existsSync('webpack.config.js')) {
          fs.writeFileSync('webpack.config.js', `
/* eslint-disable */
/**
 * DON'T EDIT THIS FILE!!
 *
 * This file is generated to help IntelliJ resolve Webpack aliases. It is never run in the app.
 * If you need to extend your webpack config, put your code in quasar.conf.js into extendWebpack function
 */
module.exports = ${JSON.stringify(cfg, null, 2)}
`)
        }

You’ll need to run quasar dev or quasar build to trigger this code to be run. Now you can configure the IDE to use “<project_dir>/webpack.config.js” as the webpack config, and it’ll know about your aliases. If you want to update the file because your webpack config has changed, just delete it and re-run quasar dev.