Get the Newsletter

Visual Studio Code Extension 1.0.0 Release

Posted by Erik Lieben on April 9, 2018

With the latest release of the Visual Studio code extension from 0.3.4 to 1.0.0 we removed the preview tag and moved to a stable version.

In the November 2017 release, the VSCode team added support for semver which allows us to create preview versions of the extension (https://github.com/Microsoft/vscode/issues/39024), but there currently isn't marketplace support for this to enable easy distribution of preview/beta extensions. To work around this and allow us to let you try out experimental features that are currently under development, we added feature toggles to the regular version of the extension. The downside of this is that you might sometimes get updates for the extension without any regular features or fixes in them; only experimental features.

Changes in Version 1.0.0

Bug Fixes

https://github.com/aurelia/vscode-extension/issues/51

A bug for the open related file feature was found and fixed by Hunter Fitzwater. When using the open related file feature it will now open up the related file in the split panel that has focus.

https://github.com/aurelia/vscode-extension/issues/48

Enrico Padovani found a bug which caused string interpolation statements with { } inside of them to be incorrectly highlighted.

https://github.com/aurelia/vscode-extension/issues/54

There have been some issues with the usage of innerHTML and the diagnostic & code fix for invalid casing of attribute names. We've modified the diagnostic and code fix to make use of the attribute map (https://github.com/aurelia/templating-binding/blob/master/src/attribute-map.js#L12,L38) from the template binding package. This allows us to handle the exception cases for attributes in a consistent manner. As an example, this will correct innerHTML to innerhtml instead of inner-h-t-m-l.

A small bug was fixed for this in 1.0.1 after the release of 1.0.0.

Features

https://github.com/aurelia/vscode-extension/issues/55

Syntax highlighting support for the let command was added. It will tokenize the open and close <let> tags with the scope let.element.html.au and colored magenta in the Aurelia VSCode themes.

This feature hasn't been released for the templating engine just yet. We're pushing out the syntax highlighting in advance so we can test it out.

https://github.com/aurelia/vscode-extension/issues/61

Syntax highlighting support for the new from-view and to-view binding commands was added, which will both be scoped with the tag databinding.attribute.html.au and be colored magenta in the Aurelia VSCode themes.

https://github.com/aurelia/vscode-extension/commit/ef771f87b59219c8bddef210a2bb49f86fc1b4c6

Syntax highlighting support for the with attribute was added. It will tokenize the with attribute with the scope with.attribute.html.au and be colored magenta in the Aurelia VSCode themes.

https://github.com/aurelia/vscode-extension/pull/66

A new code fix and diagnostic warning is added to warn about the usage of the deprecated one-way binding command. It will suggest the usage of to-view and provide a code fix (lightbulb) to change it.

https://github.com/aurelia/vscode-extension/issues/53

A new VSCode setting allows you to specify which binding commands you want to get auto-completed. This allows you to configure this yourself for a given workspace/project or modify it in your VSCode user settings for each workspace/project.

By default, it will show all, but if you don't want to get the deprecated one-way as a suggestion anymore (or any of the others) you can simply remove it from the object in the configuration settings.


  "aurelia.autocomplete.bindings.data": [
      {
        "name": "bind",
        "documentation": "automatically chooses the binding mode. Uses two-way binding for form controls and to-view/one-way binding for almost everything else"
      },
      {
        "name": "to-view",
        "documentation": "flows data one direction: from the view-model to the view"
      },
      {
        "name": "one-way",
        "documentation": "[deprecated, use to-view instead] flows data one direction: from the view-model to the view",
        "label": ".one-way='' [deprecated]"
      },
      {
        "name": "from-view",
        "documentation": "flows data one direction: from the view to the view-model"
      },
      {
        "name": "two-way",
        "documentation": "flows data both ways: from view-model to view and from view to view-model"
      },
      {
        "name": "one-time",
        "documentation": "flows data one direction: from the view-model to the view, once"
      }
    ]
  

The latest version of the above snippet can be found by searching in the left panel of the VSCode Settings panel for Aurelia. Click the pencil icon that appears while hovering the section to copy the settings as custom settings for your workspace/user profile.

Experimental

https://github.com/aurelia/vscode-extension/commit/7312b031f82ce5bef464121add709582d514490c

The experimental feature to enable intellisence/smart complete in HTML templates is added behind a feature toggle. You can enable this feature by added the following to your VSCode settings:


    "aurelia.featureToggles": {
      "smartAutocomplete": true
    },
  

At this moment in time, the feature is showing the bare minimum to work and should add suggestions from properties from your ViewModel. When the feature is enabled you are able to go to the command panel (Ctrl+Shift+P) and open up the information panel "show Aurelia view data to the side" on HTML templates to get information about what the extension currently detects in your HTML template.