TypeScript layer

• 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

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.

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.

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.

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

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