Aurelia VSCode Extension

Table of contents

• 1. Usage
  • Minimal Setup
  • Configuration
• 2. Features
  • New
  • Missing (from v1)
• 3. More Info

1. Usage

• Have a tsconfig.json in the root

• Rest should be automatic

  • Debugging: In the VSCode Output Panel look for Aurelia v2, there you should see how many components where picked up

    Example.png (expand)

    

Minimal Setup

+ --- root/
|      + --- src/
|      + --- tsconfig.json

Configuration

Project

You are able to configure root, src, and tsconfig.json (cf. Minimal Setup)

• root

  Configs (expand)

    "aurelia.aureliaProject": {
      "rootDirectory": {
        "type": "string",
        "description": "Provide a custom directory for the root."
      }
    },

• src You don't have to name this folder src. Change it via the include field below (as glob).

  Configs (expand)

  ```json
    "aurelia.aureliaProject": {
      "include": {
        "type": "array",
        "description": "Includes for your Aurelia Project",
        "default": ["src"]
      },
      "exclude": {
        "type": "array",
        "description": "Exlcudes for your Aurelia Project",
        "default": [
          "**/node_modules",
          "aurelia_project",
          "**/out",
          "**/build",
          "**/dist"
        ]
      }
    },
  ```
  

• tsconfig.json

  Configs (expand)

    "aurelia.pathToTsConfig": {
      "type": "string",
      "description": "Provide an absolute path to a tsconfig.json"
    }

2. Features

New

• Aurelia v2 compatible

  • Tested against examples/realworld-advanced

• Changes are now immediately available (no need to restart)

• Completions

  • Object completions in View

    • Example

      Completions.gif (expand)

      

    • Possible limitations:

      • Imported types do not work
        • Thus, types from standard (typescript) lib will not complete either.
        • Arrays do not work (eg. myVar[0]. will not show completions)

• Definitions

  • Now, Value Converter can be "go to definition"
    • Limitation: Chained Value Converters only works for first one

• Hover

  Hover.gif (expand)

  

Missing (from v1)

• mousedown.delegate, and alike
  • Currently, you would need to type mousedown, and only after typing . you would get completion for delegate
• Some diagnostics, eg.
  • eg. .one-way="" is deprecated
  • casing
• Aurelia Themes
• Au CLI commands
• .js support. (You would need a tsconfig.json file in the root, which would work then.)

3. More Info

Check out the Architecture document for a skeleton overview.

Acknowledgment

• This extension started as a clone from microsoft / vscode-extension-samples / lsp-embedded-language-service
• The "virtual completions" approach was inspired by Vetur Vetur docs