This repository has been archived on 2024-10-22. You can view files and clone it, but cannot push or open issues or pull requests.
spacemacs/layers/+lang/html
syl20bnr f45ce1a88e syntax-checking: rename function add-flycheck-hook to enable-flycheck
spacemacs/add-flycheck-hook was not really hooking anything, change the name
to better reflect what it does.
Also changed the push for a add-to-list to avoid duplicates.
2017-03-19 12:40:36 -04:00
..
img Use + instead of ! for layer categories 2015-09-11 00:13:51 -04:00
funcs.el Bump year in copyright headers 2017-01-05 23:08:17 -05:00
packages.el syntax-checking: rename function add-flycheck-hook to enable-flycheck 2017-03-19 12:40:36 -04:00
README.org Describe scss-lint setup 2016-10-17 20:05:16 +02:00

HTML layer

/TakeV/spacemacs/media/commit/22e40f4f3dc11b3c32ed2e93fa5f250d924b3866/layers/+lang/html/img/html.png

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