Getting Started

Setup

First, add @glint/core, @glint/template and an appropriate Glint environment to your project's devDependencies.

Then, add a "glint" key in your tsconfig.json that tells Glint what environment you're working in and, optionally, which files it should include in its typechecking.

See the Configuration page for more details about options you can specify under the "glint" key. For setup instructions specific to your project type, check out the links below:

Using Glint

The @glint/core package includes two executables: glint and glint-language-server.

Glint CLI

The glint CLI can be used to typecheck your project in a similar manner to tsc, but with understanding of how values flow through templates.

You can use the glint executable in CI to ensure you maintain type safety in your templates.

For example, in GitHub Actions you might change this:

- name: Typecheck
  run: npx tsc --noEmit

To this:

- name: Typecheck
  run: npx glint

You can also use the glint command locally with the --watch flag to monitor your project as you work!

Glint Editor Extensions

You can install an editor extension to display Glint's diagnostics inline in your templates and provide richer editor support—typechecking, type information on hover, automated refactoring, and more—powered by glint-language-server:

To get Ember/Glimmer and TypeScript working together, Glint creates a separate TS language service instance patched with Ember-specific support. To prevent invalid or duplicate diagnostics you need to disable VSCode's built-in TS language service in your project's workspace only by following these steps:

  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.

Last updated