VScode的使用

发表于 分类于 阅读次数： 本文字数： 2.3k 阅读时长 ≈ 2 分钟

基础

1、打开终端

Ctrl + \

2、打开开发者模式(检查)

Ctrl + Shift + I

3、查找代码内容

Ctrl + F

https://www.bilibili.com/video/BV1Wh411U7R5

一、编辑器布局

查看——编辑器布局

二、git的分布式版本控制系统

1、位于vscode侧边栏

（可以实现类似于Sourcetree的操作）

2、可用gitlens插件管理

可以查看代码历史记录、查看branch及commit改动、

四、智能感知

css、html、json、php、

1、首字母感应💖

例如（更多的可以自己尝试）

bg：background

bgc：background-color

2、颜色感应

触碰时可自定义透明度

image-20211002143142797

3、等等

五、Emmet语法💖

Emmet语法官方文档：https://docs.emmet.io/cheat-sheet/

1、！+ Enter

HTML初始化

2、div*n

1
2
3
<div></div>
<div></div>
<div></div>

同类型兄弟间 相邻

3、div>p

1
2
3
<div>
	<p></p>
</div>

父子包含

4、div+p

1
2
<div></div>
<p></p>

不同类型之间 相邻

5、div. / # ✨

1
<div class="news"></div>
1
<div id="news"></div>

快速生成带有名字的标签

6、同时选择上下多行的同一列内容

image-20211002121920459

Shift + Alt + 拖动要控制的行数

示例：👀

1
2
3
4
5
6
7
<ul class="header">
  <li><a href="" class="link"></a></li>
  <li><a href="" class="link"></a></li>
  <li><a href="" class="link"></a></li>
  <li><a href="" class="link"></a></li>
  <li><a href="" class="link"></a></li>
</ul>

1
2
3
4
<div class="search">
  <div class="logo">登录</div>
  <input type="text" placeholder="keywords">
</div>

1
2
3
4
5
6
7
<ul>
    <li class="content1"></li>
    <li class="content2"></li>
    <li class="content3"></li>
    <li class="content4"></li>
    <li class="content5"></li>
</ul>

配置

在设置中搜索Emmet，然后勾选：

image-20211002230949346

六、vscode插件

vscode插件下载排行榜

1、通用插件

①、Auto Rename Tag

  对称标签前后自动同步修改

②、Auto Close Tag

  对称标签前后自动同步删除

③、Prettier-Code formatter

  保存时自动格式化代码

④、Bracket Pair Colorizer 2

  括号高亮

④、Live Server

  实时预览

⑥、vscode-icons

  文件图标样式

⑦、Atom One Dark Theme

  个人比较喜欢的主题（IDEA里面也可以下载该主题）

⑧、koroFileHeader

  项目或者作者基本信息声明文档File Heade

设置：

在设置里搜索file header，然后

image-20211002215501952 image-20211002221853172

使用：

  在需要File Header时，输入Ctrl + Alt + i 即可

使用该快捷键会自动在文件的最前面生成File Header信息

2、学习使用插件

HTML、CSS：

  1.CSS Peek: 快速查看class和id对应的CSS代码

  2.Icon Fonts: 字体图标库输入提示

  3.HTML Boilerplate: HTML初始化兼容性模板

等等……后续更新😂

七、设置

查看所有命令(搜索)

Ctrl + Shift + P

例： 更改settings.json文件

image-20211002145154038

1、鼠标滚轮改变字体大小

选择上面的Open Settings(JSON)

在里面加入一行：

"editor.mouseWheelZoom": true

image-20211002194608594