2023版vscode使用教程—最简单，最实用的功能和插件

视频链接：[最新版vscode使用教程](【2023最新vscode使用教程–前端开发最简单，最实用的功能和插件】 https://www.bilibili.com/video/BV1q84y1N7sa/?share_source=copy_web&vd_source=502b87cb4d2aa86663407115c2336b22

一、 创建文件的方式

• 点击按钮创建
• 直接拖拽
• 本地新建文件
• 新窗口打开

二、布局

• 代码放大缩小
• 资源管理器
• 代码缩略图、拆分、终端

三、 自动生成代码

• html代码生成

• emmet快捷键

    <!-- 1. 添加类名： p.p1 -->
      <p class="p1"></p>
      <!-- 2. 添加类名和id： p.p1#p_1 -->
      <p class="p1" id="p_1"></p>
      <!-- 3. 添加属性和内容： a.link[href="http://www.baidu.com"]{百度} -->
      <a href="http://www.baidu.com" class="link">百度</a>
      <!-- 4. 添加多个属性： img.img[src="http://bufanui.com/pages/front/img/LOGO.png"alt="logo"] -->
      <img
          src="http://bufanui.com/pages/front/img/LOGO.png"
          alt="logo"
          class="img"
      />
      <!-- 5. 嵌套盒子：div.box>div.inner-box -->
      <div class="box">
          <div class="inner-box"></div>
      </div>
      <!-- 6. $占位符实现序列号：  ul.ul-list>li.li-${li_$}*5 -->
      <ul class="ul-list">
          <li class="li-1">li_1</li>
          <li class="li-2">li_2</li>
          <li class="li-3">li_3</li>
          <li class="li-4">li_4</li>
          <li class="li-5">li_5</li>
      </ul>

四、 快捷键

• 单行注释：ctrl + /
• 多行注释: shift + alt + A
• 删除当前行： ctrl + shift + K
• 复制当前行： alt + shift + 箭头上/下
• 移动当前行： alt + 箭头上/下
• 代码格式化： shift + alt + F
• 显示/隐藏目录： ctrl + B
• 打开终端：ctrl + ~
• 切换最近打开文件： ctrl + E
• 当前页面查找/替换 ctrl + F / ctrl + H
• 多光标： alt + 鼠标左键
• 新建窗口： ctrl + shift + n

五、安装插件

• chinese
• open in
• live server
• 代码格式化prettier

六、主题

6.1 Dracula Official 粉色主题

6.2 SynthWave ‘84

步骤：

1. 安装插件
2. 打开vscode命令窗口： ctrl + shift + p , 输入 Enable Neon Dreams ，点击确定。然后重启。
3. 关闭霓虹效果： disable Neon Dreams

   6.3 Power Mode 炸裂特效

# 是否开启
"powermode.enabled": true
# 特效
"powermode.presets": "fireworks"
# 是否开启晃动
"powermode.shake.enabled":false