Get the Newsletter
Hello, everyone! My name is Erik Lieben , and I am a developer from the Netherlands working at Effectory and co-organizer of the Aurelia Amsterdam meetup. In my spare time, I will be working as a member of the Aurelia Core Team on the official vscode-extension . With this extension, we hope to provide you with a pleasant development experience when building Aurelia applications using Visual Studio Code .
The extension is currently in Preview. We would love to receive early feedback and hear about the edge cases that may have been missed while writing the syntax highlighter.
Features
The extension currently consists of the following features:
Syntax Highlighting
The syntax highlighting feature exists in 2 parts: a grammar file to define the Aurelia syntax used in HTML files and four customized themes (Dark, Dark+, Light, Light+). The Aurelia grammar extends the default HTML syntax, which allows tools like Emmet to stay working without adding any extra configuration for it.
Visual Studio Code doesn't support extending themes without modifying them, like Atom does, which means that customized themes are required to see the Aurelia syntax highlighted correctly. I have taken the default themes and extended them with the Aurelia coloring scheme, so you can easily enable Aurelia highlighting.
By default, every Aurelia syntax item will color purple, but you could also extend it by creating a custom theme. This allows you to, for example, color data bindings green, generate the compose element yellow and the router-view orange. You can use any other rainbow-like color scheme you like.
Autocomplete
The autocomplete feature helps you to write Aurelia code faster. It will give hints and allow you to tab to complete. The current implementation is a basic first version.
If you look closely, you will see that on the value.bind it gives you extra information about the default binding (two-way), and in the case of the placeholder, it provides the default of one-way. This feature only works on some of the defaults for now and still needs to be extended to support more scenarios.
You can read the full help description of the item to be auto-completed by pressing CTRL+SPACE. For example in the animation below, we show you the information of the delegate which was added to the click event.
This feature currently has an unresolved issue where it doesn't center the cursor between the "" on complete. I hope to resolve that soon.
Executing CLI Commands from the Command Palette
In Visual Studio Code you can press CTRL+P to open the commands palette to have access to all the functionally of VS Code from your keyboard. With this extension installed you will also be able to run the CLI tasks: build, generate, new and test from the same commands palette.
It's as simple as typing au generate and answering the questions to create a custom element. The options are dynamic, so if you would, for example, create a new generator with the cli which is named readme-file-generator and then run the command again, it will show up as a template you could generate.
What
We are looking at integrating the fantastic work done by Core Team Member Meirion Hughes on the aurelia-templating-lint project into Visual Studio Code. When we have this working you will get squiggly lines on lint errors. For example when you have unclosed elements or self-closing elements you will get squiggly lines under them to warn you.
We are also working on stabilizing the core so that it will be easier to add more amazing features later on.
Want to try it?
Open up Visual Studio Code and press CTRL+P and paste the following to install it.
ext install aurelia
Be sure to select one of the themes with Aurelia syntax support after it's installed. You can do this by going to File / Preferences / Color theme and picking one if the following themes:
- Aurelia Dark
- Aurelia Dark+
- Aurelia Light
- Aurelia Light+
Kind regards, Erik Lieben