VSCode（Visual Studio Code）是一款开源、跨平台、轻量级的代码编辑器，具有非常丰富的插件生态。他本身就是JavaScript + Electron （ /ɪˈlektrɒn/电子）代码开发的。官方下载地址：https://code.visualstudio.com/，支持绿色无安装。
01、常用快捷键
| 工具快捷键 | 描述 |
|---|
Ctrl + Shift + P
显示命令面板
Ctrl + B
显示/隐藏左侧边栏
Ctrl + J
显示/隐藏下方控制台/终端
Ctrl + \\
拆分为多个编辑器
ctrl + +、ctrl + -
将工作区放大/缩小（包括代码字体、左侧导航栏）
Ctrl + Tab Ctrl + Shift + Tab
切换打开的多个文档
| 编码快捷键 | 描述 |
|---|
Ctrl + 左右方向键
按照单词移动光标
Alt + Shift + 左右方向键
按照单词增加、减少 选中内容
Ctrl + Home、Ctrl + End
移动到第一行、最后一行
Cmd + C/V/X
复制、粘贴、剪切，如无选中则操作整行，鼠标三击也可以选中整行
Alt + ↑、Alt + ↓
移动代码向上、向下
Alt + Shift + ↑、Alt + Shift + ↓
复制 代码向上、向下一行
Alt + 鼠标连续点击任意位置
所选位置出现多个光标，可以同时输入
Ctrl + D（一次或多次）
光标所在单词+和他相同的都会被选中并出现多个光标，可以同时修改
Ctrl + /
注释单行代码，自定义改成了Alt + shift + C，默认的两个键太远了
Alt + shift + F
格式化代码
Ctrl+L+L（自定义添加的，默认无快捷键）
合并选中行为一行，可以搜索指令“合并行”，然后给他添加一个快捷键
多个光标同时编辑还是挺方便的：（Alt + 鼠标连续点击任意位置、Ctrl + D）
![1.gif]()
02、常用配置
用户区与工作区
- 用户：设置内容全局生效
- 工作区：只针对当前工作目录（项目）生效。工作区设置会优先生效，适用于团队协作场景。设置文件保存在当前项目根目录的
.vscode/settings.json中，可以被提交到Git仓库，方便共享给项目组的其他成员。
中文语言
在扩展中搜索“Chinese”安装中文语言包： Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code，重启生效。
字体样式
设置中搜索“Font”：
- 字体大小：
15px，根据分辨率设置合适大小。
- 字体：编程字体推荐等宽字体，在加上一个显示中文的，
Consolas,"Microsoft YaHei"
"editor.fontFamily": "Fira Code,Consolas,\"Microsoft YaHei\"",
皮肤
- 文件图标美化插件：vscode-icons
- 比较不错深色主题皮肤插件（代码着色+VSCode皮肤）：One Dark Pro
支持自定义配置：settings.json文件
"workbench.colorTheme": "One Dark Pro",
"workbench.colorCustomizations":{
"tab.activeBackground": "#2f3e5e",
"activityBar.background": "#282c34",
"sideBar.background": "#383c44"
}
03、编程字体
等宽编程字体，个人现在用的字体设置：JetBrains Mono,Consolas,"Microsoft YaHei"。
🔸Fira Code：免费的编程连字等宽字体，效果不错！FiraCode-Regular.zip
Fira Code,Consolas,"Microsoft YaHei"
🔸JetBrains Mono ：JetBrains 公司专为开发者打造的免费开源编程字体。JetBrainsMono-Regular.zip
JetBrains Mono,Consolas,"Microsoft YaHei"
🔸Consolas ：Windows自带字体，VS默认编程字体。Consolas是一套等宽字体的字型，属无衬线字体，由Lucas de Groot设计。
04、Emmet快速输入
Emmet是一个用于快速输入HTML、CSS代码的语法，可以用简单的语法快速生成HTML、CSS代码，语法形式类似CSS。VSCode中已经内置了Emmet的语法了，在html、css中使用，Tab键或回车即可。（Emmet /ˈɛmɪt/ 埃米特，没啥特别含义）
| HTML 的Emmet | 说明/示例 |
|---|
！或 html:5
快速生成HTML文档的基本结构，包括html、head、meta、body标签
标签名 div
p： <p></p>，div：<div></div>
标签.类名p.className
div.head：<div class="head"></div>
标签#id
div#head：<div id="head"></div>
标签
h1{标题}：<h1>标题</h1>
标签 [属性=value]
a[href='#']{标签} ：<a href="#">标签</a>，可以只有属性
标签>嵌套子元素标签
li>span{item}：<li><span>item</span></li>
标签+兄弟元素标签
h1+p+p：<h1></h1> <p></p> <p></p>
括号分组( emmet )
(p[class='sel'])>h4：<p class="sel"></p> <h4></h4>
标签*数量
重复生成n个，li{item}*3：<li>item</li> <li>item</li> <li>item</li>
$递增计数
li{item$}*2：<li>item1</li> <li>item2</li>，两位数就两个$$
![1.gif]()
| CSS 的Emmet | 都是属性简写+值+单位（默认px），记住常用的几个就可以了 |
|---|
m10
m10：margin: 10px; ， mt10：margin-top: 10px;
p10、p10%、p10e
p10：padding: 10px，p10%：padding: 10%;，p10e：padding: 10em;
w100、h100
w100：width: 100px;，h100：height: 100px;
bd
bd：border: 1px solid #000;
c#001
c#001：color: #001;
+连接多个属性
m5+p10+lh32：margin: 5px; padding: 10px; line-height: 32;
其他的各种模糊匹配
bg：background: #000; ，bgi：background-image: url();
bx：box-sizing: border-box;，db：display: block;
上面的Emmet可以组合使用，就能快速输入HTML、CSS代码。
05、VSCode插件
- IntelliCode：代码智能提示插件，支持多种语言。
- Live Preview：启动一个本地服务器，页面运行预览。
- Auto Rename Tag：自动闭合、重命名配对的标签。
- Vetur ： Vue开发的必备插件，核心功能：代码高亮、代码片段、代码格式化检查。Vue3升级为
Volar插件。
- Draw.io Integration：来自很受欢迎的开源画图组件 Draw.io，可以绘制各种流程图、UML图、原型图，功能非常丰富，可以本地画图体验非常酷。
- 代码格式化：Prettier，便于统一代码风格，tab宽度、换行规则等。
- 代码检测：ESLint，代码合法性检测。
- Markdown All in One ： 多合一的 Markdown 插件：自动补全，格式化，数学公式支持等功能以及丰富的快捷键。
- MySQL ： MySQL 管理工具。
- REST Client ：REST API 的测试开发利器。
- LeetCode ：Offer 收割利器，在 VS Code 中轻松刷题。
©️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀
