vscode-extension: Binding Autocomplete doesn't work

We’ve also the same problem. AutoComplete doesn’t work.

If I try to open Aurelia view data to side, I get the following message:

No file path found for {Path of the HTML Template)

The command Open Related Aurelia File: View works.

Please let me know if there is anything more I can provide in order to get this fixed. It has to be something trivial, as our entire team (6+ people) can’t get this to work on all our Aurelia projects. I would be happy to organize a screen share if that would help you.

The new update fixes this, all is working fine now 😃 Thank you for improving our productivity!

@hiaux0 Thank you for the update! I can confirm that binding works for my first few tries.

However, autocompletion stops working if there are parsing errors when I load the project for the first time.

For example, I am following the todo quick start tutorial so my app.ts is:

interface Todo {
  description: string;
  done: boolean;
}

export class App {
  heading = "Todos";
  todos: Todo[] = [];
  todoDescription = "";

  addTodo() {
    if (this.todoDescription) {
      this.todos.push({
        description: this.todoDescription,
        done: false
      });
      this.todoDescription = "";
    }
  }

  removeTodo(todo: Todo) {
    let index = this.todos.indexOf(todo);
    if (index !== -1) {
      this.todos.splice(index, 1);
    }
  }
}

And my app.html is:

<template>
  <h1>${heading}</h1>
  <form submit.trigger="addTodo()">
    <input type="text" value.bind="todoDescription" />
    <button type="submit" disabled.bind="!todoDescription">Add Todo</button>
  </form>

  <ul>
    <li repeat.for="todo of todos">
      <input type="checkbox" checked.bind="todo.done" />
      <span css="text-decoration: ${todo.done ? 'line-through' : 'none'}">
        ${todo.description}
      </span>
      <button click.trigger="">Remove</button>
    </li>
  </ul>
</template>

If I load the project with an unfinished template with an unfinished repeat.for:

<template>
  <h1>${heading}</h1>
  <form submit.trigger="addTodo()">
    <input type="text" value.bind="todoDescription" />
    <button type="submit" disabled.bind="!todoDescription">Add Todo</button>
  </form>

  <ul>
    <!-- Instead of <li repeat.for="todo of todos"> I have: -->
    <li repeat.for=""> 
      <input type="checkbox" checked.bind="todo.done" />
      <span css="text-decoration: ${todo.done ? 'line-through' : 'none'}">
        ${todo.description}
      </span>
      <button click.trigger="">Remove</button>
    </li>
  </ul>
</template>

I will get the following error:

Debugger listening on ws://127.0.0.1:6100/1896173f-fbe1-49ae-ab5e-54d1bf6580b5
For help, see: https://nodejs.org/en/docs/inspector
smart auto complete init
>>> 1.1 This is the project's directory:
c:\Users\Xucong\Development\MOOC\learn_aurelia\todo
>>> 1.2. The extension will try to parse Aurelia components inside:
src
>>> 1.3. Eg.
c:\Users\Xucong\Development\MOOC\learn_aurelia\todo/src
failed to parse path c:/Users/Xucong/Development/MOOC/learn_aurelia/todo/src/app.html
"Parser Error: Invalid start of expression at column 0 in expression []"
"Error: Parser Error: Invalid start of expression at column 0 in expression []\n    at ParserImplementation.err (c:\\Users\\Xucong\\Development\\Packages\\vscode-extension\\node_modules\\aurelia-binding\\dist\\commonjs\\aurelia-binding.js:2895:11)\n    at ParserImplementation.parseBindingBehavior (c:\\Users\\Xucong\\Development\\Packages\\vscode-extension\\node_modules\\aurelia-binding\\dist\\commonjs\\aurelia-binding.js:2423:12)\n    at Parser.parse (c:\\Users\\Xucong\\Development\\Packages\\vscode-extension\\node_modules\\aurelia-binding\\dist\\commonjs\\aurelia-binding.js:2387:80)\n    at AureliaHtmlParser.getAttributeCommands (c:\\Users\\Xucong\\Development\\Packages\\vscode-extension\\dist\\src\\server\\FileParser\\Parsers\\AureliaHtmlParser.js:80:48)\n    at AureliaHtmlParser.<anonymous> (c:\\Users\\Xucong\\Development\\Packages\\vscode-extension\\dist\\src\\server\\FileParser\\Parsers\\AureliaHtmlParser.js:35:46)\n    at Generator.next (<anonymous>)\n    at fulfilled (c:\\Users\\Xucong\\Development\\Packages\\vscode-extension\\dist\\src\\server\\FileParser\\Parsers\\AureliaHtmlParser.js:4:58)\n    at processTicksAndRejections (internal/process/task_queues.js:85:5)"
>>> 2. The extension found this many components:
3

And autocompletion will not work until I have a correct template and then reload the window.

@hiaux0

1. I just tested the branch on win10 with an existing project (which worked before), and the custom component lookup is now way more consistent and works much better.

2. There’s still a couple of issues though, as I can’t seem to access the view-model properties in the view at all. The properties are available, but not listed in a consistent manner when doing a bind autocomplete. I’ve tried removing quotes, manually cmd-space, allowing full auto-complete, but nothing.

1. I’m also seeing a lot of undefined for requires which are using ts-config-paths

    "paths": {
      "Services/*": [
        "services/*"
      ],
      "Helpers/*": [
        "helpers/*"
      ],
      "Models/*": [
        "models/*"
      ],
      "Components/*": [
        "components/*"
      ],
      "Dialogs/*": [
        "dialogs/*"
      ],
      "Test/*": [
        "../test/*"
      ]
    }

4. There are some custom components that are not listed when writing <my-view-model ..., but the view-model lookup works when written manually. Ex:

<...-autocomplete

view-model ...-autocomplete

Edit: 4. was a duplicater of #115

Let me know if you want me to change anything in the source files and test stuff 😃

@arnederuwe I think @hiaux0 is working hard on the PR as we speak 😃