1.vscode插件与配置 2.markdown基础语法 3.emment语法

VSCode插件与配置

必装插件

1. Chinese Language (中文包)

2. Live Server （文件监听实时预览）

3. prettier-code formatter (代码自动格式化)

   • 设置搜索 Default Formatter 勾选 prettier-code
   • 设置搜索 Auto Save 选 onFocusChange (鼠标离开触发)
   • 设置搜索 Format On Save 勾选 (保存自动格式化)

4. html
   auto close tag （标签自动闭合）
   auto-rename tag （标签自动更名）
   html css support （html,css语法提示增强）
   html snippets （常用html代码片断模板）

5. css
   css peek (快速定位/查看id/class的css定义)
   intellisense for css class (class类名自动感应)

6. es6
   javascript(es6) code snippets (常用es6代码片断模板)
   tab out (按tab自动跳过右括号)
   Bracket Pair Colorizer (彩虹花括号配对)

7. markdown
   markdownlint (markdown语法/格式检查器)
   markdown preview enhanced (markdown预览器)
   Markdown All in One (键盘快捷键)

美化插件

1. 主题
   one dark pro [设置全部勾选,主题：solarized)

2. 文件图标
   vscode-icons (官方出品)
   Helium Icon Theme (icon文件图标)

3. 背景
   background (右下角二次元老婆)
   background-cover (自定义背景图片)

4. 预览
   Open in Browser (右击选择浏览器打开html文件)
   Preview on Web Server（编译器内web预览）

问题配置

解决VSCode中emmet对行内标签不换行的问题
Ctrl + ，打开设置 设置中搜索Syntax Profiles，
在settings.json中编辑，加入如下代码：

"emmet.syntaxProfiles": {
    "html": {
        "inline_break": 2
     }
}

Markdown 基本语法

元素	Markdown 语法
标题	# H1 ~ ###### H6
粗体（Bold）	**bold text**
斜体（Italic）	*italicized text*
有序列表（Ordered List）	1. First item 2. Second item 3. Third item
无序列表（Unordered List）	- First item + Second item * Third item
代码（Code）	``
链接（Link）	[]()
图片（Image）	![]()
引用块（Blockquote）	>
代码块（Fenced Code Block）	```
分隔线（Horizontal Rule）	--- *** ___

Emmet语法

快速生成HTML文档格式：！+ Tab

隐式标签：

<!-- 生成类 .class -->
<div class="class"></div>
<!-- 生成ID #id -->
<div id="id"></div>
<!-- ul>.class -->
<ul>
    <li class="class"></li>
</ul>

创建带有指定class样式的标签：div.box

<div class="box"></div>

创建带有指定id样式的标签：div#box

<div id="box"></div>

文本内容填充：a{首页}

<a href="">首页</a>

$符号自增

    // ul>li.$*3
    <ul>
        <li class="1"></li>
        <li class="2"></li>
        <li class="3"></li>
    </ul>
   // ul>li{第$$条项目}*3
   <ul>
       <li>第01条项目</li>
       <li>第02条项目</li>
       <li>第03条项目</li>
   </ul>
   // ul>li*3>a{link$@-5}
   <ul>
      <li><a href="">link7</a></li>
      <li><a href="">link6</a></li>
      <li><a href="">link5</a></li>
   </ul>

带有层级结构的：ul>li

<ul>
    <li></li>
</ul>

代码在同级的：ul+li+a

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

在上级的：ul>li^a(这个可以多个^一起写)

  <ul>
      <li></li>
  </ul>
  <!-- 上面代码可以看出来效果是等同于(ul>li)+a的 -->

乘号批量复制：ul>li*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

自定义属性内容：ul>li>a[ href = ‘#’]

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