diff --git a/layers/+lang/typescript/README.org b/layers/+lang/typescript/README.org index 66d5d0435..c659bd640 100644 --- a/layers/+lang/typescript/README.org +++ b/layers/+lang/typescript/README.org @@ -7,10 +7,11 @@ - [[#features][Features:]] - [[#install][Install]] - [[#pre-requisites][Pre-requisites]] - - [[#backend][Backend]] - - [[#layer][Layer]] - - [[#notes][Notes]] -- [[#configuration][Configuration]] + - [[#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]] @@ -19,6 +20,7 @@ This layer adds support for TypeScript and TSX editing. ** Features: +- Multiple backends support: Tide and LSP - Eldoc-mode - Documentation at point - Auto complete @@ -31,29 +33,6 @@ This layer adds support for TypeScript and TSX editing. - TypeScript playground integration * 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= - -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. - -*** Backend -Pick the backend for typescript-mode. Options are =tide= and =lsp=. -#+BEGIN_SRC emacs-lisp -(setq-default dotspacemacs-configuration-layers '( - (typescript :variables - typescript-backend 'tide))) -#+END_SRC - -If you pick =lsp=, you have to install the following dependencies with npm. -#+BEGIN_SRC shell -npm i -g typescript javascript-typescript-langserver flow-language-server typescript-language-server -#+END_SRC - -** 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. @@ -80,25 +59,47 @@ You can choose formatting tool: Default is 'tide . -** Notes -This layer uses: -- [[https://github.com/ananthakumaran/tide][tide]] -- [[https://github.com/flycheck/flycheck][flycheck]] -- [[https://github.com/vvakame/typescript-formatter][typescript-formatter]] - optional. +** Pre-requisites +You will need =node.js v0.12.0= or greater. -*The tools use configuration files. You can learn more in their documentation.* +If you want linting run: -Make sure to add [[https://github.com/Microsoft/TypeScript/wiki/tsconfig.json][tsconfig.json]] in the project root folder. +#+BEGIN_SRC shell +npm install -g typescript tslint +#+END_SRC -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. +If you want to use typescript-formatter for formatting run: -Send to playground requires browser. +#+BEGIN_SRC shell +npm install -g typescript-formatter +#+END_SRC -Currently tsserver doesn't pickup tsconfig.json file changes. You might need to -restart server after editing it. +For best results, make sure that the =auto-completion= (company) and =html= +layers are enabled. -* Configuration +** 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. @@ -111,6 +112,24 @@ For example: 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 have to install the following dependencies with npm. + +#+BEGIN_SRC shell +npm i -g typescript javascript-typescript-langserver flow-language-server typescript-language-server +#+END_SRC + * Key bindings ** Typescript Major Mode