VSCode编辑器极简使用入门

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）

---

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>，两位数就两个$$

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 中轻松刷题。

---

️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀