You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This extension enables autocomplete and quick doc for various features of Quasar Framework 1.0 in WebStorm and other JetBrains IDEs by generating bunch of files that IDEA can index easily. It was inspired by [laravel-ide-helper](https://github.com/barryvdh/laravel-ide-helper), which does the similar thing for Laravel.
4
+
3
5
> NOTE
4
6
>
5
7
> WebStorm team is working on an official support for Quasar and various other Vue frameworks so this extension will be redundant soon (hopefully). Right now it still provides a bit more features than native support, though ( EG. Quick Doc with `ctrl-q`). Few things are better in native already (Boolean attributes are completed correctly without `=""`)
6
8
7
-
> WARNING
8
-
>
9
-
> This app extension works only for `@quasar/app - 1.0.0-beta.9` and higher.
10
-
11
-
This extension enables autocomplete and quick doc for various features of Quasar Framework 1.0 in WebStorm and other JetBrains IDEs by generating bunch of files that IDEA can index easily. It was inspired by [laravel-ide-helper](https://github.com/barryvdh/laravel-ide-helper), which does the similar thing for Laravel.
12
-
13
-
This project is still in development, so expect missing features. Contributions welcome ;) (but open an issue first pls)
14
9
15
10
## Prerequisites
16
-
You need to have a Vue plugin installed in the IDE and Quasar 1.0 project of course.
17
11
18
-
(Optional) It also helps to add Vue as a library in IDE, because Vue is not listed in Quasar project dependencies (settings->Languages & Frameworks -> JavaScript->Libraries->Add->(name it)-> click `+` -> attach directories-> choose `vue`,`vue-router` and `vuex` in node_modules)->OK away. Now IDEA should correctly resolve Vue methods and tags.
12
+
You need to have some JetBrains IDE (WebStorm, IntelliJ etc.) with Vue plugin installed and Quasar 1.0 project.
13
+
14
+
## Installation & Usage
19
15
20
-
## Usage
16
+
Run this in your Quasar project folder. This will install the extension and generate the helper files. It will also asks if you want to put generated files into `.gitignore`.
21
17
22
-
Run this in a Quasar project folder
23
18
```bash
24
19
quasar ext add ide-helper
25
20
```
26
21
27
-
Now you can generate helper files
22
+
`ide-helper` also generates "fake" webpack config, which is not used by the project but IDEA can resolve imports based on its contents. This file can only be generated during `quasar dev` when we know full config, so expect it to appear after you run your dev server for the first time.
23
+
24
+
**That's it!**
25
+
This should be everything you need to do to get started.
26
+
27
+
Now you should get autocomplete (`ctrl+space`) and quick-doc(`ctrl+q`) for Quasar components, their props, events, prototype injections, directives and CSS classes.
28
+
29
+
## Manual approach
30
+
31
+
Since 1.0 of this extension, you don't need to generate anything by hand anymore. Nevertheless, you might want to generate ide-helper files manually at some point. You can still do that with some commands and maybe some other actions. See below.
32
+
33
+
### Autocomplete files in `.quasar-ide-helper` Folder
34
+
35
+
You can regenerate these files at any point in time with this command:
36
+
28
37
```bash
29
38
quasar run ide-helper generate
30
39
```
31
40
32
-
After that you should get autocomplete (`ctrl+space`) and quick-doc(`ctrl+q`) for Quasar components, their props, prototype injections,directives and CSS classes. Note that you won't get auto-import so you still need to import the files in the `quasar.conf.js` or locally from `quasar` (don't import from helper files, obviously). CSS addons also need to be imported in `quasar.conf.js`.
33
-
34
-
It's because this helper can't recognize if you imported the component globally with `quasar.conf.js` or you need a local import. I am still figuring out how to provide more help in this area but for now it's just this simple. True IDEA based auto-import will need a bit more clever hacking (help appreciated ;) ).
35
-
36
-
## Better Injection Autocomplete
37
-
Injection `$q` is too ambiguous so you won't get such a good autocomplete for it, partly because Vue plugin in IDEA doesn't properly recognize Vue instance in Vue files. You can make the autocomplete correct by annotating method with jsdoc `@this` comment like this:
38
-
```vue
39
-
methods: {
40
-
/**
41
-
* @this {Vue}
42
-
*/
43
-
method () {
44
-
this.$q. // You will get correct autocomplete for quasar injections here
45
-
}
46
-
}
47
-
```
41
+
Also, feel free to delete this folder anytime, it will get regenerated.
42
+
43
+
### IDEA project files
44
+
45
+
One thing this plugin does is generating some files in your `.idea` folder (this is a hidden folder that contains various metadata about projects in JetBrains IDEs). To be more concrete, it will add `vue`,`vue-router` and `vuex` as custom libraries so you get autocomplete for things like `this.$nextTick`, `this.$router` or `this.$store` in component files. Since this is a bit shady thing to do, because these files are internal, it may have no desired effect - we can't really break anything with it, because IDEA doesn't trust this folder for anything critical, but IDE can delete and completely rewrite this folder at any point in time.
46
+
47
+
If you don't have autocomplete for `vue`, `vuex` or `vue-router` instance methods and regenerating with the command above doesn't help, you can add them manually.
48
+
49
+
Go to -> settings -> Languages & Frameworks -> JavaScript -> Libraries -> Add -> (name it) -> click `+` -> attach directories-> choose `vue`,`vue-router` and `vuex` in `node_modules`) -> OK away. Now IDEA should correctly resolve Vue methods and tags.
50
+
51
+
52
+
## Optional: Live Templates
53
+
54
+
IDE-helper can also generate Live Templates for all components. We don't advocate for this feature too much, because we haven't seen many people using it and it didn't prove to be very useful, but it's still there.
55
+
56
+
If you want to generate Live Templates (Snippets), use this command first:
48
57
49
-
## Live Templates
50
-
IDE-helper can also generate Live Templates for all components. If you want to generate Live Templates (Snippets), use this command first:
51
58
```bash
52
59
quasar run ide-helper templates
53
60
```
61
+
54
62
**Important**: This will generate a `.QuasarLiveTemplates.xml` file with live templates. Now you need to place this file in your IDEA config in the `templates` folder and restart the IDE.
55
63
56
-
This is because IDEA doesn't support project-scoped templates unfortunately, so you need to put them inside the global config. For WebStorm it should be something like `./<user>/.WebStorm2018.3/config/jba_config/templates` where `<user>` is your home directory. For other JetBrains IDEs it should be similar. If you are not sure, look at: https://intellij-support.jetbrains.com/hc/en-us/articles/206544519-Directories-used-by-the-IDE-to-store-settings-caches-plugins-and-logs
64
+
This is because IDEA doesn't support project-scoped templates unfortunately, so you need to put them inside the global config. For WebStorm it should be something like `./<user>/.WebStorm2018.3/config/jba_config/templates` where `<user>` is your home directory. For other JetBrains IDEs it should be similar. If you are not sure, look where it is [here](https://intellij-support.jetbrains.com/hc/en-us/articles/206544519-Directories-used-by-the-IDE-to-store-settings-caches-plugins-and-logs)
57
65
58
66
### How templates work
59
67
@@ -63,28 +71,21 @@ First type of template is a lowercase component name eg. `qbtn` or `qitem`. Writ
63
71
64
72
Second type of templates leverages a feature in IDEA (and other editors, too) which allows you to write html tag with class, id and attributes as a CSS selector which will expand into html after `TAB`. So If you use quasar templates that has `t` suffix (like `qbtnt` or `qicont`), they won't expand into HTML but into CSS selector, so you can append more attributes, or classes
65
73
66
-
## Roadmap + Contributions
67
-
This is just an MVP but I can already see bunch of things that can be improved or added. If you have an idea for a feature or a clever IDE hack, post an issue so we can discuss and add it ;)
74
+
## Contributing
68
75
69
-
A few things off the top of my head
70
-
-[x] Autocomplete events as "fake" props - I will do this next release, it's easy
71
-
-[ ] Support v-model in templates - will do this, should be straightforward
72
-
-[x] Type hints for complex types, enums etc are not implemented, yet
73
-
-[ ] Auto-import - this one is pretty tricky, but it may work as some hack with webpack config. I couldn't find a working example yet, though.
74
-
-[ ] Vue, Vuex and Vue-router are not properly recognized (You can add them in settings though), I want to do something cool with these, stay tuned ;)
75
-
-[ ] Limit props in templates - some templates generate bunch of props which are not always useful, so it would be nice to limit them somehow, but its not really clear how. I have a few ideas, though
76
-
-[ ] Icons autocomplete - I'd love this ;) I have an idea how to do it, too ;)
76
+
If you have an idea how to improve this extension or fix a bug, feel free to post an issue or submit PR. You can also look at open issues and implement some ideas for improvements that are listed there, there are few great improvements still possible.
77
77
78
-
... see issues for more, I will track missing features there
78
+
Just bear in mind that this is not an IDE plugin - it's a hack, we can't implement any IDE features, we only give it more food to consume in a clever way. Many feature requests belong more on [JetBrains YouTrack](https://youtrack.jetbrains.com/) and not here.
79
79
80
80
## v0.17 Support
81
-
This extension is primarily focused on v1.0, because it uses its json-api files but not everyone can migrate right away, so I plan to add at least basic support for v0.17, I already have a POC for a generator, but I want to integrate it more smoothly into the project.
81
+
82
+
Supporting older versions would be a lot of work, but if there is a significant need for this, I might try to implement it in the future or more likely help potential contributors - I already built a bit a hacky generator for JSON API files from old Quasar docs. These can be used to generate helper files for ide-helper. It's an old code with some bugs, though and integrating it would probably be non-trivial. Given that users mostly moved to Quasar 1.0, I don't see a reason to burn more time on this.
82
83
83
84
## Thanks
84
85
Thanks to [@jpgilchrist](https://github.com/jpgilchrist) for the research in [this](https://github.com/quasarframework/quasar/issues/2224) issue and useful insights. Very big thanks to @hwb who noticed and wrote [here](https://forum.quasar-framework.org/topic/2322/how-to-import-quasar-components-to-use-vue-code-completion-in-intellij-idea-webstorm/2) how to trick IDEA into indexing the component - I am a bit sad that I haven't found this before as I could do something like this earlier and save myself (and others) a lot of development time. Also big thanks to [Quasar](https://github.com/quasarframework/quasar/) and its contributors ;)
0 commit comments