130 lines
4 KiB
Org Mode
130 lines
4 KiB
Org Mode
#+TITLE: JSON layer
|
|
|
|
#+TAGS: dsl|layer|markup|programming
|
|
|
|
[[file:img/json.png]]
|
|
|
|
* Table of Contents :TOC_5_gh:noexport:
|
|
- [[#description][Description]]
|
|
- [[#features][Features:]]
|
|
- [[#install][Install]]
|
|
- [[#configuration][Configuration]]
|
|
- [[#web-beautify][web-beautify]]
|
|
- [[#prettier][prettier]]
|
|
- [[#choosing-a-formatter][Choosing a formatter]]
|
|
- [[#formatting-on-save][Formatting on save]]
|
|
- [[#lsp][LSP]]
|
|
- [[#usage][Usage]]
|
|
- [[#reformat][Reformat]]
|
|
- [[#display-navigable-hierarchy][Display navigable hierarchy]]
|
|
- [[#key-bindings][Key bindings]]
|
|
- [[#json-hierarchy][JSON hierarchy]]
|
|
|
|
* Description
|
|
This layer adds support for JSON files with [[https://github.com/joshwnj/json-mode][json-mode]]
|
|
|
|
** Features:
|
|
- Syntax highlighting
|
|
- Auto-completion
|
|
- Get the path to a JSON value with [[https://github.com/Sterlingg/json-snatcher][json-snatcher]]
|
|
- Navigate JSON hierarchy with [[https://github.com/DamienCassou/json-navigator][json-nagivator]]
|
|
- Formatting with [[https://github.com/yasuyk/web-beautify][web-beautify]] or [[https://github.com/prettier/prettier][prettier]]
|
|
|
|
* Install
|
|
To use this configuration layer, add it to your =~/.spacemacs=. You will need to
|
|
add =json= to the existing =dotspacemacs-configuration-layers= list in this file.
|
|
|
|
* Configuration
|
|
To define the default indentation set the variable =js-indent-level=.
|
|
|
|
** web-beautify
|
|
See [[file:../../+tools/web-beautify/README.org][web-beautify layer]] documentation.
|
|
|
|
** prettier
|
|
See [[file:../../+tools/prettier/README.org][prettier layer]] documentation.
|
|
|
|
** Choosing a formatter
|
|
To choose a formatter, set the layer variable =json-fmt-tool=:
|
|
|
|
#+BEGIN_SRC elisp
|
|
(json :variables json-fmt-tool 'web-beautify)
|
|
#+END_SRC
|
|
|
|
The formatter 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
|
|
=prettier= formatter:
|
|
|
|
#+BEGIN_SRC elisp
|
|
;;; Directory Local Variables
|
|
;;; For more information see (info "(emacs) Directory Variables")
|
|
|
|
((json-mode (json-fmt-tool . prettier)))
|
|
#+END_SRC
|
|
|
|
*Note:* you can easily add a directory local variable with ~SPC f v d~.
|
|
|
|
** Formatting on save
|
|
To enable using the selected formatter on save, set the layer variable =json-fmt-on-save=:
|
|
|
|
#+BEGIN_SRC elisp
|
|
(json :variables json-fmt-on-save t)
|
|
#+END_SRC
|
|
|
|
** LSP
|
|
To enable LSP, install the lsp server via npm,
|
|
then set the layer variable =json-backend= to ='lsp= like shown below:
|
|
|
|
#+BEGIN_SRC emacs-lisp
|
|
(json :variables json-backend 'lsp)
|
|
#+END_SRC
|
|
|
|
Alternatively you can also keep the variable on nil, then lsp will be used if lsp
|
|
layer is loaded.
|
|
|
|
Installing the lsp server dependency can be done like this:
|
|
|
|
#+BEGIN_SRC sh
|
|
npm install -g vscode-json-languageserver
|
|
#+END_SRC
|
|
|
|
* Usage
|
|
** Reformat
|
|
~SPC m = =~ will reformat the whole buffer or the active region. Use numerical
|
|
prefix argument to specify a different indentation than =js-indent-level=.
|
|
Use the universal prefix argument to print decoded strings, for instance:
|
|
|
|
#+BEGIN_SRC json
|
|
{"name":"foo\"bar","nick":"foo \u00e4 bar","description":"<pre>\nbaz\n</pre>","home":"/home/foobar"}
|
|
|
|
Will be reformatted:
|
|
|
|
{
|
|
"name": "foo\"bar",
|
|
"nick": "foo ä bar",
|
|
"description": "<pre>
|
|
baz
|
|
</pre>",
|
|
"home": "/home/foobar"
|
|
}
|
|
#+END_SRC
|
|
|
|
** Display navigable hierarchy
|
|
~SPC m T h~ toggle the display of a hierarchy for the whole JSON document or the active
|
|
region. Use the universal prefix argument ~SPC u SPC m T h~ to create the
|
|
hierarchy for the JSON *after* the point.
|
|
|
|
* Key bindings
|
|
|
|
| Key binding | Description |
|
|
|-------------+------------------------------------------------|
|
|
| ~SPC m = =~ | Reformat thing under point |
|
|
| ~SPC m h p~ | Print the path to the json element under point |
|
|
| ~SPC m T h~ | Toggle graphical JSON hierarchy |
|
|
|
|
** JSON hierarchy
|
|
|
|
| Key binding | Description |
|
|
|-------------+----------------------|
|
|
| ~RET~ | Expand/Collapse node |
|
|
| ~TAB~ | Select next node |
|
|
| ~S-TAB~ | Select previous node |
|