Glint VS Code Extension

A Visual Studio Code extension for Version 2 of the Glint language server.

Setup

See the Glint home page for a more detailed Getting Started guide.

If you want type-checking

1. Add @glint/ember-tsc, @glint/template to your project's devDependencies.
2. Add a jsconfig.json or tsconfig.json

{
  "extends": "@ember/app-tsconfig",
  "compilerOptions": {
    "strict": false,
    "checkJs": false,
    "types": [
      "ember-source/types",
      "@embroider/core/virtual",
      "vite/client",
      "@glint/ember-tsc/types"
    ]
  }
}

{
  "extends": "@ember/app-tsconfig",
  "compilerOptions": {
    "types": [
      "ember-source/types",
      "@embroider/core/virtual",
      "vite/client",
      "@glint/ember-tsc/types"
    ]
  }
}

{
  "extends": "@ember/library-tsconfig",
  "include": ["./src/**/*", "./unpublished-development-types/**/*"],
  "compilerOptions": {
    "allowJs": true,
    "declarationDir": "declarations",
    "rootDir": "./src",
    "types": ["ember-source/types", "@glint/ember-tsc/types"]
  }
}

Monorepos and Other Non-Workspace-Root Installations

If the location where @glint/ember-tsc is installed isn't in the root of your Code workspace, you can inform the extension on a per-workspace basis where to locate the language server in the Glint extension settings under Glint: Library Path.

For example, if your dependency on @glint/ember-tsc were declared in frontend/package.json in your workspace, you could set the library path to ./frontend in order for the extension to be able to locate it.

Usage

The Glint language server incorporates Glimmer templates into TypeScript-powered tooling for a project, enabling them to participate in rich editor features such as:

• Quickinfo on hover:
  
• Go to definition:
  
• Symbol renaming:
  
• Find references:
  
• Completions: