spacemacs/layers/+lang/typescript/README.org

108 lines
3.6 KiB
Org Mode
Raw Normal View History

#+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]]
- [[#reference-major-mode][Reference Major Mode]]
2015-06-10 16:44:30 +00:00
* Description
This layer adds support for TypeScript and TSX editing.
2015-06-10 16:44:30 +00:00
This layer provides:
- 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
2015-06-10 16:44:30 +00:00
* Install
** Pre-requisites
You will need =node.js v0.12.0= or greater
If you want linting run: =npm install -g typescript= =npm install -g tslint=
2016-05-11 18:57:37 +00:00
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.
2015-06-10 16:44:30 +00:00
** Layer
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
#+BEGIN_SRC emacs-lisp
(setq-default dotspacemacs-configuration-layers '(typescript))
#+END_SRC
2015-06-10 16:44:30 +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 .
** Notes
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.
*The tools use configuration files. You can learn more in their documentation.*
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.
2015-06-10 16:44:30 +00:00
* Key bindings
** Typescript Major Mode
| 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 |
** Reference Major Mode
| Key Binding | Description |
|-------------+-------------------------|
| ~C-j~ | find previous reference |
| ~C-k~ | find next reference |
| ~C-l~ | goto reference |