IntelliJ Support Request

[jpgilchrist]

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!

[jpgilchrist]

Edit: Unfortunately, my little hacking isn't working as great as I thought. It is offering suggestions on finishing q-item or q-item-main as you can see in the above, but it's still not interpreting the properties and I cannot click through the tag to the component definition; not sure what's up there.

[rstoenescu]

Hi,

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

[araimbekoff]

YYYESSSS!
we are waiting! ))

[panstromek]

I know the struggle there... But it seems to be super weird. I tried to play around a bit with it and got to the point where PHPStorm could actually see the component, you could ctrl+click on it and it'd take you to correct definition, but it still couldn't autocomplete props..

Needless to say that Vue integration in Idea is still pretty buggy and incomplete...

What really messed it up was v0.15 with Quasar.conf and its global imports and CLI which leaved out dependencies from package.json, so IDEA just complains about missing them and doesn't provide full intellisense.

[panstromek]

@jpgilchrist I like your approach, you basically did something similar to laravel-ide-helper, which just generates helper file for IDE to index. I think that might be way to go, but lacks some support like auto-generated impors.... or just write IDEA plugin, which I thought of doing but it seems like overkill...

[mstaack]

damn, cant wait for that intellij plugin :)

[jpgilchrist]

@panstromek yeah, it's definitely lacking, but at least it resolves the import aliases

[panstromek]

there are open issues on IntelliJ YouTrack which relates to this. Maybe we get the full autocomplete some day from JetBrains itself..

https://youtrack.jetbrains.com/issue/WEB-31682

note that there is 'asignee' and 'priority: major' ;)

[panstromek]

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

[nothingismagick]

Can this be closed?

[jpgilchrist]

@nothingismagick yes this can be closed