78297be625
* Fix various isolated typos "apppend" -> "append" "availabe" -> "available" "Descripti using ternon" -> "Description" "you have not them" -> "you don't have them" "new on" -> "new one" "plained" -> "curved" "repel" -> "REPL" "vairable" -> "variable" * Fix a few errors in the CoffeeScript layer readme Add a missing "the". Correct a reference to the layer as "javascript" to "coffeescript". Fix the syntax on the link to CoffeeLint. * Fix typos: "dofile" -> "dotfile" * Fix typos: "formated" and "formating" "formated" -> "formatted" "formating" -> "formatting" * hy: Fix docstrings in funcs.el Fix copy-and-pasted docstring text for spacemacs/hy-shell-eval-current-form-and-go and spacemacs/hy-shell-eval-region-and-go. * Fix typos: "indendation" -> "indentation" * Fix typos: "the the", "a a" Fix duplicated (or misplaced) articles. * Fix typos: "wether" -> "whether" * Fix typos: "intialize" -> "initialize"
5 KiB
HTML layer
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
- See the effects of typed HTML using impatient-mode
- imenu support for CSS and Sass through counsel-css
- Formatting with web-beautify
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.gitweb-beautify
See web-beautify layer documentation.
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.
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 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 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 |
SPC m z c |
fold css statement to one line |
SPC m z o |
unfold css statement to one line |