Angular Language Service as a TypeScript plugin extension for Visual Studio Code
Visual Studio Code extension activating the official Angular Language Service as a TypeScript plugin.
The Language Service is an official tool provided by Angular to give you assistance and error-checking in templates. But it does not do highlighting of inline templates (see below).
This extension just uses the official
Also, this extension is experimental.
Until now, you used the official Angular Language Service extension for VS Code. So why this one?
The legacy official extension launches a duplicate TypeScript process, while this extension launches the same Angular Language Service but as a TypeScript plugin, which is more efficient!
This extension works exactly in the same way as the new official TypeScript TSLint plugin extension from Microsoft.
The downside: if there are errors in
Up to date
As asked and answered in angular/vscode-ng-language-service#298, the legacy official extension is not well maintained, and so have a lot of issues.
This extension is directly using the latest official
By the same author
Follow instructions on Visual Studio Code marketplace, or just search for "Angular Language Service as a TypeScript plugin" by "Cyrille Tuzi" directly inside VS Code extensions panel. Done.
For now, the extension only works with inline templates. Support for external templates is being investigated (see #1 if you want to help).
It's a good occasion to switch to inline templates. Here are some reasons why:
Despite it's not the default configuration in Angular CLI,
Angular is the only major framework doing external templates. Vue and React templates are inlined.
You can add syntax highlighting for inline templates with angular2-inline extension.
Separation of concerns
Separation of concerns doesn't imply separation of files.
Putting a color in your class, that would be breaking the separation of concerns. But guess what: such crazy things are possible with external templates too. ;)
Easier to understand
Externalizing CSS is a good idea, as it's static and can be quite long.
But there is a very direct relation between your HTML template and your TypeScript class, because of data bindings. External templates make it difficult to understand these bindings, especially for new Angular developers.
Single responsibility principle
Finally, I come to what you're screaming at from the beginning: "HTML templates can be long too, so the TypeScript files become a mess with inline templates".
Well, if your templates are long, the mess may be how you program (sorry!), as it usually means you don't respect the single responsibility principle.
Inline templates favors to pay attention to keep components small, which is good, while external templates favors huge components, which is bad.
So yes, the good practice is inline templates! :)
For a new project:
For an existing project, add this in