vscode中htmlcss快速补全插件Emmet用法

html-css021

vscode中htmlcss快速补全插件Emmet用法,第1张

1,后代:>

缩写:nav>ul>li

2,兄弟:+

缩写:div+p+bq

3,上级:^

(1)缩写:div+div>p>span+em^bq

(2)缩写:div+div>p>span+em^^bq

4,分组:()

(1)缩写:div>(header>ul>li*2>a)+footer>p

(2)缩写:(div>dl>(dt+dd)*3)+footer>p

5,乘法:*

缩写:ul>li*5

6,自增符号:$

(1)缩写:ul>li.item$*5

(2)缩写:h$[title=item$]{Header $}*3

(3)缩写:ul>li.item$$$*5

(4)缩写:ul>li.item$@-*5

(5)缩写:ul>li.item$@3*5

编写html代码,一定要使用emmet(前身是zencoding),还有以下插件也是可以考虑的:

bracketHighter 高亮引号、括号等

code Aligment 代码对齐

DocBlockr 如果你写js,这个就很有用了

emmet 书写html必备

emmet css snippets 书写css必备

Encoding Helper 当你遇到加载的文件乱码时,这个插件就很有用了

jsFormat 格式化js代码

theme soda 软件主题,挺漂亮的

minifier 压缩js/css

sidebarenhance 增强型边栏

livereload 配合浏览器(firefox、chrome)上的livereload插件,就不用老是按F5了