You are viewing the documentation for the develop branch. The documentation for the release version is here .

Table of Contents

TypeScript layer

Table of ContentsClose


1. Description

This layer adds support for TypeScript and TSX editing.

1.1. Features:

  • Multiple backends support: Tide and LSP
  • Eldoc-mode
  • Documentation at point
  • Auto complete
  • Flycheck with either tslint or eslint
  • Jump to definition, Jump to type definition
  • Find occurrences (Imenu-mode)
  • Rename symbol
  • tsx mode
  • formatting
  • TypeScript playground integration

2. Install

To use this configuration layer, add it to your ~/.spacemacs. You will need to add typescript to the existing dotspacemacs-configuration-layers list in this file.

(setq-default dotspacemacs-configuration-layers '(typescript))

2.1. Formatting

If you need formatting on save:

(setq-default dotspacemacs-configuration-layers '(
  (typescript :variables
              typescript-fmt-on-save t)))

You can choose formatting tool:

  • 'tide (default)
  • 'prettier
  • 'typescript-formatter
(setq-default dotspacemacs-configuration-layers '(
  (typescript :variables
              typescript-fmt-tool 'typescript-formatter)))

You can choose either tslint (default) or eslint for linting:

(setq-default dotspacemacs-configuration-layers '(
  (typescript :variables
              typescript-linter 'tslint)))

2.2. Pre-requisites

You will need node.js v0.12.0 or greater.

If you want linting with tslint run:

npm install -g typescript tslint

If you want linting with eslint run:

npm install eslint

We need to use the project-local eslint installation in order to pick up plugins and presets installed locally.

Ensure that the project directory node_modules/.bin is added to the buffer local exec_path (see the Javascript layer README documentation for more details).

If you want to use typescript-formatter for formatting run:

npm install -g typescript-formatter

For best results, make sure that the auto-completion (company) and html layers are enabled.

2.3. Choosing a backend

To choose a default backend set the layer variable typescript-backend:

(setq-default dotspacemacs-configuration-layers '(
  (typescript :variables typescript-backend 'tide)))

Alternatively the lsp backend will be automatically chosen if the layer lsp is used and you did not specify any value for typescript-backend.

Backend can be chosen on a per project basis using directory local variables (files named .dir-locals.el at the root of a project), an example to use the lsp backend:

;;; Directory Local Variables
;;; For more information see (info "(emacs) Directory Variables")
((typescript-mode (typescript-backend . lsp)))

Note: you can easily add a directory local variable with SPC f v d.

3. Backends

3.1. Tide

Tide comes with an embedded Typescript server, it is recommended to use the server intalled by npm instead. To do so set the variable tide-tsserver-executable to the path of the tsserver executable.

For example:

(setq-default dotspacemacs-configuration-layers '(
  (typescript :variables
              tide-tsserver-executable "/usr/local/bin/tsserver")))

3.1.1. Notes

Make sure to add tsconfig.json in the project root folder.

tsserver mangles output sometimes issue - #2758, which will result in json parse error. Try node version 0.12.x if you get this error.

Send to playground requires browser.

Currently tsserver doesn't pickup tsconfig.json file changes. You might need to restart server after editing it.

3.2. Language Server Protocol

You also need to install the Typescript Language Server. Consult the installation command for the desired language server found at lsp-mode for instructions.

By default lsp will explicitly set itself as the linter, if you don't want that, then set the variable typescript-lsp-linter to nil.

(setq-default dotspacemacs-configuration-layers '(
  (typescript :variables
              typescript-backend 'lsp
              typescript-lsp-linter nil)))

4. Key bindings

4.1. Typescript Major Mode

Key binding Description
SPC m = or SPC m = = if using lsp backend reformat the buffer
SPC m E d add tslint:disable-next-line at point
SPC m E e fix thing at point
SPC m g b jump back
SPC m g g jump to entity's definition
SPC m g t jump to entity's type definition
SPC m g r references
SPC m h h documentation at point
SPC m p send selected region or current buffer to the web playground
SPC m r i organize imports
SPC m r r rename symbol
SPC m r f rename file
SPC m S r restart server
SPC m S j create a barebone jsconfig.json at project root

4.2. Reference Major Mode

Key binding Description
C-j find previous reference
C-k find next reference
C-l goto reference

Author: root

Created: 2022-05-24 Tue 11:52