Webpack aliases in IntelliJ (WebStorm, PyCharm, etc)



  • 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.



  • 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.


Log in to reply