前言
VS Code 软件实在是太酷、太好用了，越来越多的新生代互联 青年正在使用它。
前端男神尤雨溪大大这样评价 VS Code：
10、快捷键列表
你可以点击 VS Code 左下角的齿轮按钮，效果如下：
快捷键参考链接
- 快捷键速查表[官方]：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
三、命令面板的使用
Mac 用户按住快捷键 （Windows 用户按住快捷键），可以打开命令面板。效果如下：
当然，你也可以在菜单栏，选择「首选项-设置-常用设置」，在这个设置项里修改字体大小。
2、快捷键设置
在命令面板输入“快捷键”，就可以进入快捷键的设置。
3、大小写转换
选中文本后，在命令面板中输入，就可以修改文本的大小写了。
（2）使用命令行：
-
命令：启动 VS Code 软件
-
命令：通过 VS Code 软件打开指定目录/指定文件。
四、私人订制：VS Code 的常见配置
1、VS Code 设置为中文语言
Mac 用户按住快捷键 （Windows 用户按住快捷键），打开命令面板。
在命令面板中，输入，选择，然后安装插件即可。
或者，我们可以直接安装插件，是一样的。
安装完成后，重启 VS Code。
2、面包屑（Breadcrumb）
打开 VS Code 的设置项，选择「用户设置 -> 工作台 -> 导航路径」，如下图所示：
有了这个面包屑导航，我们可以在任意目录、任意文件之间随意跳转。
我建议保留这个设置项，无需修改。
5、右侧是否显示代码的缩略图
VS Code 会在代码的右侧，默认显示缩略图。你可以在设置项里搜索 进行设置，配置项如下：
上图中，我们将配置项修改为之后，那么，当光标离开该文件后，这个文件就会自动保存了。非常方便。
方式二：
当然，你也可以直接在菜单栏选择「文件-自动保存」。勾选后，当你写完代码后，文件会立即实时保存。
8、保存代码后，是否立即格式化
保存代码后，默认不会立即进行代码的格式化。你可以在设置项里搜索查看该配置项：
- editor.insertSpaces：按 Tab 键时插入空格（默认）。截图如下：
10、新建文件后的默认文件类型
当我们按下快捷键「Cmd + N」新建文件时，VS Code 默认无法识别这个文件到底是什么类型的，因此也就无法识别相应的语法高亮。
如果你想修改默认的文件类型，可以在设置项里搜索，设置项如下：
我建议这个设置项保持默认的打钩就好，不用修改。删除文件前的弹窗提示，也是为了安全考虑，万一手贱不小心删了呢/p>
接下来，我们来讲一些更高级的配置。
12、文件对比
VS Code 默认支持对比两个文件的内容。选中两个文件，然后右键选择「将已选项进行比较」即可，效果如下：
13、查找某个函数在哪些地方被调用了
比如我已经在文件里调用了 函数。那么，如果我想知道函数在其他文件中是否也被调用了，该怎么做呢/p>
做法如下：在 文件里，选中函数（或者将光标放置在函数上），然后按住快捷键「Shift + F12」，就能看到 函数在哪些地方被调用了，比较实用。
14、鼠标操作
-
在当前行的位置，鼠标三击，可以选中当前行。
-
用鼠标单击文件的行 ，可以选中当前行。
-
在某个行 的位置，上下移动鼠标，可以选中多行。
15、重构
重构分很多种，我们来举几个例子。
命名重构：
当我们尝试去修改某个函数（或者变量名）时，我们可以把光标放在上面，然后按下「F2」键，那么，这个函数（或者变量名）出现的地方都会被修改。
方法重构：
选中某一段代码，这个时候，代码的左侧会出现一个「灯泡图标」，点击这个图标，就可以把这段代码提取为一个单独的函数。
16、在当前文件中搜索
在上面的快捷键列表中，我们已经知道如下快捷键：
-
Cmd + F（Win 用户是 Ctrl + F）：在当前文件中搜索，光标在搜索框里
另外，你可能会注意到，搜索框里有很多按钮，每个按钮都对应着不同的功能，如下图所示：
17、全局搜索
在上面的快捷键列表中，我们已经知道如下快捷键：
- Cmd + Shift + F（Win 用户是 Ctrl + Shift +F）：在全局的文件夹中进行搜索。效果如下：
上图中，我们可以在这里进行常见的 git 命令操作。如果你还不熟悉 Git 版本管理，先去补补课吧。
与此同时，我建议安装插件，它是 VS Code 中我最推荐的一个插件，简直是 Git 神器，码农必备。
19、将工作区放大/缩小
我们在上面的设置项里修改字体大小后，仅仅只是修改了代码的字体大小。
如果你想要缩放整个工作区（包括代码的字体、左侧导航栏的字体等），可以按下快捷键「cmd +/-」。windows 用户是按下「ctrl +/-」
当我们在投影仪上给别人演示代码的时候，这一招十分管用。
如果你想恢复默认的工作区大小，可以在命令面板输入（英文是）
20、创建多层子文件夹
我们可以在新建文件夹的时候，如果直接输入，比如：
21、 文件夹的作用
为了统一团队的 vscode 配置，我们可以在项目的根目录下建立目录，在里面放置一些配置内容，比如：
-
：工作空间设置、代码格式化配置、插件配置。
-
：ftp 文件传输的配置。
目录里的配置只针对当前项目范围内生效。将提交到代码仓库，大家统一配置时，会非常方便。
22、自带终端
我们可以按下「Ctrl + `」打开 VS Code 自带的终端。我认为内置终端并没有那么好用，我更建议你使用第三方的终端 item2。
23、markdown 语法支持
VS Code 自带 markdown 语法高亮。也就是说，如果你是用 markdown 格式写文章，则完全可以用 VS Code 进行写作。
写完 md 文件之后，你可以点击右上角的按钮进行预览，如下图所示：
安装步骤如下：
（1）进入 https://github.com/tonsky/FiraCode 站，下载并安装「Fira Code」字体。
（2）打开 VS Code 的「设置」，搜索，修改相关配置为如下内容：
上方的第二行配置，取决于个人习惯，我是直接设置为，因为我不太习惯连字。
26、代码格式化：Prettier
我们可以使用 进行代码格式化，会让代码的展示更加美观。步骤如下：
（1）安装插件 。
（2）在项目的根路径下，新建文件，并在文件中添加如下内容：
上面的内容，是我自己的配置，你可以参考。
更多配置，可以参考官方文档：https://prettier.io/docs/en/options.html
27、文件传输：sftp
如果你需要将本地文件通过 ftp 的形式上传到局域 的服务器，可以安装这个插件，很好用。在公司会经常用到。
步骤如下：
（1）安装插件。
（2）配置 文件。 插件安装完成后，输入快捷键「cmd+shift+P」弹出命令面板，然后输入，回车，当前工程的文件夹下就会自动生成一个文件，我们需要在这个文件里配置的内容可以是：
-
：服务器的 IP 地址
-
：用户名
-
：存放在本地的已配置好的用于登录工作站的密钥文件（也可以是 ppk 文件）
-
：工作站上与本地工程同步的文件夹路径，需要和本地工程文件根目录同名，且在使用 sftp 上传文件之前，要手动在工作站上 mkdir 生成这个根目录
-
：指定在使用 sftp: sync to remote 的时候忽略的文件及文件夹，注意每一行后面有逗 ，最后一行没有逗
举例如下：(注意，其中的注释需要去掉)
“uploadOnSave”: true, //监听保存并上传
“syncMode”: “update”,
“watcher”: {
//监听外部文件
“files”: false, //外部文件的绝对路径
“autoUpload”: false,
“autoDelete”: false
},
“ignore”: [
//忽略项
“/.vscode/”,
“/.git/”,
“**/.DS_Store”
]
}
（3）在 VS Code 的当前文件里，选择「右键 -> upload」，就可以将本地的代码上传到 指定的 ftp 服务器上（也就是在上方 中配置的服务器 ip）。
我们还可以选择「右键 -> Diff with Remote」，就可以将本地的代码和 ftp 服务器上的代码做对比。
七、VS Code 配置云同步
我们可以将配置云同步，这样的话，当我们换个电脑时，即可将配置一键同步到本地，就不需要重新安装插件了，也不需要重新配置软件。
我
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！