5 lines
13 KiB
JSON
5 lines
13 KiB
JSON
|
{
|
||
|
|
"id": "guide/language-service",
|
||
|
|
"title": "Angular Language Service",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/language-service.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"angular-language-service\">Angular Language Service<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/language-service#angular-language-service\"><i class=\"material-icons\">link</i></a></h1>\n<p>The Angular Language Service provides code editors with a way to get completions, errors,\nhints, and navigation inside Angular templates.\nIt works with external templates in separate HTML files, and also with in-line templates.</p>\n<h2 id=\"features\">Features<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/language-service#features\"><i class=\"material-icons\">link</i></a></h2>\n<p>Your editor autodetects that you are opening an Angular file.\nIt then uses the Angular Language Service to read your <code>tsconfig.json</code> file, find all the\ntemplates you have in your application, and then provide language services for any templates that you open.</p>\n<p>Language services include:</p>\n<ul>\n<li>Completions lists</li>\n<li>AOT Diagnostic messages</li>\n<li>Quick info</li>\n<li>Go to definition</li>\n</ul>\n<h3 id=\"autocompletion\">Autocompletion<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/language-service#autocompletion\"><i class=\"material-icons\">link</i></a></h3>\n<p>Autocompletion can speed up your development time by providing you with\ncontextual possibilities and hints as you type.\nThis example shows autocomplete in an interpolation. As you type it out,\nyou can hit tab to complete.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/language-service/language-completion.gif\" alt=\"autocompletion\" width=\"480\" height=\"72\">\n</div>\n<p>There are also completions within elements. Any elements you have as a component selector will\nshow up in the completion list.</p>\n<h3 id=\"error-checking\">Error checking<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/language-service#error-checking\"><i class=\"material-icons\">link</i></a></h3>\n<p>The Angular Language Service can forewarn you of mistakes in your code.\nIn this example, Angular doesn't know what <code>orders</code> is or where it comes from.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/language-service/language-error.gif\" alt=\"error checking\" width=\"480\" height=\"126\">\n</div>\n<h3 id=\"quick-info-and-navigation\">Quick info and navigation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/language-service#quick-info-and-navigation\"><i class=\"material-icons\">link</i></a></h3>\n<p>The quick-info feature allows you to hover to see where components, directives, modules, and so on come from.\nYou can then click \"Go to definition\" or press F12 to go directly to the definition.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/language-service/language-navigation.gif\" alt=\"navigation\" width=\"392\" height=\"186\">\n</div>\n<h2 id=\"angular-language-service-in-your-editor\">Angular Language Service in your editor<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/language-service#angular-language-service-in-your-editor\"><i class=\"material-icons\">link</i></a></h2>\n<p>Angular Language Service is currently available as an extension for <a href=\"https://code.visualstudio.com/\">Visual Studio Code</a>,\n<a href=\"https://www.jetbrains.com/webstorm\">WebStorm</a>, <a href=\"https://www.sublimetext.com/\">Sublime Text</a> and <a href=\"https://www.eclipse.org/eclipseide/\">Eclipse IDE</a>.</p>\n<h3 id=\"visual-studio-code\">Visual Studio Code<a title=\"Link to this heading\" class=\"head
|
||
|
|
}
|