TypeScript layer

Table of ContentsClose

1. Description
- 1.1. Features:
2. Install
3. Backends
- 3.1. Tide
  - 3.1.1. Notes
- 3.2. Language Server Protocol
4. Key bindings

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 eslint or tslint
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 eslint (default) or tslint (deprecated by upstream) for linting:

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

Please be advised that tslint is now deprecated, and should only be used for legacy projects. See TSLint Repo for more.

2.2. Pre-requisites

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

If you want linting with eslint run:

npm install eslint

If you want linting with tslint run:

npm install -g typescript tslint

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

4.3. Running NPM (npm-mode)

Key binding	Description
`SPC m n i`	Run the `npm install` command in the project root
`SPC m n r`	Show a list of available npm scripts, and execute the selected one
`SPC m n c`	Run the `npm clean` command in the project root
`SPC m n s`	Prompt for the name of an npm package, install it and save to `dependencies`
`SPC m n d`	Prompt for the name of an npm package, install it and save to `devDependencies`
`SPC m n n`	Initialize new project
`SPC m n u`	Remove project dependency
`SPC m n l`	List installed project dependencies
`SPC m n p`	Visit project `package.json` file