ce30353b52
this PR does two things for js-related layers: (i) add option to disable lsp linter javascript-lsp-linter for javascript and react layers typescript-lsp-linter for typescript layer when the value is t, lsp linter will be used in the layer when nil, let flycheck pick up the best linters available such as eslint (ii) when syntax-checking(flycheck) layer is installed, then set next-error-function value in react and javascript layers to nil, so that spacemacs next-error, previous-error work A desciption of this issue can be found at https://github.com/syl20bnr/spacemacs/issues/8078 Co-Authored-By: duianto <otnaiud@gmail.com>
188 lines
6.2 KiB
Org Mode
188 lines
6.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 either tslint or eslint
|
|
- 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=.
|
|
|
|
You can choose either tslint (default) or eslint for linting:
|
|
|
|
#+BEGIN_SRC emacs-lisp
|
|
(setq-default dotspacemacs-configuration-layers '(
|
|
(typescript :variables
|
|
typescript-linter 'tslint)))
|
|
#+END_SRC
|
|
|
|
** Pre-requisites
|
|
You will need =node.js v0.12.0= or greater.
|
|
|
|
If you want linting with tslint run:
|
|
|
|
#+BEGIN_SRC shell
|
|
npm install -g typescript tslint
|
|
#+END_SRC
|
|
|
|
If you want linting with eslint run:
|
|
|
|
#+BEGIN_SRC shell
|
|
npm install eslint
|
|
#+END_SRC
|
|
|
|
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 [[file:../../+lang/javascript/README.org][README]] documentation for more
|
|
details).
|
|
|
|
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.
|
|
|
|
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=.
|
|
|
|
#+BEGIN_SRC emacs-lisp
|
|
(setq-default dotspacemacs-configuration-layers '(
|
|
(typescript :variables
|
|
typescript-backend 'lsp
|
|
typescript-lsp-linter nil)))
|
|
#+END_SRC
|
|
|
|
* 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 |
|