81 lines
4.1 KiB
Org Mode
81 lines
4.1 KiB
Org Mode
#+TITLE: HTML layer
|
|
|
|
[[file:img/html.png]]
|
|
|
|
* Table of Contents :TOC_4_gh:noexport:
|
|
- [[#description][Description]]
|
|
- [[#features][Features]]
|
|
- [[#install][Install]]
|
|
- [[#key-bindings][Key Bindings]]
|
|
- [[#web-mode][Web mode]]
|
|
- [[#cssscss][CSS/SCSS]]
|
|
|
|
* Description
|
|
This layer adds support for editing HTML and CSS.
|
|
|
|
** Features
|
|
- Editing HTML and CSS file using [[http://web-mode.org/][web-mode]]
|
|
- Support for Sass/Scss and Less files
|
|
- Generate HTML and CSS coding using [[https://github.com/smihica/emmet-mode][emmet-mode]]
|
|
- Tags navigation on key ~%~ using [[https://github.com/redguardtoo/evil-matchit][evil-matchit]]
|
|
- Support for editing Slim and Pug templates using [[https://github.com/slim-template/emacs-slim][slim-mode]]
|
|
and [[https://github.com/hlissner/emacs-pug-mode][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:
|
|
|
|
#+BEGIN_SRC command-line
|
|
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
|
|
#+END_SRC
|
|
|
|
* 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 |
|