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=\"header-link\" aria-hidden=\"true\" href=\"guide/language-service#visual-studio-code\"><i class=\"material-icons\">link</i></a></h3>\n<p>In <a href=\"https://code.visualstudio.com/\">Visual Studio Code</a>, install the extension from the <a href=\"https://marketplace.visualstudio.com/items?itemName=Angular.ng-template\">Extensions: Marketplace</a>. You can open the marketplace from the editor using the Extensions icon on the left menu pane, or use VS Quick Open (⌘+P on Mac, CTRL+P on Windows) and type \"? ext\". In the marketplace, search for Angular Language Service extension, and click the <strong>Install</strong> button.</p>\n<p>The Visual Studio Code integration with the Angular language service is maintained and distributed by the Angular team.</p>\n<h3 id=\"visual-studio\">Visual Studio<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/language-service#visual-studio\"><i class=\"material-icons\">link</i></a></h3>\n<p>In <a href=\"https://visualstudio.microsoft.com/\">Visual Studio</a>, install the extension from the <a href=\"https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.AngularLanguageService\">Extensions: Marketplace</a>. You can open the marketplace from the editor selecting Extensions on the top menu pane, and then selecting Manage Extensions. In the marketplace, search for Angular Language Service extension, and click the <strong>Install</strong> button.</p>\n<p>The Visual Studio integration with the Angular language service is maintained and distributed by Microsoft with help from the Angular team. Check out the project <a href=\"https://github.com/microsoft/vs-ng-language-service\">here</a></p>\n<h3 id=\"webstorm\">WebStorm<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/language-service#webstorm\"><i class=\"material-icons\">link</i></a></h3>\n<p>In <a href=\"https://www.jetbrains.com/webstorm/\">WebStorm</a>, enable the plugin <a href=\"https://plugins.jetbrains.com/plugin/6971-angular-and-angularjs\">Angular and AngularJS</a>.</p>\n<p>Since WebStorm 2019.1, the <code>@angular/language-service</code> is not required anymore and should be removed from your <code>package.json</code>.</p>\n<h3 id=\"sublime-text\">Sublime Text<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/language-service#sublime-text\"><i class=\"material-icons\">link</i></a></h3>\n<p>In <a href=\"https://www.sublimetext.com/\">Sublime Text</a>, the Language Service supports only in-line templates when installed as a plug-in.\nYou need a custom Sublime plug-in (or modifications to the current plug-in) for completions in HTML files.</p>\n<p>To use the Language Service for in-line templates, you must first add an extension to allow TypeScript, then install the Angular Language Service plug-in. Starting with TypeScript 2.3, TypeScript has a plug-in model that the language service can use.</p>\n<ol>\n<li>Install the latest version of TypeScript in a local <code>node_modules</code> directory:</li>\n</ol>\n<code-example language=\"sh\">\nnpm install --save-dev typescript\n</code-example>\n<ol start=\"2\">\n<li>Install the Angular Language Service package in the same location:</li>\n</ol>\n<code-example language=\"sh\">\nnpm install --save-dev @angular/language-service\n</code-example>\n<ol start=\"3\">\n<li>Once the package is installed, add the following to the <code>\"compilerOptions\"</code> section of your project's <code>tsconfig.json</code>.</li>\n</ol>\n<code-example language=\"json\" header=\"tsconfig.json\">\n \"plugins\": [\n {\"name\": \"@angular/language-service\"}\n ]\n</code-example>\n<ol start=\"4\">\n<li>In your editor's user preferences (<code>Cmd+,</code> or <code>Ctrl+,</code>), add the following:</li>\n</ol>\n<code-example language=\"json\" header=\"Sublime Text user preferences\">\n\"typescript-tsdk\": \"<path to=\"\" your=\"\" folder=\"\">/node_modules/typescript/lib\"\n</path></code-example>\n<p>This allows the Angular Language Service to provide diagnostics and completions in <code>.ts</code> files.</p>\n<h3 id=\"eclipse-ide\">Eclipse IDE<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/language-service#eclipse-ide\"><i class=\"material-icons\">link</i></a></h3>\n<p>Either directly install the \"Eclipse IDE for Web and JavaScript developers\" package which comes with the Angular Language Server included, or from other Eclipse IDE packages, use Help > Eclipse Marketplace to find and install <a href=\"https://marketplace.eclipse.org/content/wild-web-developer-html-css-javascript-typescript-nodejs-angular-json-yaml-kubernetes-xml\">Eclipse Wild Web Developer</a>.</p>\n<h2 id=\"how-the-language-service-works\">How the Language Service works<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/language-service#how-the-language-service-works\"><i class=\"material-icons\">link</i></a></h2>\n<p>When you use an editor with a language service, the editor starts a separate language-service process\nand communicates with it through an <a href=\"https://en.wikipedia.org/wiki/Remote_procedure_call\">RPC</a>, using the <a href=\"https://microsoft.github.io/language-server-protocol/\">Language Server Protocol</a>.\nWhen you type into the editor, the editor sends information to the language-service process to\ntrack the state of your project.</p>\n<p>When you trigger a completion list within a template, the editor first parses the template into an\nHTML <a href=\"https://en.wikipedia.org/wiki/Abstract_syntax_tree\">abstract syntax tree (AST)</a>.\nThe Angular compiler interprets that tree to determine the context: which module the template is part of, the current scope, the component selector, and where your cursor is in the template AST. It can then determine the symbols that could potentially be at that position..</p>\n<p>It's a little more involved if you are in an interpolation.\nIf you have an interpolation of <code>{{data.---}}</code> inside a <code>div</code> and need the completion list after <code>data.---</code>, the compiler can't use the HTML AST to find the answer.\nThe HTML AST can only tell the compiler that there is some text with the characters \"<code>{{data.---}}</code>\".\nThat's when the template parser produces an expression AST, which resides within the template AST.\nThe Angular Language Services then looks at <code>data.---</code> within its context, asks the TypeScript Language Service what the members of <code>data</code> are, and returns the list of possibilities.</p>\n<h2 id=\"more-information\">More information<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/language-service#more-information\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>\n<p>For more in-depth information on the implementation, see the\n<a href=\"https://github.com/angular/angular/blob/master/packages/language-service/src/types.ts\">Angular Language Service API</a>.</p>\n</li>\n<li>\n<p>For more on the design considerations and intentions, see <a href=\"https://github.com/angular/vscode-ng-language-service/wiki/Design\">design documentation here</a>.</p>\n</li>\n<li>\n<p>See also <a href=\"https://www.youtube.com/watch?v=ez3R0Gi4z5A&t=368s\">Chuck Jazdzewski's presentation</a> on the Angular Language Service from <a href=\"https://www.ng-conf.org/\">ng-conf</a> 2017.</p>\n</li>\n</ul>\n\n \n</div>\n\n<!-- links to this doc:\n-->\n<!-- links from this doc:\n - guide/language-service#angular-language-service\n - guide/language-service#angular-language-service-in-your-editor\n - guide/language-service#autocompletion\n - guide/language-service#eclipse-ide\n - guide/language-service#error-checking\n - guide/language-service#features\n - guide/language-service#how-the-language-service-works\n - guide/language-service#more-information\n - guide/language-service#quick-info-and-navigation\n - guide/language-service#sublime-text\n - guide/language-service#visual-studio\n - guide/language-service#visual-studio-code\n - guide/language-service#webstorm\n - https://code.visualstudio.com/\n - https://en.wikipedia.org/wiki/Abstract_syntax_tree\n - https://en.wikipedia.org/wiki/Remote_procedure_call\n - https://github.com/angular/angular/blob/master/packages/language-service/src/types.ts\n - https://github.com/angular/angular/edit/master/aio/content/guide/language-service.md?message=docs%3A%20describe%20your%20change...\n - https://github.com/angular/vscode-ng-language-service/wiki/Design\n - https://github.com/microsoft/vs-ng-language-service\n - https://marketplace.eclipse.org/content/wild-web-developer-html-css-javascript-typescript-nodejs-angular-json-yaml-kubernetes-xml\n - https://marketplace.visualstudio.com/items?itemName=Angular.ng-template\n - https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.AngularLanguageService\n - https://microsoft.github.io/language-server-protocol/\n - https://plugins.jetbrains.com/plugin/6971-angular-and-angularjs\n - https://visualstudio.microsoft.com/\n - https://www.eclipse.org/eclipseide/\n - https://www.jetbrains.com/webstorm\n - https://www.jetbrains.com/webstorm/\n - https://www.ng-conf.org/\n - https://www.sublimetext.com/\n - https://www.youtube.com/watch?v=ez3R0Gi4z5A&t=368s\n-->"
|
|
} |