Skip to content
This repository has been archived by the owner. It is now read-only.
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
img
 
 
 
 
 
 
 
 
 
 
 
 

Vue layer. Updated 2019-12-08: this layer has been integrated in to Spacemacs develop branch.

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

img/vue.png

Table of Contents

News

  • Dump vue-mode to use web-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

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 be very eager in suggestions.

eslint is used for linting.

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

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

Key Bindings

web-mode

Free stuff from `html’ layer, with minor change to avoid conflict with lsp layer

Key bindingDescription
SPC m E hhighlight DOM errors
SPC m e bgo to the beginning of current element
SPC m e cgo to the first child element
SPC m e pgo to the parent element
SPC m e sgo to next sibling
SPC m h pshow xpath of the current element
SPC m r cclone the current element
SPC m r ddelete the current element (does not delete the children)
SPC m r nrename current element
SPC m r wwrap current element
SPC m zfold/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 bindingDescription
?Toggle full help
cclone current element
ddelete (vanish) current element (does not delete the children)
Ddelete current element and children
jnext element
J / gjnext sibling element
hparent element
kprevious element
K / gkprevious sibling element
lfirst child element
pshow xpath of current element
qleave the transient-state
rrename current element
wwrap current element

Formatting (prettier)

Key bindingDescription
SPC m = =format code with prettier

Auto-complete and documentation (dumb)

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

Lsp keybindings

See lsp layer

About

Spacemacs layer

Resources

Releases

No releases published

Packages

No packages published