Skip to content

Commit

Permalink
bump version to 1.0.0 and update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
panstromek committed Mar 28, 2020
1 parent 5634038 commit fc668f0
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 45 deletions.
89 changes: 45 additions & 44 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,59 +1,67 @@
# Quasar Ide Helper

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.

> NOTE
>
> 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 `=""`)
> WARNING
>
> This app extension works only for `@quasar/app - 1.0.0-beta.9` and higher.
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.

This project is still in development, so expect missing features. Contributions welcome ;) (but open an issue first pls)

## Prerequisites
You need to have a Vue plugin installed in the IDE and Quasar 1.0 project of course.

(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.
You need to have some JetBrains IDE (WebStorm, IntelliJ etc.) with Vue plugin installed and Quasar 1.0 project.

## Installation & Usage

## Usage
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`.

Run this in a Quasar project folder
```bash
quasar ext add ide-helper
```

Now you can generate helper files
`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.

**That's it!**
This should be everything you need to do to get started.

Now you should get autocomplete (`ctrl+space`) and quick-doc(`ctrl+q`) for Quasar components, their props, events, prototype injections, directives and CSS classes.

## Manual approach

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.

### Autocomplete files in `.quasar-ide-helper` Folder

You can regenerate these files at any point in time with this command:

```bash
quasar run ide-helper generate
```

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

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 ;) ).

## Better Injection Autocomplete
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:
```vue
methods: {
/**
* @this {Vue}
*/
method () {
this.$q. // You will get correct autocomplete for quasar injections here
}
}
```
Also, feel free to delete this folder anytime, it will get regenerated.

### IDEA project files

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.

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.

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.


## Optional: Live Templates

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.

If you want to generate Live Templates (Snippets), use this command first:

## Live Templates
IDE-helper can also generate Live Templates for all components. If you want to generate Live Templates (Snippets), use this command first:
```bash
quasar run ide-helper templates
```

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

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
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)

### How templates work

Expand All @@ -63,28 +71,21 @@ First type of template is a lowercase component name eg. `qbtn` or `qitem`. Writ

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

## Roadmap + Contributions
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 ;)
## Contributing

A few things off the top of my head
- [x] Autocomplete events as "fake" props - I will do this next release, it's easy
- [ ] Support v-model in templates - will do this, should be straightforward
- [x] Type hints for complex types, enums etc are not implemented, yet
- [ ] 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.
- [ ] 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 ;)
- [ ] 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
- [ ] Icons autocomplete - I'd love this ;) I have an idea how to do it, too ;)
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.

... see issues for more, I will track missing features there
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.

## v0.17 Support
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.

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.

## Thanks
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 ;)

## License

Copyright (c) 2019-present Matyáš Racek
Copyright (c) 2019-present Matyáš Racek & contributors

[MIT License](http://en.wikipedia.org/wiki/MIT_License)
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "quasar-app-extension-ide-helper",
"version": "1.0.0-alpha.3",
"version": "1.0.0",
"description": "Quasar framework extension which enables IDE features like autocomplete by generating helper files for IDE to index.",
"author": "Matyáš Racek",
"license": "MIT",
Expand Down

0 comments on commit fc668f0

Please sign in to comment.