spacemacs/layers/+lang/typescript/README.org

TypeScript layer

• Description
  • Features:
• Install
  • Pre-requisites
  • Choosing a backend
• Backends
  • Tide
    • Notes
  • Language Server Protocol
• Key bindings
  • Typescript Major Mode
  • Reference Major Mode

Description

This layer adds support for TypeScript and TSX editing.

Features:

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

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))

If you need formatting on save:

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

You can choose formatting tool:

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

Default is 'tide.

Pre-requisites

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

If you want linting run:

  npm install -g typescript tslint

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.

Choosing a backend

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

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

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.

Backends

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")))

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.

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.

Key bindings

Typescript Major Mode

Key binding	Description
SPC m =	reformat the buffer
SPC m E d	add tslitn-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 u	references
SPC m h h	documentation at point
SPC m r i	organize imports
SPC m r r	rename symbol
SPC m r f	rename file
SPC m s p	send selected region or current buffer to the web playground
SPC m s r	restart server

Reference Major Mode

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