ng-helper - Angular.js Language Service

中文文档

Features

• [x] ng-* directive auto-completion (see demo)
• [x] Custom directives: tag/attribute auto-completion, hover documentation, go to definition (see demo)
• [x] Custom components: tag/attribute auto-completion, hover documentation, go to definition (see demo)
• [x] Custom filters: auto-completion, hover documentation, go to definition (see demo)
• [x] HTML syntax highlighting with inline HTML support (see demo)
• [x] ✨🆕 Data binding (TypeScript required): auto-completion, type hints on hover, go to definition (see demo)
• [ ] Diagnostics
  • [ ] Angular.js expression diagnostics in HTML
  • [x] Dependency injection validation (see demo)
    • [x] TypeScript code
    • [x] JavaScript code

Additional utilities:

• [x] Navigate from 'templateUrl' to the corresponding HTML file (see demo)
• [x] ✨🆕 Navigate from controller name to its implementation file (see demo)
• [x] ✨🆕 Navigate to service implementation by its name (see demo)
• [x] Click to search for 'directive'/'component' where to use (see demo)
• [x] Create components via context menu (see demo)

Requirements

• vscode 1.80.0+
• TypeScript 3.5.3+ (Some features require this, see above)

Installation

1. Install the extension
2. Create an empty ng-helper.json file in the .vscode directory of your workspace(This file is a plugin startup flag, without which the plugin will not start)
3. Restart vscode

Extension Settings

Create an empty ng-helper.json file in your workspace's .vscode directory. The following configurations are supported:

• componentStyleFileExt: The file extension for component styles (e.g., less, sass). Defaults to css.
• componentScriptFileExt: Choose between js or ts. Defaults to js.
• injectionCheckMode: Dependency injection validation mode. Available options: strict_equal, ignore_case_word_match, count_match, and off (from strictest to no validation). Defaults to count_match.

Known Issues

Auto-completion features (such as in HTML templates) may not work if no TypeScript/JavaScript files have been opened after launching the project. This happens because the TypeScript language service hasn't been initialized. When this occurs, a warning message will appear. Click OK to automatically open a TypeScript/JavaScript file, then return to your HTML file where auto-completion should now work properly.