View Autocomplete

What does View Autocomplete mean?

We currently assume, that an Aurelia component has this structure

my-compo.ts/js
my-compo.html

While VSCode already provides lots of intellisense and completion for .ts/js, .html, especially in Aurelia case, can still be tedious to write. This is where "View Autocomplete" comes into play.

For some gifs look at these PRs

• #104 Go to Definition
• #109 in view autocomplete of viewModel vars
• #110 Custom Element and View Model variables in .html

Feel free to open up an issue, if you have some other definitions for an Aurelia component. Please note, that we have composing views in our backlog.

How the extension works under the hood

Does the extension run?

You can check

1. Output
2. In the dropdown choose "Aurelia"
3. • Note there is also "aurelia", but that one is not relevant for us

You can see, that the extension found 3 components (here, I only have 3)

Parsing components

Via this setting (in PR as of 23.Mar 2020), you can specify where the extension should look

	"aurelia.extensionSettings": {
		"pathToAureliaProject": [
			"src", // this is the default
			"some/other/path/one",
			"some/other/path/two",
			"some/other/path/three",
		]
	},

The extension, will parse all of these paths

Eg. following folder structure should work

Project

- /src
- /some
---- /other
-------- /path
------------ /one
------------ /two
------------ /three

Note: just specifying "some" would have been enough. (similar to why "src" enough)

Refreshing your components.

Currently, if you add for example a new bindable to your component, the extension does not pick that up. You would need to reload VSCode for that. (Backlog)