165 lines
6.4 KiB
Org Mode
165 lines
6.4 KiB
Org Mode
#+TITLE: Vue layer
|
|
|
|
#+TAGS: layer|uncategorized
|
|
|
|
[[file:img/vue.png]]
|
|
|
|
* Table of Contents :TOC_5_gh:noexport:
|
|
- [[#description][Description]]
|
|
- [[#features][Features:]]
|
|
- [[#install][Install]]
|
|
- [[#backends][Backends]]
|
|
- [[#dumb][dumb]]
|
|
- [[#lsp][lsp]]
|
|
- [[#optional-configuration][Optional Configuration]]
|
|
- [[#key-bindings][Key bindings]]
|
|
- [[#web-mode][web-mode]]
|
|
- [[#formatting-prettier][Formatting (prettier)]]
|
|
- [[#auto-complete-and-documentation-dumb][Auto-complete and documentation (dumb)]]
|
|
- [[#lsp-key-bindings][Lsp key bindings]]
|
|
|
|
* Description
|
|
Layer for Vue, for working with =.vue= files.
|
|
|
|
Note: This layer creates a derived mode called =vue-mode= on the fly out of
|
|
=web-mode= to handle vue files. It will conflict with the [[https://github.com/AdamNiederer/vue-mode][vue-mode package]], make sure
|
|
you don't use that package together with this layer.
|
|
|
|
** Features:
|
|
- Wholesome features from =web-mode=, especially on template part
|
|
- Better performance
|
|
- On-the-fly syntax checking with =eslint=
|
|
- Proper syntax highlight and indentation with =vue-mode=
|
|
- Two options for backend support for autocompletion and code analysis: =lsp= and =dumb=
|
|
- Code autocompletion with =company-mode=
|
|
- Formatting code with =prettier= layer
|
|
- =evil-matchit= =%= to jump between open and close tags
|
|
- =emmet-mode= and =yasnippet= for code expanding with the =TAB= key
|
|
|
|
* Install
|
|
To use this configuration layer, add it to your =~/.spacemacs=. You will need to
|
|
add =vue= to the existing =dotspacemacs-configuration-layers= list in this
|
|
file.
|
|
|
|
The Vue layer uses the backend that's defined by the variable =vue-backend=. The options are =dumb=
|
|
and =lsp=. Default is =dumb= backend. To choose a default backend set the layer
|
|
variable =vue-backend=:
|
|
|
|
#+BEGIN_SRC elisp
|
|
(vue :variables vue-backend 'lsp)
|
|
#+END_SRC
|
|
|
|
To use the on-the-fly syntax checking, install =eslint=:
|
|
|
|
#+BEGIN_SRC sh
|
|
$ npm install -g eslint-cli
|
|
#+END_SRC
|
|
|
|
Check eslint official doc for setting rules
|
|
|
|
To use automatic code formatting you need to install =prettier= with:
|
|
|
|
#+BEGIN_SRC sh
|
|
$ npm install -g prettier
|
|
#+END_SRC
|
|
|
|
If you want to use local =eslint= and =prettier= in your project, turn on node
|
|
layer =dotspacemacs-configuration-layers= function:
|
|
|
|
#+BEGIN_SRC elisp
|
|
(node :variables node-add-modules-path t)
|
|
#+END_SRC
|
|
|
|
* Backends
|
|
** dumb
|
|
dumb backend is light weight and fast. =dumb-jump= is used to handled go to
|
|
definition (=gd= vim key binding). Because of the template nature of Vue, it
|
|
works very well.
|
|
|
|
Company backend is set to be very eager in suggestions.
|
|
|
|
=eslint= is used for linting.
|
|
|
|
** lsp
|
|
Vue language server needed to be installed
|
|
|
|
#+BEGIN_SRC sh
|
|
$ npm install -g vue-language-server
|
|
#+END_SRC
|
|
|
|
This backend provides all the fancy features like: jump to definition,
|
|
references, type inference... However, =eslint= is explicitly selected for
|
|
linting because it works better than =lsp= linter.
|
|
|
|
* Optional Configuration
|
|
~web-mode-script-padding~ is set to 0, so indent is zero at root level inside
|
|
~script~ tag
|
|
|
|
Same as =react= layer, you may refer to the =web-mode= configuration for fine
|
|
tuning the indenting behaviour.
|
|
|
|
For example, if you wan't two space indentation, put this in your
|
|
=dotspacemacs/user-config=
|
|
|
|
#+BEGIN_SRC emacs-lisp
|
|
(setq-default
|
|
;; web-mode
|
|
web-mode-markup-indent-offset 2
|
|
web-mode-css-indent-offset 2
|
|
web-mode-code-indent-offset 2
|
|
web-mode-attr-indent-offset 2)
|
|
#+END_SRC
|
|
|
|
* Key bindings
|
|
** web-mode
|
|
Free stuff from `html' layer, with minor change to avoid conflict with =lsp= layer
|
|
|
|
| Key binding | Description |
|
|
|-------------+-----------------------------------------------------------|
|
|
| ~SPC m E h~ | highlight DOM errors |
|
|
| ~SPC m e b~ | go to the beginning of current element |
|
|
| ~SPC m e c~ | go to the first child element |
|
|
| ~SPC m e p~ | go to the parent element |
|
|
| ~SPC m e s~ | go to next sibling |
|
|
| ~SPC m h p~ | show xpath of the current element |
|
|
| ~SPC m r c~ | clone the current element |
|
|
| ~SPC m r d~ | delete the current element (does not delete the children) |
|
|
| ~SPC m r n~ | rename current element |
|
|
| ~SPC m r w~ | wrap current element |
|
|
| ~SPC m z~ | fold/unfold current element |
|
|
| ~%~ | evil-matchit key binding to jump to closing tag |
|
|
|
|
A transient-state is also defined, start it with ~SPC m .~ or ~, .~
|
|
|
|
| Key binding | Description |
|
|
|-------------+----------------------------------------------------------------|
|
|
| ~?~ | Toggle full help |
|
|
| ~c~ | clone current element |
|
|
| ~d~ | delete (vanish) current element (does not delete the children) |
|
|
| ~D~ | delete current element and children |
|
|
| ~j~ | next element |
|
|
| ~J~ / ~gj~ | next sibling element |
|
|
| ~h~ | parent element |
|
|
| ~k~ | previous element |
|
|
| ~K~ / ~gk~ | previous sibling element |
|
|
| ~l~ | first child element |
|
|
| ~p~ | show xpath of current element |
|
|
| ~q~ | leave the transient-state |
|
|
| ~r~ | rename current element |
|
|
| ~w~ | wrap current element |
|
|
|
|
** Formatting (prettier)
|
|
|
|
| Key binding | Description |
|
|
|-------------+---------------------------|
|
|
| ~SPC m = =~ | format code with prettier |
|
|
|
|
** Auto-complete and documentation (dumb)
|
|
|
|
| Key binding | Description |
|
|
|-------------+------------------------------------------------------|
|
|
| ~SPC m g~ | jump to the definition of the thing under the cursor |
|
|
| ~SPC m G~ | jump to definition for the given name |
|
|
|
|
** Lsp key bindings
|
|
See the [[https://github.com/syl20bnr/spacemacs/tree/develop/layers/%2Btools/lsp][lsp layer]].
|