vscode编辑器插件安装配置与emmet语法实例

vscode编辑器的安装与插件配置

---

vscode编辑器安装流程

1. 打开vscode编辑器官网https://code.visualstudio.com/
2. 点击下载按钮稍等一会自动下载，直至下载完成
3. 双击打开下载的安装包按提示一步步安装完成即可

vscode编辑器插件安装配置

打开vscode编辑器点击插件市场按钮，如下图在搜索框内输入需要安装的插件安装即可，下面是需要安装的常用插件名称

• chinese Language 中文语言包
• live server 实时预览html
• prettier-code formatter 代码自动格式化
• code runner 几乎支持所有主流语言的临时运行测试
• vscode-icons 图标主体：官方出品
• Fira Code 字体下载地址https://github.com/tonsky/FiraCode/
• settings.json 字体
• auto close tag 标签自动关闭
• auto-rename tag 标签自动更名
• html css support HTML，css语法提示增强
• html snippets 常用html代码片断模板
• css peek 快速定位/查看id/calss的css定义
• intellisense for css class calss类名自动感应完成
• javascript(es6) code snippets 常用es6代码片断模板
• tab out 按tab自动跳过右括号
• bracket pair colorizer 适用不同颜色标记括号配对
• markdownlint markdown语法/格式检查器
• markdown preview enhanced markdown阅览器增强版

---

emmet语法实例

• 输入 div>p>a (上下级) 按tab输出如下图
  
• 输入 div+p+a (兄弟平级) 按tab输出如下图
  
• 输入 a{link}*3 （复制重复）按tab输出如下图
  
• 输入 ul>li[calss]*5>a{类目$@2} （综合）按tab输出如下图