VSCode安装使用与Emmet语法

一.VScode安装与常用插件

选择官网下载安装vscode编辑器
https://code.visualstudio.com/
搜索下载需要的插件和主题
效果如图：
其他问题

更改默认格式化程序，由Prettier-Code formatter格式化代码
解决vscode中emmet中对行内标签不换行的问题

二.Emmet语法

1.快速生成html5文档结构

!+tab

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

2.id和class
#+id名称
#content

<div id="content"></div>

.+class名称

.main

<div class="main"></div>

3.层级
子元素用>
div>p>a

<div>
      <p><a href=""></a></p>
</div>

兄弟元素用+
div+p+a

<div></div>
<p></p>
<a href=""></a>

父级元素用^
div>p^a

<div>
<p></p>
</div>
<a href=""></a>

4.重复*n

>ul>li*5>a

    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>

5.序号

ul>li.item$*5>a{link$@6}

    <ul>
      <li class="item1"><a href="">link6</a></li>
      <li class="item2"><a href="">link7</a></li>
      <li class="item3"><a href="">link8</a></li>
      <li class="item4"><a href="">link9</a></li>
      <li class="item5"><a href="">link10</a></li>
    </ul>

一.VScode安装与常用插件

二.Emmet语法

相关文章