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 中轻松刷题。
©️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀
