spacemacs/layers/+tools/tide/README.org

94 lines
3.4 KiB
Org Mode
Raw Permalink Normal View History

#+TITLE: Tide Layer
#+TAGS: layer|tool
* Table of Contents :TOC_5_gh:noexport:
- [[#description][Description]]
- [[#features][Features:]]
- [[#install][Install]]
- [[#key-bindings][Key bindings]]
- [[#major-mode][Major Mode]]
- [[#reference-major-mode][Reference Major Mode]]
* Description
This layer installs [[https://github.com/ananthakumaran/tide][tide]] package which allows communication with
[[https://github.com/Microsoft/TypeScript/wiki/Standalone-Server-%28tsserver%29][standalone typescript server]] =tsserver= for JavaScript/TypeScript development.
** Features:
- First class support from =tsserver= just like =vscode=: speed and accuracy
2021-01-24 15:05:48 +00:00
- Linter
- Refactor
- Go to definition
- Find references
* Install
See [[https://github.com/ananthakumaran/tide][tide]] for details. First you must have `tsserver` installed in your project
or globally:
#+BEGIN_SRC sh
npm install -g typescript
#+END_SRC
Next enable this layer in your =~/.spacemacs=. You will need to add =tide= to the
existing =dotspacemacs-configuration-layers= list in this file. Then set the
backend variables for JavaScript layer, React layer and TypeScript layer to =tide=
in =dotspacemacs-configuration-layers=
#+BEGIN_SRC elisp
(javascript :variables
javascript-backend 'tide)
(typescript :variables
typescript-backend 'tide)
#+END_SRC
Both =javascript-backend= and =typescript-backend= can be set per project.
When using this layer, make sure [[http://www.typescriptlang.org/docs/handbook/tsconfig-json.html][tsconfig.json]] or [[https://code.visualstudio.com/docs/languages/jsconfig][jsconfig.json]] is present in
the root folder of the project.
Example from emacs tide package: For JavaScript projects you may want to create
=jsconfig.json= in the root folder of your project. =jsconfig.json= is =tsconfig.json=
with allowjs attribute set to true.
#+BEGIN_SRC json
{
"compilerOptions": {
"target": "es2017",
"allowSyntheticDefaultImports": true,
"noEmit": true,
"checkJs": true,
"jsx": "react",
"lib": [ "dom", "es2017" ]
}
}
#+END_SRC
Without this file =tsserver= will pick up current folder as project root.
* Key bindings
** Major Mode
| Key binding | Description |
|-------------+---------------------------------------------------|
| ~SPC m E d~ | add =tslint: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 r~ | 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 r~ | restart server |
| ~SPC m S j~ | create a barebone =jsconfig.json= at project root |
** Reference Major Mode
| Key binding | Description |
|-------------+-------------------------|
| ~C-j~ | find previous reference |
| ~C-k~ | find next reference |
| ~C-l~ | goto reference |