背景：

在 Build 2015 大会上，微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 系统外，最大的惊喜莫过于宣布推出免费跨平台的 Visual Studio Code 编辑器了！随着2019年的到来，Stack Overflow对2018年的IT生态调查显示：Visual Studio Code超过Visual Studio一跃成为榜首，成为“最受欢迎的开发环境”，没有之一！

Visual Studio 与 Visual Studio Code 区别: Visual Studio 是集成开发环境， 只能运行在windows + mac OS；Visual Studio Code 是一款编辑器， 支持跨平台，在所有操作系统运行；

本文档主要分享 VSCode 在Mac操作系统， React 技术栈开发的实用快捷键 及 插件；

实用快捷键

1.command + K, command + S 打开快捷键编辑页；

说到VSCode 不得不提的快捷键指令，可以查看、设置快捷键；

自定义快捷键：如我们写代码时定义常量需要用全大写， 快速切换选中变量的大小写的快捷键很实用，个人设置如下：

command + K, command + U 变大写

command + K, command + L 变小写

2.command + P 快速打开文件；

不用点击左侧树形菜单，键盘操作快速找到待编辑文件；

3.command + = 和 command + -组合来进行缩放;

快捷键调整字体大小， 快速切换到自己最舒服的字体尺寸；

4.command + ,打开用户设置；

VSCode 设置包括用户设置（全局）， 和工作区（当前项目）设置， 因为我们开发项目对应的技术栈可能不同， 所以推荐使用工作区设置。React 开发推荐工作区设置：

{

  // 设置 react render 中 react 标签智能提示,快速补全html

  "emmet.includeLanguages": {

    "javascript": "javascriptreact"

  },

  // 设置 react render 中 html 代码可折叠

  "editor.foldingStrategy": "indentation"

}

5.control + ~ 打开、关闭终端；

React 前端开发， 编译脚本、样式等是必不可少的操作， 可在当前开发区中快速打开当前项目路径下的终端，输入指令完成前端文件编译。

编辑器内打开终端编译， 不用切换窗口可大大提高开发体验：

支持多终端窗口，前后端运行指令同屏显示：

6.其他；

其他日常编码常用快捷键：

command + shift + N 打开新窗口；

command + N 新建文件；

command + 切出新编辑器（最多三个）

command + W 关闭当前文件

command + S 保存当前文件

command + option + S 保存所有文件

command + F 当前文件查找

command + option + F 当前文件替换

command + D 当前文件查找选中单词下一目标

command + C 复制

command + V 粘贴

command + X 剪切

command + Z 回退

command + shift + Z 前进

command + shift + K 删除当前行代码

option + ↓ 当前行代码下移

option + ↑ 当前行代码上移

shift + option + ↓ 当前行代码整行拷贝到下一行

shift + option + F 格式化代码

强烈推荐的快捷键， 特别适用于统一前端小组成员代码风格。

不同的人，写JS缩进、空格等不一样， 如果小组统一使用VSCode后每个人都习惯用该快捷键格式化代码，将更利于代码维护。

前端代码不需插件就能支持 go to defination， 鼠标移动至变量名 或 文件名 ， command + 单击 即可跳转至对应文件：

​

实用插件

VSCode的插件非常多， 但个人觉得真正实用的插件有：

Auto Close Tag

自动添加HTML / XML关闭标签（必备）

​

Path Intellisense

自动提示文件路径，在HTML 使用a标签的href 或者 require, import 新文件时能智能提示；

参考链接：
vscode: Visual Studio Code 常用快捷键
在用VSCode? 看完这篇文章, 开发效率翻倍!
vscode 前端插件推荐