2015-12-02 14:23:39 +00:00
#+TITLE : HTML layer
2015-06-10 16:44:30 +00:00
[[file:img/html.png ]]
2018-09-19 03:54:47 +00:00
* Table of Contents :TOC_4_gh:noexport:
2017-05-22 14:16:12 +00:00
- [[#description ][Description ]]
2017-08-28 21:58:10 +00:00
- [[#features ][Features: ]]
2017-05-22 14:16:12 +00:00
- [[#install ][Install ]]
2018-05-18 05:15:03 +00:00
- [[#web-beautify ][web-beautify ]]
2018-06-19 06:25:33 +00:00
- [[#prettier ][prettier ]]
- [[#choosing-a-formatter ][Choosing a formatter ]]
2015-08-27 11:21:24 +00:00
- [[#live-display-in-browser ][Live display in browser ]]
2017-05-22 14:16:12 +00:00
- [[#key-bindings ][Key Bindings ]]
- [[#web-mode ][Web mode ]]
- [[#cssscss ][CSS/SCSS ]]
2015-06-10 16:44:30 +00:00
* Description
This layer adds support for editing HTML and CSS.
2017-08-28 21:58:10 +00:00
** Features:
2015-06-10 16:44:30 +00:00
- 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 ]]
2015-06-12 01:23:07 +00:00
- Tags navigation on key ~%~ using [[https://github.com/redguardtoo/evil-matchit ][evil-matchit ]]
2015-08-27 11:21:24 +00:00
- 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 ]]
- See the effects of typed HTML using [[https://github.com/skeeto/impatient-mode ][impatient-mode ]]
2017-08-27 10:28:56 +00:00
- imenu support for CSS and Sass through [[https://github.com/hlissner/emacs-counsel-css ][counsel-css ]]
2018-05-24 02:12:30 +00:00
- Formatting with [[https://github.com/yasuyk/web-beautify ][web-beautify ]]
2015-06-10 16:44:30 +00:00
* Install
2016-01-06 05:21:55 +00:00
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.
2015-06-10 16:44:30 +00:00
2016-09-02 06:44:43 +00:00
SCSS linting requires SCSS-Lint version >= 0.43.0. You can get it from GitHub:
#+BEGIN_SRC command-line
2018-09-19 03:54:47 +00:00
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
2016-09-02 06:44:43 +00:00
#+END_SRC
2018-05-18 05:15:03 +00:00
** web-beautify
2018-05-18 06:04:45 +00:00
See [[file:../../+tools/web-beautify/README.org ][web-beautify layer ]] documentation.
2018-05-18 05:15:03 +00:00
2018-06-19 06:25:33 +00:00
** prettier
See [[file:../../+tools/prettier/README.org ][prettier layer ]] documentation.
** Choosing a formatter
To choose a formatter, set the layer variable =web-fmt-tool= :
#+BEGIN_SRC elisp
2018-09-19 03:54:47 +00:00
(html :variables web-fmt-tool 'web-beautify)
2018-06-19 06:25:33 +00:00
#+END_SRC
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:
#+BEGIN_SRC elisp
2018-09-19 03:54:47 +00:00
;;; Directory Local Variables
;;; For more information see (info "(emacs) Directory Variables")
2018-06-19 06:25:33 +00:00
2018-09-19 03:54:47 +00:00
((html-mode (web-fmt-tool . prettier)))
2018-06-19 06:25:33 +00:00
#+END_SRC
*Note:* you can easily add a directory local variable with ~SPC f v d~ .
2015-08-27 11:21:24 +00:00
* 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
2018-09-19 03:54:47 +00:00
[[http://localhost:8080/imp ]].
2015-08-27 11:21:24 +00:00
For more information visit the [[https://github.com/skeeto/impatient-mode/blob/master/README.md ][help page on GitHub. ]]
2015-06-10 16:44:30 +00:00
* Key Bindings
** Web mode
| Key Binding | Description |
|-------------+-----------------------------------------------------------|
| ~SPC m g p~ | quickly navigate CSS rules using =helm= |
| ~SPC m e h~ | highlight DOM errors |
2015-08-27 11:21:24 +00:00
| ~SPC m i~ | open live view in browser |
2015-06-10 16:44:30 +00:00
| ~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 |
2015-08-10 19:40:05 +00:00
| ~%~ | evil-matchit keybinding to jump to closing tag |
2015-06-10 16:44:30 +00:00
2016-01-30 11:32:53 +00:00
A transient-state is also defined, start it with ~SPC m .~ or ~, .~
2015-06-10 16:44:30 +00:00
| Key Binding | Description |
|-------------+----------------------------------------------------------------|
| ~?~ | Toggle full help |
| ~c~ | clone current element |
| ~d~ | delete (vanish) current element (does not delete the children) |
2015-08-29 07:11:09 +00:00
| ~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 |
2015-06-10 16:44:30 +00:00
| ~p~ | show xpath of current element |
2016-04-13 03:31:38 +00:00
| ~q~ | leave the transient-state |
2015-08-29 07:11:09 +00:00
| ~r~ | rename current element |
2015-06-10 16:44:30 +00:00
| ~w~ | wrap current element |
2015-08-29 07:11:09 +00:00
** CSS/SCSS
2015-06-10 16:44:30 +00:00
2017-08-27 10:28:56 +00:00
| 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 |