Table of Contents

HTML layer

Table of ContentsClose

html.png

1 Description

This layer adds support for editing HTML and CSS.

1.1 Features:

2 Install

To use this configuration layer, add it to your ~/.spacemacs. You will need to add html to the existing dotspacemacs-configuration-layers list in this file.

SCSS linting requires SCSS-Lint version >= 0.43.0. You can get it from GitHub:

gem install specific_install
gem specific_install https://github.com/brigade/scss-lint.git
gem specific_install https://github.com/Sweetchuck/scss_lint_reporter_checkstyle.git

2.1 LSP

To enable LSP, set the layer variables below to t:

  • css-enable-lsp
  • less-enable-lsp
  • scss-enable-lsp
  • html-enable-lsp

2.2 web-beautify

See web-beautify layer documentation.

2.3 prettier

See prettier layer documentation.

2.4 Choosing a formatter

To choose a formatter, set the layer variable web-fmt-tool:

(html :variables web-fmt-tool 'web-beautify)

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:

;;; Directory Local Variables
;;; For more information see (info "(emacs) Directory Variables")

((html-mode (web-fmt-tool . prettier)))

Note: you can easily add a directory local variable with SPC f v d.

3 Backends

3.1 Language Server Protocol

For css files, you have to install vscode-css-languageserver-bin

npm i -g vscode-css-languageserver-bin

For html files, you will need to install vscode-html-languageserver-bin

npm install -g vscode-html-languageserver-bin

Don't forget to set the corresponding layer variables mentioned above to t

4 Live display in browser

Use SPC m I to enable impatient mode, opening a live view of a HTML file in your browser. You may wish to enable impatient mode in referenced CSS or JS files, too.

When the underlying file is an HTML file, SPC m I automatically opens the page in the browser. For other buffers, a list of available views can be found on http://localhost:8080/imp.

For more information visit the help page on GitHub.

5 Key bindings

5.1 Web mode

Key binding Description
SPC m g p quickly navigate CSS rules using helm
SPC m e h highlight DOM errors
SPC m I open live view in browser
SPC m g b go to the beginning of current element
SPC m g c go to the first child element
SPC m g p go to the parent element
SPC m g 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 r 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

5.2 CSS/SCSS

Key binding Description
SPC m g h quickly navigate CSS rules
SPC m z c fold css statement to one line
SPC m z o unfold css statement to one line

Author: root

Created: 2019-11-10 Sun 14:17

Validate