Skip to content

Latest commit

 

History

History

vscode

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Glint VS Code Extension

A Visual Studio Code extension for the Glint language server.

Setup

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

  1. Add @glint/core, @glint/template and an appropriate environment package to your project's devDependencies.
  2. Add a "glint" key to your project's tsconfig.json or jsconfig.json specifying your environment and any other relevant configuration.
  3. Consider disabling the built-in vscode.typescript-language-features extension for any workspaces where you use Glint to avoid extraneous diagnostics.
Instructions
  1. In your project workspace, bring up the extensions sidebar Ctrl + Shift + X (macOS: Cmd + Shift + X).
  2. Type @builtin typescript in the extension search box
  3. Click the little gear icon of "TypeScript and JavaScript Language Features", and select "Disable (Workspace)".
  4. Reload the workspace. Glint will now take over TS language services.

Monorepos and Other Non-Workspace-Root Installations

If the location where @glint/core 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.

Input for `glint.libaryPath` in the VS Code configuration editor.

For example, if your dependency on @glint/core 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:
    Signature information being shown on hover for a component's named block
  • Go to definition:
    The definition for a component being shown from the site of its invocation in a template
  • Symbol renaming:
    Fields on an object being renamed and having their other uses updated to match
  • Find references:
    Template snippets where a component is used being shown from the site of its declaration
  • Completions:
    Component arguments being suggested with type information and documentation