微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > Vscode的安装与配置以及emmet的常见语法使用
博主信息
博文 19
粉丝 0
评论 0
访问量 18012
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
Vscode的安装与配置以及emmet的常见语法使用
王浩
原创
1596人浏览过
  1. 作业内容：
  2.     1. 安装vscode,并将推荐插件安装与配置好，记录下完整过程（最好配上图片）; 
  3.     2. 实例演示emmet语法

安装vscode

浏览器打开官网https://code.visualstudio.com/
根据相对应的操作系统下载。
我的操作系统是windows，所以页面显示Download for Windows

点击下载，然后安装。下一步即可，此处不再赘述。

设置中文显示

中文显示也是一个vscode里的一个插件。
打开vscode主界面后，我们点击左侧的插件按钮，输入chinese进行搜索，这里我们选择中文简体。

安装很快，安装完需要重启一下，有的机器会显示reload（重新加载），有的会直接显示restart（重新启动）。然后就会显示熟悉的中文界面了。

安装推荐插件

所有插件安装都与上述中文语言包的安装方式相同，即都要在插件栏里搜索查询安装，有些插件安装完需要手动做一些相关的设置，后面会做一些相关的简述。

插件名称 功能说明
one dark pro 这是个不错的主题。看各人需要吧。有兴趣的可以安装一下。

安装好后，需要重启一下vscode，然后在插件栏找到one dark pro这个主题插件，点击图中的那个小齿轮

再点击扩展，选择你喜欢的主题，我们这里选择solories，选择后，右下角会自动弹出一个小弹窗，提示需要reload（重新加载）

插件名称 功能说明
Helium Icon Theme 图标主题包，可以让左侧目录栏显示漂亮的图标

这个插件不用做任何设置，安装完立即生效

插件名称 功能说明
auto close tag HTML标签自动关闭
auto-rename tag HTML标签自动更名
html css support （html,css语法提示增强）
html snippets 常用html代码片断模板

上面这四个【HTML标签】都建议装，这几个对我们学习前端的来说，能非常有用的加快编码效率。

插件名称 功能说明
css peek 快速定位/查看id/class的css定位
插件名称 功能说明
live server 实时刷新前端页面，每次保存都能自动刷新页面显示效果。

关于这个功能可以指定浏览器品牌

插件名称 功能说明
prettier-code formatter 格式化代码

这里可以设置一下保存的时候自动格式化
Ctrl+, 用这个快捷键打开设置，输入format搜索
将默认格式化工具设置为Prettier-code formatter，并且将Format on Save勾选上

插件名称 功能说明
Bracket Pair Colorizer 括号按颜色配对

这个插件可以让写代码的时候，括号配对按颜色分，更加清晰明了。

emmet的常见语法

emmet可以说是简化版的HTML语言，敲完命令后，按Tab键，将自动生成对应的HTML语句
常见的有如下几种：

  • ! （感叹号）生成结果如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  11. </body>
  12. </html>
  • a*N：标签自动生成N个。如a*5，显示为：
  1.  <a href=""></a>
  2.  <a href=""></a>
  3.  <a href=""></a>
  4.  <a href=""></a>
  5.  <a href=""></a>
  • 样式，即class。用.（点）来表示，如：a.input将会成生以下语句
  1. <a href="" class="input"></a>

​ 如果前面的标签不写的话。则自动使用div标签，如：.input

  1. <div class="input"></div>
  • 属性，用中括号包含起来。如a[href=www.php.cn]
  1. <a href="www.php.cn"></a>
  • 值，用大括号包含起来。如：a[href=www.php.cn]{PHP中文网}
  1. <a href="www.php.cn">PHP中文网</a>
  • ID号。可以用#（井号）来表示，如：input#name将会生成以下语句
  1. <input type="text" id="name">
  • 嵌套包含：比如select和option。如：div>select[id=age][name=age]>option[value=$$@18]{$$@18}*5，将生成以下复杂的语句段：
  1. <div>
  2.     <select name="age" id="age">
  3.         <option value="18">18</option>
  4.         <option value="19">19</option>
  5.         <option value="20">20</option>
  6.         <option value="21">21</option>
  7.         <option value="22">22</option>
  8.     </select>
  9. </div>
  • 上下级嵌套和兄弟平级共存：如div>a[href=www.php.cn]{PHP中文网}^p{PHP中文网}，则显示为：
  1. <div><a href="www.php.cn">PHP中文网</a></div>
  2. <p>PHP中文网</p>
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：有许多的辅助开发工具, 现在做一名程序员, 不知有多幸福,很羡慕你们
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录