vscode几十款常用插件及emmet语法

开发中使用的一些vscode插件

vscode快捷打开终端

1. 通过cmd+shift+p
2. Ctrl+t ---》  >输入相关名称

EaseServer

此扩展使您可以在本地服务器上运行打开的文件

打开方式：

1. default shortcut Ctrl+Shift+Enter
2. 或Ctrl+t —》 >EaseServer Start
3. 支持热更新, 无需刷新页面

特性

1. 本地http服务器

2. 自动打开文件在浏览器

Live Server

启动具有静态和动态页面实时重新加载功能的本地开发服务器

打开方式：

1. 点击状态栏Go Live打开/关闭服务器
2. 支持热更新, 无需刷新页面

Live HTML Previewer

这个扩展允许你在VS代码中预览html文件。使用它可以快速设置网页的html和css。

打开方式：

1. Ctrl+t —》 >side preview
2. vscode工具 左下方 点击 Preview Available

LiveReload

LiveReload

用途及参考

1. 它可以监听你设置的文件夹中文件的改变，若是文件内容有改变，它会自动刷新浏览器
2. chrome可以去应用商店下载扩展
3. 具体使用需配置 https://www.cnblogs.com/liu-l/p/3902100.html

Auto Close Tag

自动添加HTML/XML关闭标签，就像Visual Studio IDE或Sublime Text所做的那样。

Auto Rename Tag

当重命名一个HTML/XML标记时，自动重命名成对的HTML/XML标记

Beautify

在VS代码中美化代码

Beautify css/sass/scss/less

美化css, sass和less的代码(Visual Studio代码的扩展)

AutoFileName

自动完成文件名

Better Comments

通过使用警告、信息、TODOs等注释来改进代码注释!

Bracket Pair Colorizer

一个可定制的扩展，用于对匹配的括号进行着色

CSS tree

选定HTML/JSX快速生成样式结构

Code Outline

VSCode的代码大纲树提供程序

Code Runner

vsCode中右键Run Code

Code Spell Checker

源代码的拼写检查器

Color Info

提供有关css颜色的快速信息

vscode-pigments

预览编辑器中使用的颜色

Coverage Gutters

显示由lcov或xml生成的测试覆盖范围-可用于多种语言

Debugger for Chrome

在Chrome浏览器或任何其他支持Chrome调试器协议的目标中调试JavaScript代码。

Document This

在TypeScript和JavaScript文件中自动生成详细的JSDoc注释。

default shortcut Ctrl+Alt+D

Dracula Official

官方吸血鬼主题。

ECMAScript Quotes Transformer

转换ECMAScript字符串文本的引号。

ESLint

将ESLint JavaScript集成到VS代码中。

GitLens — Git supercharged

增强Visual Studio代码中内置的Git功能

增强Visual Studio代码中内置的Git功能——通过Git blame注释和代码镜头直观地显示代码作者身份，无缝地导航和探索Git存储库，通过强大的比较命令获得有价值的见解，等等

Guides

Visual Studio代码,指南线,缩进背景线

Highlight Matching Tag

突出显示匹配的关闭或打开标记

HTML CSS Support

CSS支持HTML文档

HTML Snippets

完整的HTML标签，包括HTML5代码片段

Icon Fonts

为流行的图标字体的片段，如字体棒，离子图标，字形图标，八进制，材料设计图标和更多!

Image preview

显示图像预览在行号旁和悬停

Indenticator

突出显示当前缩进深度

jQuery Code Snippets

超过130个jQuery代码片段

open in browser

这允许您在默认浏览器或应用程序中打开当前文件。

右键选择打开

Path Intellisense

Visual Studio代码插件，自动完成文件名

PHP Debug

使用XDebug对PHP的调试支持

PHP Extension Pack

PHP开发所需的一切

PHP Formatter

格式化

PHP IntelliSense

PHP的高级自动完成和重构支持

Quokka.js

JavaScript的即时编译。

Sass

Sass

Simple icons

图标主题

stylelint

Modern CSS/SCSS/Less linter

Terminal

Visual Studio代码的终端

TODO Highlight

突出显示TODOs、FIXMEs和任何关键字、注释……

关于Vue

Vetur

Vue工具用于VS代码

Vue 2 Snippets

Vue 2 code Snippets, 快速编码

VueHelper

Vue、Vue-router和Vuex的代码片段

关于wechat mini program

vscode wxml

微信wxml支持/ vscode片段

vscode-wechat

vscode支持微信wxss

vscode常用emmet 语法

可以快速生成需要的结构，提高开发效率。

嵌套关系

1. 如何快速生成 列表中嵌套a标签呢？

   • ul>li>a
   • 可见a标签href属性默认为空
   • 效果如下：

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

2. 如何设置a标签的属性？

   • []表示设置属性

   • ul>li>a[href="#"]

   • ul>li>a[href="javascript:;"]

   <ul>
       <li><a href="#"></a></li>
   </ul>
   
   
   <ul>
       <li><a href="javascript:;"></a></li>
   </ul>
   

3. 如何批量生成？

   • ul>li*3>a[href="#"] 或者 ul>(li>a[href="#"])*3
   • ()表示数量

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

4. 多层嵌套关系

   • ul>li*5>a[href="#"]>img[src=""]

   <ul>
       <li><a href="#"><img src="" alt=""></a></li>
       <li><a href="#"><img src="" alt=""></a></li>
       <li><a href="#"><img src="" alt=""></a></li>
       <li><a href="#"><img src="" alt=""></a></li>
       <li><a href="#"><img src="" alt=""></a></li>
   </ul>
   

兄弟关系

1. 如何快速生成？

   • 使用+号连接可生成多个平级标签
   • a+p+span

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

2. 嵌套加平级

   • div>a[href="#"]+p+span

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

含类名标签

1. 快速生成含类名标签

   • .wrap

   <div class="wrap"></div>
   

   同理 id选择器

   • #wrap

   <div id="wrap"></div>
   

2. 指定标签生成类名

   • a.link

   <a href="" class="link"></a>
   

含类名标签自然数

1. 如何快速生成自然数标签？

   • .module$*3

   <div class="module1"></div>
   <div class="module2"></div>
   <div class="module3"></div>
   

2. 多层级

   • .module$*3>ul>li.item$*2>a[href="#"]

   <div class="module1">
       <ul>
           <li class="item1"><a href="#"></a></li>
           <li class="item2"><a href="#"></a></li>
       </ul>
   </div>
   <div class="module2">
       <ul>
           <li class="item1"><a href="#"></a></li>
           <li class="item2"><a href="#"></a></li>
       </ul>
   </div>
   <div class="module3">
       <ul>
           <li class="item1"><a href="#"></a></li>
           <li class="item2"><a href="#"></a></li>
       </ul>
   </div>