Skip to content
Spacemacs layer
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img 00 Feb 13, 2019
README.org doc, typo Mar 26, 2019
config.el
funcs.el clear dead code and set dumb mode to be aggresive on company Apr 4, 2019
layers.el 00 Feb 13, 2019
packages.el clean up Feb 20, 2019

README.org

Vue layer

img/vue.png

Table of Contents

Description

Layer for Vue, for working with .vue files.

Features:

  • 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: lsp and dumb
  • code autocompletion with company layer
  • formatting code with prettier layer
  • evil-matchit % to jump between open and close tags
  • emmet-mode and yasnippet for code expanding with 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.

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 eslint

Check eslint official doc for setting rules

To use automatic code formatting you need to install prettier with:

$ npm install -g prettier

If 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)

Backends

dumb

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 capf which is very eager in suggestions. eslint is used for linting.

at the moment vue-html-mode doesn’t define its own syntax table so you may encounter some glitches but it’s very rare as described here: https://github.com/AdamNiederer/vue-html-mode/issues/10 Add this to your dotspacemacs/user-config as a workaround:

(defun my/change-vue-html-mode-syntax-table ()
  (modify-syntax-entry ?: ".")
  (modify-syntax-entry ?' ".")
  (modify-syntax-entry ?. "."))
(add-hook 'vue-html-mode-hook #'my/change-vue-html-mode-syntax-table)

lsp

Vue language server needed to be installed

$ npm install -g vue-language-server

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

Key bindings

vue-mode

Key bindingDescription
SPC avue-mode-edit-all-indirect
SPC pvue-mode-edit-indirect-at-point
SPC vvue-mode-reparse

Formatting (prettier)

Key bindingDescription
SPC m = =format code with prettier

Auto-complete and documentation (dumb)

Key bindingDescription
SPC m g gjump to the definition of the thing under the cursor
SPC m g Gjump to definition for the given name

Lsp keybindings

see lsp layer

You can’t perform that action at this time.