dotfiles/emacs.d/layers/+lang/html

HTML layer

• Table of Contents
• Description
  • Features
• Install
• Key Bindings
  • Web mode
  • CSS/SCSS

Description

This layer adds support for editing HTML and CSS.

Features

• Editing HTML and CSS file using web-mode

• Support for Sass/Scss and Less files

• Generate HTML and CSS coding using emmet-mode

• Tags navigation on key % using evil-matchit

• Support for editing Slim and Pug templates using slim-mode and pug-mode

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

Key Bindings

Web mode

Key Binding	Description
SPC m g p	quickly navigate CSS rules using helm
SPC m e h	highlight DOM errors
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 keybinding 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

CSS/SCSS

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