2015-12-02 14:23:39 +00:00
#+TITLE : TypeScript layer
2015-06-10 16:44:30 +00:00
[[file:img/TypeScript.png ]]
2016-03-31 02:59:55 +00:00
* Table of Contents :TOC_4_gh:noexport:
- [[#description ][Description ]]
- [[#install ][Install ]]
- [[#pre-requisites ][Pre-requisites ]]
- [[#layer ][Layer ]]
- [[#notes ][Notes ]]
- [[#key-bindings ][Key bindings ]]
- [[#typescript-major-mode ][Typescript Major Mode ]]
2016-04-13 03:31:38 +00:00
- [[#reference-major-mode ][Reference Major Mode ]]
2015-06-10 16:44:30 +00:00
* Description
2016-01-25 16:19:39 +00:00
This layer adds support for TypeScript and TSX editing.
2015-06-10 16:44:30 +00:00
This layer provides:
2016-02-17 12:34:30 +00:00
- Eldoc-mode
- Documentation at point
2016-01-25 16:19:39 +00:00
- Auto complete
2016-02-17 12:34:30 +00:00
- Flycheck with linter
2016-01-25 16:19:39 +00:00
- Jump to definition, Jump to type definition
2016-02-17 12:34:30 +00:00
- Find occurrences (Imenu-mode)
2016-01-25 16:19:39 +00:00
- Rename symbol
- tsx mode
2016-02-02 22:49:37 +00:00
- formatting
2016-02-18 21:04:10 +00:00
- TypeScript playground integration
2015-06-10 16:44:30 +00:00
* Install
2016-01-25 16:19:39 +00:00
** Pre-requisites
You will need =node.js v0.12.0= or greater
2016-04-13 03:31:38 +00:00
If you want linting run: =npm install -g typescript= =npm install -g tslint=
2016-02-02 22:49:37 +00:00
2016-05-11 18:57:37 +00:00
If you want to use typescript-formatter for formatting run: =npm install -g typescript-formatter=
2016-01-25 16:19:39 +00:00
For best results, make sure that the =auto-completion= (company) and =html= layers are enabled.
2015-06-10 16:44:30 +00:00
** Layer
2016-01-06 05:21:55 +00:00
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.
2015-06-10 16:44:30 +00:00
2016-01-25 16:19:39 +00:00
#+BEGIN_SRC emacs-lisp
(setq-default dotspacemacs-configuration-layers '(typescript))
#+END_SRC
2015-06-10 16:44:30 +00:00
2016-02-02 22:49:37 +00:00
If you need formatting on save:
#+BEGIN_SRC emacs-lisp
(setq-default dotspacemacs-configuration-layers '(
(typescript :variables
typescript-fmt-on-save t)))
2015-06-10 16:44:30 +00:00
#+END_SRC
2016-05-02 09:11:16 +00:00
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 .
2016-01-25 16:19:39 +00:00
** Notes
2016-02-02 22:49:37 +00:00
This layer uses:
- [[https://github.com/ananthakumaran/tide ][tide ]]
- [[https://github.com/Simplify/flycheck-typescript-tslint ][flycheck-typescript-tslint ]]
2016-05-02 09:11:16 +00:00
- [[https://github.com/vvakame/typescript-formatter ][typescript-formatter ]] - optional.
2016-02-02 22:49:37 +00:00
2016-02-17 12:34:30 +00:00
*The tools use configuration files. You can learn more in their documentation.*
2016-01-25 16:19:39 +00:00
Make sure to add [[https://github.com/Microsoft/TypeScript/wiki/tsconfig.json ][tsconfig.json ]] in the project root folder.
2016-02-18 21:04:10 +00:00
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.
2016-01-25 16:19:39 +00:00
Currently tsserver doesn't pickup tsconfig.json file changes. You might need to restart server after editing it.
2015-06-10 16:44:30 +00:00
* Key bindings
2016-01-25 16:19:39 +00:00
** Typescript Major Mode
2016-02-18 21:04:10 +00:00
| Key Binding | Description |
|-------------+--------------------------------------------------------------|
| ~SPC m =~ | reformat the buffer |
| ~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 r~ | rename symbol |
| ~SPC m s p~ | send selected region or current buffer to the web playground |
| ~SPC m S r~ | restart server |
2016-01-25 16:19:39 +00:00
2016-04-13 03:31:38 +00:00
** Reference Major Mode
2016-01-25 16:19:39 +00:00
2016-02-02 22:49:37 +00:00
| Key Binding | Description |
|-------------+-------------------------|
| ~C-j~ | find previous reference |
| ~C-k~ | find next reference |
| ~C-l~ | goto reference |