Blogger Information
Blog 2
fans 0
comment 0
visits 1461
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
vscode编辑器插件安装配置与emmet语法实例
阿龙
Original
933 people have browsed it

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输出如下图
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post