IntelliJ Support Request

I know at least one of these have been opened in the past, but they didn’t contain much information, nor did they actually offer any suggestions on how to make it work better.

So far, I’m incredibly happy with the quasar-framework, but one things that really gets at my nerves is the lack of auto complete in my IDEs such as IntelliJ. IntelliJ has great integration with webpack, npm, and even VueJs. So, in other front end component libraries I’m working with (e.g., Vuetify) I am able to see auto completion in my *.vue tiles. After a bit of poking around, it’s not that Vuetify is doing something special, they are just exposing the webpack configs in a way that allows IntelliJ to be intelligent.

As I type a component, it automatically appears. Furthermore, it even knows the components properties and custom directives.

How does it do this? Well it’s just understanding webpack, npm and vuejs. The problem with quasar is that it obfuscates all this valuable configuration info. For instance, the base webpack config file is located in ~.nvm/versions/node/v10.5.0/lib/node_modules/quasar-cli/lib/build/webpack-config.js.

I tried just pointing my IntelliJ’s webpack configuration at that file, but it didn’t work. It still couldn’t resole the aliases such as import('layouts/default.vue'). So, I figured I would create a bare bones webpack config (that I knew wasn’t going to be used) just for the aliases.

const path = require('path')
module.exports = {
  entry: path.resolve(__dirname, '.quasar/entry.js'),
  modules: ['node_modules'],
  resolve: {
    alias: {
      src: path.resolve(__dirname, 'src'),
      layouts: path.resolve(__dirname, 'src/layouts'),
      pages: path.resolve(__dirname, 'src/pages'),
      plugins: path.resolve(__dirname, 'src/plugins'),
      router: path.resolve(__dirname, 'src/router'),
      store: path.resolve(__dirname, 'src/store'),
      utils: path.resolve(__dirname, 'src/utils'),
      statics: path.resolve(__dirname, 'src/statics'),
      css: path.resolve(__dirname, 'src/css')
    }
  }
}

This worked. It now could resolve the aliases, but then I ran into another issue. It was telling me that quasar wasn’t exporting the components I was trying to use.

I was looking at the .quasar/quasar.js file

So, I looked into it and these components are exported from quasar-framework. So, I ran yarn install quasar-framework and then changed import {QSpinner, ... } from 'quasar' to import{QSpinner, ...} from 'quasar-framework/src/index.esm and VOILA!

Now, my IDE can resolve the alias paths AND knows about the components and their props, etc.

The problem is that .quasar folder is generated and I’ll lose my changes! Furthermore, I have no idea what the implications of doing this are instead of simply just letting quasar-cli do everything.

Cheers, would love some input!

[rstoenescu]

Hi,

The autocompletion work is on the roadmap, in progress. It will be available soon.

[panstromek]

This is (at least partly) solved by the ide-helper extension 😉