ng-helper - Angular.js Language Service

中文文档

Features

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

Additional utilities:

• Navigate from 'templateUrl' to the corresponding HTML file (see demo)
• Navigate from controller name to its implementation file (see demo)
• Navigate to service implementation by its name (see demo)
• Click to search for 'directive'/'component' usage locations (see demo)
• Create components via context menu (see demo)

Requirements

• VS Code 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 activation flag - the plugin will not start without it)
3. Reload VS Code window

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.
• ngProjects: Manually specify AngularJS projects. If not configured, the extension will automatically detect them, but this may sometimes result in incorrect matches when using TypeScript. Each project should include:
  • name: Project name (will be displayed in the extension's status bar to help understand the plugin status)
  • path: The AngularJS project path that defines the working scope for NgHelper. HTML/JS/TS files under this path will be processed by NgHelper.
  • dependOnTsProjectPath (optional): The TypeScript project path that the AngularJS project depends on (usually a directory containing tsconfig.json). This is required if using TypeScript, even if the path is the same as the AngularJS project path.

Example configuration:

{
  "componentStyleFileExt": "less",
  "componentScriptFileExt": "ts", 
  "injectionCheckMode": "count_match",
  "ngProjects": [
    {
      "name": "my-ng-app",
      "path": "src/app",
      "dependOnTsProjectPath": "src"
    }
  ]
}

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.