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 @angular/language-service,
but the extension itself is not official.
Also, this extension already works quite well, but it's still 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.
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 @angular/language-service package,
so it's up to date and it will be updated at each new release of @angular/language-service (including patches).
- Angular schematics extension for VS Code (GUI for Angular CLI commands)
- @ngx-pwa/local-storage: 1st Angular library for local storage
- Library @ngx-pwa/offline
- Popular Angular posts on Medium
- Follow updates of this lib on Twitter
- Angular onsite trainings (based in Paris, so the website is in French, but my English bio is here and I'm open to travel)
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.
-
This extension supports Angular >= 6.
-
To avoid noise in non-Angular projects, this extension is only enabled inside an Angular CLI project, ie. with an
angular.jsonfile in workspace. -
If you already have the legacy extension, disable it.
-
This kind of extensions are designed to work with the VS Code version of TypeScript (which is the default configuration). It won't work with a workspace version of TypeScript.
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,
the official @angular/language-service is designed to work with inline templates.
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 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. ;)
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.
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:
ng new --inlineTemplateFor an existing project, add this in angular.json:
{
"projects": {
"yourprojectname": {
"schematics": {
"@schematics/angular:component": {
"inlineTemplate": true
}
}
}
}
}MIT