Future development with be made there. You don’t have to use this repo anymore.
Check out this link: https://github.com/syl20bnr/spacemacs/tree/develop/layers/%2Bframeworks/vue
- Dump
vue-modeto useweb-mode. This layer creates a derived mode on the fly out of web-mode to handle vue file. - Wholesome features from
web-mode, especially on template part - Better performance
- If you need the old one use branch
v1
Layer for Vue, for working with .vue files.
- on-the-fly syntax checking with
eslint - proper syntax highlight and indentation with
vue-mode - two options for backend support for autocompletion and code analyis:
lspanddumb - code autocompletion with
companylayer - formatting code with
prettierlayer evil-matchit%to jump between open and close tagsemmet-modeandyasnippetfor code expanding withtabkey
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.
Vue layer uses the backend defined in variable vue-backend. Options are dumb
and lsp. Default is dumb backend. To choose a default backend set the layer
variable vue-backend:
(vue :variables vue-backend 'lsp)To use the on-the-fly syntax checking, install eslint:
$ npm install -g eslintCheck eslint official doc for setting rules
To use automatic code formatting you need to install prettier with:
$ npm install -g prettierIf you want to use local eslint and prettier in your project, turn on node
layer dotspacemacs-configuration-layers function:
(node :variable node-add-modules-path)dumb backend is light weight and fast. dumb-jump is used to handled go to
definition (gd vim keybinding). 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.
Vue language server needed to be installed
$ npm install -g vue-language-serverThis 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.
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
(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)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 |
| Key binding | Description |
|---|---|
SPC m = = | format code with prettier |
| 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 |
See lsp layer