157 lines
5.2 KiB
Org Mode
157 lines
5.2 KiB
Org Mode
#+TITLE: TypeScript layer
|
|
|
|
#+TAGS: general|js|layer|multi-paradigm|programming
|
|
|
|
[[file:img/TypeScript.png]]
|
|
|
|
* Table of Contents :TOC_5_gh:noexport:
|
|
- [[#description][Description]]
|
|
- [[#features][Features:]]
|
|
- [[#install][Install]]
|
|
- [[#pre-requisites][Pre-requisites]]
|
|
- [[#choosing-a-backend][Choosing a backend]]
|
|
- [[#backends][Backends]]
|
|
- [[#tide][Tide]]
|
|
- [[#notes][Notes]]
|
|
- [[#language-server-protocol][Language Server Protocol]]
|
|
- [[#key-bindings][Key bindings]]
|
|
- [[#typescript-major-mode][Typescript Major Mode]]
|
|
- [[#reference-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.
|
|
|
|
#+BEGIN_SRC emacs-lisp
|
|
(setq-default dotspacemacs-configuration-layers '(typescript))
|
|
#+END_SRC
|
|
|
|
If you need formatting on save:
|
|
|
|
#+BEGIN_SRC emacs-lisp
|
|
(setq-default dotspacemacs-configuration-layers '(
|
|
(typescript :variables
|
|
typescript-fmt-on-save t)))
|
|
#+END_SRC
|
|
|
|
You can choose formatting tool:
|
|
|
|
#+BEGIN_SRC emacs-lisp
|
|
(setq-default dotspacemacs-configuration-layers '(
|
|
(typescript :variables
|
|
typescript-fmt-tool 'typescript-formatter)))
|
|
#+END_SRC
|
|
|
|
Default is ='tide=.
|
|
|
|
** Pre-requisites
|
|
You will need =node.js v0.12.0= or greater.
|
|
|
|
If you want linting run:
|
|
|
|
#+BEGIN_SRC shell
|
|
npm install -g typescript tslint
|
|
#+END_SRC
|
|
|
|
If you want to use typescript-formatter for formatting run:
|
|
|
|
#+BEGIN_SRC shell
|
|
npm install -g typescript-formatter
|
|
#+END_SRC
|
|
|
|
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=:
|
|
|
|
#+BEGIN_SRC elisp
|
|
(setq-default dotspacemacs-configuration-layers '(
|
|
(typescript :variables typescript-backend 'tide)))
|
|
#+END_SRC
|
|
|
|
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:
|
|
|
|
#+BEGIN_SRC elisp
|
|
;;; Directory Local Variables
|
|
;;; For more information see (info "(emacs) Directory Variables")
|
|
((typescript-mode (typescript-backend . lsp)))
|
|
#+END_SRC
|
|
*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:
|
|
|
|
#+BEGIN_SRC emacs-lisp
|
|
(setq-default dotspacemacs-configuration-layers '(
|
|
(typescript :variables
|
|
tide-tsserver-executable "/usr/local/bin/tsserver")))
|
|
#+END_SRC
|
|
|
|
*** Notes
|
|
Make sure to add [[https://github.com/Microsoft/TypeScript/wiki/tsconfig.json][tsconfig.json]] in the project root folder.
|
|
|
|
tsserver mangles output sometimes [[https://github.com/Microsoft/TypeScript/issues/2758][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 [[https://www.github.com/emacs-lsp/lsp-mode/][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 |
|