vscode基础使用教程(基于macOS)

本文基于macOS，在快捷键方面，大多数情况下把cmd键换成ctrl键即可对应到windows和Linux上(但有些特别说明的地方不用换，因为macOS上也会用到control)。

vscode简介

什么是vscode？

vscode是微软开发的一个开源的跨平台的编辑器，全称“Visual Studio Code”，我们都知道，微软有宇宙第一IDE——“Visual Studio”，所以他们把这个新的编辑器起名为“Visual Studio Code”，大家看到“Visual Studio”开头的肯定会很熟悉，而且第一印象会认为它很牛逼，事实上这个编辑器确实牛逼！

vscode与Monaco Editor

vscode默认支持JavaScript、TypeScript以及Node.js，因为它其实就是微软的一款开源在线编辑器Monaco Editor的桌面版，它本身就是用JavaScript、TypeScript、Node.js以及html、CSS写成的(事实上它的核心就是“Monaco Editor”)。虽然默认只支持js、ts以及nodejs，但通过安装插件应该是支持几乎所有语言(反正常用的语言都支持)。

什么是Electron？

那为什么html、css、js能写桌面程序？因为它是基于Electron的！那什么是Electron呢？Electron是一个得到了Node.js和基于不同平台的Native APIs加强的Chromium浏览器(Chrome的开源版本)，它能让你使用Javascrit(包括Nodejs)、HTML和CSS就能开发出桌面应用程序。它的界面，其实就是像我们平时写网页那样用html+css+js写的，而与操作系统交互的部分，则通过nodejs调用Chromium提供的系统API来实现。

VSCode与Visual Studio的关系

VSCode全称为Visual Studio Code，它跟“Visual Studio”其实是没什么关系的，vscode的团队也完全不是开发“Visual Studio”的团队(虽然他们都是微软的员工)，vscode只不过借用了一下“Visual Studio”这个名称，毕竟大家都知道“Visual Studio”这个IDE，它名声大，用这个名字可以快速推广，就像javascript跟java真的没关系，只不过当时java很火，就借用了一下它的名字而已。

vscode进程名称

虽然我们叫它vscode(全名：Visual Studio Code)，但它的进程名称是“Code”，害我搜索“visual”关键字半天没找到

界面

欢迎页

打开之后有欢迎页，欢迎页上有一些快捷菜单，如果不小心关闭了，可以点击顶部菜单的Help→Welcome来打开，在欢迎页的底部有个“Show welcome page on startup”，把它勾上，下次打开vscode时就会自动打开欢迎页

清除欢迎页上已经打开过的历史记录
File→Open Recent→Clear Recently Opened。

交互式演练场

cmd+shift+P，在里面搜索“Interactive Editor Playground”即可打开这个界面，中文翻译为“交互式演练场”，主要是让新用户快速上手vscode的，不过都是英文的

Activity Bar(活动栏)

左侧有5个图标的这个窄窄的边栏叫“Activity Bar(活动栏)”，五个图标作用依次为

• 文件资源管理器
• 跨文件搜索与替换
• 版本管理
• 运行与调试
• 扩展管理

如果你不想要哪个，在这个栏上右击，把你不想要的勾去掉，就可以不显示

右击菜单里是可以把左侧这个栏隐藏的(这个栏叫“Activity Bar(活动栏)”)，当然也可以点击“Move Side Bar Right”把它移到编辑器右侧(如果你习惯放在右侧的话)

如果要重新显示回来，可以在设置里搜索“activity bar”，找到Activity Bar，把它勾上就会显示(如下图)

当然也可以cmd+shift+P打开命令窗口，搜索“activity bar”，找到“View: Toggle Activity Bar Visibility”，回车确定即可显示回来

活动栏左下角这有个人头形状的按钮，用于登录同步配置

活动栏左下角还有一个齿轮图标，齿轮图标都表示设置，这个应该没有人不知道，点击它会有个设置菜单出来，都是些常用的菜单

侧边栏与主编辑器

活动栏(Activity Bar)旁边的叫侧边栏(Side Bar)，用于显示活动栏5个按钮具体可以做什么操作，毕竟活动栏上只是一个按钮

侧边栏旁边就是主编辑器区域

面包屑与小地图

面包屑：
编辑器打开文件后，上方这种导航就叫“面包屑”，点击面包屑(非最后一个)会显示同级文件列表

可以在View→Show breadcrumbs中打开或关闭面包屑(breadcrumb就是面包屑的意思)。

小地图：
在编辑器右侧有个小地图，当屏幕比较大时，我们可以通过它来快速定位要找的代码。可以在View→Show Minimap来开启或关闭小地图。

终端(Terminal)

点击顶部菜单中的Terminal→New Terminal即可在主编辑器下方打开一个新的终端窗口，快捷键control+反引号(反引号就是数字1左边，Tab键上边那个)

如果你配置了zsh，终端有可能显示不出一些符号(zsh配置可以看我这篇文章)

这是因为样式中使用了powerline特殊字体，我们需要使用powerline字体才行，要使用powerline字体首先就得安装powerline字体，但因为你已经在其它的终端(Mac自带或者iTerm2等等)已经正常使用，说明你已经安装过powerline字体，比如我平时用iTerm2终端，我在我的iTerm2的配置里，可以看到我使用的是“Roboto Mono for Powerline”

其实在系统自带的终端里也是一样的(这个字体是不会自动设置的，你用到哪个终端就需要在哪个终端切换到支持powerline的字体)，注意其中的“12”是字体大小，不属于字体名字

所以我们只要修改一下vscode的字体就可以了，修改字体后，关掉终端(终端区域右上角有个⨉号)

在命令行中使用vscode

cmd+shift+P打开命令面板，搜索“shell”，找到“Install ‘code’”(如下图所示)，回车安装

几个基本命令：

#在原窗口打开一个文件
code /path/to/file-to-open

#覆盖原窗口打开一个文件夹(r:replace)
code -r /path/to/folder-to-open

#在新窗口打开一个文件夹
code /path/to/folder-to-open

重启窗口

重启窗口，是指不重启整个vscode的情况下，单独重启窗口，因为vscode本质上是个浏览器窗口，重启窗口我猜就是不加载缓存刷新窗口。

command+shift+p，搜索：reload window，即可搜索到“Developer: Reload Window”，回车即可。

修改配置

在可视界面里修改配置

快捷键：cmd+,（其实macOS里所有软件的偏好设置快捷键，都是cmd+,）。

vscode的配置修改后默认就生效，没有保存按钮，如下面动图所示，它其实是有一闪而过的自动保存，继续往下看截图

这就是我特意录屏捕捉的，在修改后其实settings.json文件旁边是有个小圆点的(表示未保存)，并且左侧的侧边栏里也会显示“1 UNSAVED”(一个文件未保存)，只不过它自动保存的太快，不认真看都不知道它保存了而已

直接修改配置文件

在配置页面右上角有个带旋转箭头的按钮，表示“查看源码”的意思

对Settings界面来说，“查看源码”其实就是查看“settings.json”文件，因为所有配置都是保存在这里的

有些童鞋可能会觉得，配置怎么这么少？其实这些都是自定义的配置，那些没有写出来的配置，都直接使用默认值了，只有你修改过的才会保存在这里。

从编辑器顶部的面包屑可以看出settings.json存在哪里

但其实settings.json还可以在另外的位置，前面的位置是因为在Settings页面里选的是“User”(即“用户空间”)，如果你选它旁边的“Workspace”，再随便修改一下配置，按cmd+s保存，它就会把settings.json保存在当前项目下的.vscode目录里

这种根据项目来保存配置的方法，可以把设置也提交到版本控制系统中，这样大家用的都是统一的配置，当前用户空间的同名配置会覆盖用户空间配置。

---

有些配置在界面里面没有的，这时就需要直接修改settings.json文件，修改json文件就需要手动保存了(除非你设置了自动保存)。

至于具体哪个配置要怎么写，就需要自己网上查了，因为大多数配置不需要在这里直接修改，在Settings页面修改就可以，只有那些Settings页面没有的个性化配置需要直接修改配置文件。

设置自动保存文件

在设置里搜索“auto save”，可以看到，它默认是off的，我一般把它设置为“onFocusChange”，这样当光标失去焦点时就会自动保存了(比如你随意点击一下窗口的其它地方，或者切换到另一个文件，或者切换到其它程序再切回来，都会触发失去焦点)

修改vscode编辑器字体

点击Code→Preferences→Settings(快捷键cmd+,)即可打开vscode的设置界面，然后点击Text Editor→Font，即可看到字体设置，但这个字体设置无法直接选择，所以我们得手写，注意多个字体之间用英文逗号分隔，如果字体名称是多个单词(即有空格)，则需要用单引号括起来表示这是一体的。

如下图，我添加的是“Roboto Mono for Powerline”这个字体，当然还可以修改字体大小(Font Size)

设置自动识别文件编码

像Windows的.txt文件经常都是GBK编码的，但vscode默认是用utf-8编码打开的，这样肯定就会乱码，我们在设置里勾选“Auto Guess Encoding”(自动猜测编码)，即可解决打开Windows.txt文件乱码问题

PHP双击变量不选中$

我们知道，php的变量都是用美元符号$开始的，但是vscode双击选中变量的时候，默认不会选中$符，原因是$符被定义为单词分隔符了，我们把它从音符分隔符列表中去除即可。

在vscode的设置中搜索“word separator”，找到“Editor: Word Separators”，把里面的$符号删掉即可

文件资源管理器

打开/关闭文件夹

打开一个文件夹的几种方法：

• 1、File→Open
• 2、点击迎页中的Open folder...
• 3、点击左侧边栏的Open Folder(如果之前已经打开过，这里就显示具体的文件，就没有这个按钮了)
  

• 4、在已经打开文件夹的情况下，也可以用File→Open或在欢迎页点Open...打开文件夹(会直接把原来的替换掉，相当于关闭原来的，再打开新的)
  

• 5、直接把文件夹拖到vscode编辑器里(无论编辑器处于哪个界面下)，如果编辑器之前已经打开了其它的文件夹，则拖进去之后会把之前的替换掉(相当于关闭原来的，再打开现在的，跟File→Open是一样的，不会覆盖真正的文件，这个大可放心)。

关闭已经打开的文件夹：
File→Close Folder，快捷键cmd+K F(注意这种快捷键按法：先按cmd+K，然后放开cmd和K，再单独按一下F键)。

同时创建多级文件夹

点击创建文件夹图标，在名称里直接用/分隔即代表多级文件夹

只不过当多级文件夹都是空的时候，你是点不开的，但它确实是多级，你点击某一级，它会用下划线表示选中了它(比如我现在选中了“bb”)

在第一级下再随便创建一个文件，这样就能看到第一级展开的状态，第二级同理

同时打开多个项目(文件夹)

方式一：直接把你要打开的文件夹拖放到vscode左侧栏中的Workspace区域，放开鼠标后它就会弹窗提示，你点击第一个按钮“Add Folder to Workspace”就行

方式二：cmd+shift+P打开命令面板，搜索“add fo”即可找到“Workspaces: Add Folder to Workspace…”，回车即可选择文件夹

同时打开多个文件夹(项目)的效果

如果要移除添加的多个文件夹，右击它→点击“Remove Folder from Workspace”即可

保存工作区，cmd+shift+P打开命令面板，在里面搜索“save wo”即可搜索到“Workspaces: Save Workspace As…”

然后会提示要保存到哪里，可以看到它的后缀是.code-workspace，前面的名字我们可以自己命名，下次打开这个保存的文件，就会打开上次保存的工作区

用其它编辑器打开这个文件看一下，我们发现其实它就是个json文件，里面记录了几个文件夹的路径，超级简单有木有

主编辑器

新建文件选择语言不见了

新建一个文件后，默认会显示让你选择一种语言(Select a language)

如果你不小心点了“dont’t show”，那它就不会显示了，而且以后新建文件也不会显示了，但是如果你又想显示怎么办呢？

在Preferences→Settings里，搜索“Untitled”可以搜索到Workbench > Editor > Untitled: Hint，把它设置为text即可

参考：VSCode | New Window select language。

去除底部空白区域

很多人可能都会遇到这样一个问题：在写代码的时候，滚动到前面查看某个函数代码，看完后想滚动到文件最底部继续写代码，结果发现滚动到最底部后，看到的是一片空白，而不是最后一行代码，如下图所示：

这片空白并不是空行，而是编辑器本身的空白，要去除它，可以在vscode的设置中搜索“scrollBeyondLastLine”，如下图，把下图的勾去掉，就不会有上图中的大空白了

预览文件与打开文件

预览文件：
当你在编辑器侧边栏中单击一个文件时，该文件会在编辑器中显示，当你再点击另一个文件时，该文件会替换刚刚打开的文件(而不是在新tab打开)，这是vscode的一个功能，叫“预览文件”功能(tab上的文件名是斜体字)。

因为有时候，我们只是想看看某个文件的内容(比如找文件)，但如果每点击一次就打开一个，可能一会儿就打开十几个tab了，但是用这个预览功能，就不会有这个困扰，因为它每次都会在同一个tab打开。

打开文件：
双击侧边栏中的文件或双击预览tab(tab文件名为非斜体字)。

关闭预览功能
预览功能并非是强制功能，如果你不想要，是可以关闭的。在设置里搜索“preview”→点击“Workbench”→找到“Workbench>Editor:Enable Preview”→把勾去掉即可关闭预览功能

禅模式(Zen Mode)

快捷键：cmd+K Z(Z就是Zen，也就是“禅”)，当然也可以cmd+shift+P打开命令窗口，搜索“zen”找到“View: Toggle Zen Mode”，回车即可启用，按Esc键可以返回正常模式。

注：禅模式其实就是专注模式，该模式会把除主编辑器外的所有元素全部隐藏，让你能专注于编辑(其实就是给小屏幕用的，因为大屏幕够大空间够用，没必要用这模式)。

居中布局模式

如果你的显示器很大，并且是横屏的(显示器正常是横屏，但可以旋转为竖屏)，那么你的代码区域会非常大，你可能需要不断的把头向左向右转才能看完一行代码。

解决方法：cmd+shift+P打开命令窗口，搜索“center”，即可找到“View: Toggle Centered Layout”(切换居中布局)，回车启用它，即可发现编辑器区域到了屏幕中间，而两侧则是空白，你可以用鼠标拖动来调整中间区域的宽度

关闭该模式：在命令窗口中再次运行“View: Toggle Centered Layout”即可切换回来。

折叠代码

我们需要折叠的一般都是一个函数，只需要点击函数左侧那个三角符号就可以折叠或展开。

但是，这种默认折叠是靠识别花括号来决定折叠行的，但有时候可能无法满足要求，所以vscode允许用户自定义折叠区域，一般用#region开头，用#endregion结尾，当点击折叠时，这两个标记之间的代码都会被折叠，当然，但不同语言标记稍有不同，大多体现在注释符号上，具体可以参数官方文档。

快捷键：option+cmd+[(折叠)，option+cmd+]展开。

支持Markdown

vscode默认支持Markdown，新建文件后点击“Select a language”→搜索并选择“Markdown”

点击右上角带放大镜的图标可以左侧写，右侧预览(快捷键cmd+K V)，如果想整个预览(不显示编辑界面)，可以按住option再点这个图标(快捷键cmd+shift+V)

当然使用Typora插件更好，因为Typora更专业一点，显示起来也比默认的好看。

支持JSON

vscode默认是支持JSON的，新建文件后点击“Select a language”→搜索并选择“JSON”(或JSON with comments)，我建议选择JSON with comments，因为这个是允许json中有注释的，如果你选的JSON，你json文件中的注释会被显示为错误，用红色波浪线提示错误。

我们可以把一个未格式化的JSON串粘贴到这里，然后右击→Format Document(option+shift+F)来对它进行格式化。

注：“JSON with comments”是指支持注释的JSON(用//注释)。

显示函数列表窗口

• 1、cmd+shift+p，输入“view: quick open view”→选择“Outline”(大纲)；
• 2、这个操作也可以用快捷键control+Q，先按一次control+Q(按后放开Q不要放开control)调出窗口，然后按每一次Q，光标都会往下移动，往上移动加个shift键，即control+shift+Q，选择后，放开按键即可生效。

换行符^M问题

如果是Windows编辑的文件，是使用\r\n作为换行符的，但是Linux/Unix/macOS都是使用\n作为换行符的(在OS X之前，Mac系统是使用\r作为换行符的)。

那怎样能知道当前文件是使用的是哪个换行符呢？

换行在英文中叫Line Feed，feed这个单词有“喂”的意思，但它也有“往……里添加”的意思（事实上“喂”就是“往嘴巴里添加”），这里line feed意思就是往行末添加的一个符号，\n就是Linux/Unix/macOS等系统的“Line Feed”，简称LF。

而\r\n叫Carriage Return and Line Feed，Carriage是车厢、马车、运输的意思Carriage Return意思是就是“回车”的意思(最初表示在老式打字机中打印头回到行首，并不换行)，所以Carriage Return and Line Feed就是“回车与换行”的意思，简称CRLF，其中\r就是回车，\n就是换行。

如果使用vim打开文件，有时候可能会遇到每行结尾都有^M这个符号，或者在使用git diff时，有时也会遇到这行尾有^M的情况，其实这个^M就是\r，出现这种情况的原因是，它本来的换行符是\r\n，但由于在macOS或Linux下，vim或git diff只识别\n为换行符，剩下的\r就会被认为是“文件内容”，而前面说了\r其实就是^M，所以它显示为^M，既然你都用vscode了，应该知道回车的ASCII码是13吧？其实M就是A-Z 26个字母中的第13个字母，而添加了^都表示控制符，所以^M就是回车(ASCII码表示法)，而\r也是回车(直接写法)。

在编辑器窗口右下角往左偏一点，你可能会看到一个LF或CRLF，这个就是表示当前用的是什么换行，如果是LF，说明是Line Feed，即\n，如果是CRLF，说明是Carriage Return and Line Feed，即\r\n。

如下图所示，如果你想把CRLF(\r\n)换成LF(\n)，全选之后，点击右下角的CRLF它会在顶部弹出选项，你选择LF就好了

另外在配置里搜索eol(end of line的意思)，可以找到默认的换行符，在这里可以把它切换成\n，这样你新建的文件就会以\n作为换行符，但是已有的文件换行符是不会改变的，如果要修改，你可以使用上边说的方法

搜索与替换

在当前文件中搜索

光标在搜索框中：cmd+F。
光标保留在编辑器：cmd+G，用于直接使用上次搜索过的关键字，但又不想重新输入搜索关键字的情况，如果你又想要输入关键字来搜索，那再按一次cmd+F就好了。

在搜索结果之间跳转：Enter键跳转到下一个，shift+Enter跳转到上一个（用于光标在搜索框的情况，光标在编辑器中的情况要按cmd+G或shift+cmd+G）。

搜索框中的三个按钮：

• Aa：区分大小写搜索
• Ab加个左框：全单词搜索(如果你搜索的字符刚好是某个单词的中间部分，这个单词就不会被搜索出来)
• .*：正则搜索

在选中内容中搜索：默认是在整个文件中搜索，点击这个按钮之后就会只在你选中的那段文本中搜索，快捷键为option+cmd+L

默认启用在选中内容中搜索：在设置里搜索“find in selection”，找到“Auto Find in Selection”，如果你把它设置为“always”，那么每次你按cmd+F搜索时，它都会默认启用“在选中内容中搜索”，但大多数时候其实我们并不需要这个，所以最好把这个设置为“Never(从不)”。

在当前文件中替换

option+cmd+F，当然也可以cmd+F后，用鼠标点击搜索框左边的三角箭头切换出替换输入框(如下图)

替换栏旁边的两个按钮，第一个是单次替换，第二个是替换全部

在全局文件中(跨文件)搜索

cmd+shift+F，其实就是活动栏第二个按钮，用鼠标点也是一样的

在全局文件中(跨文件)替换

用鼠标点一下搜索框左侧那个三角箭头就会显示出替换输入框

在全局文件中按文件名搜索

以上的搜索都是指搜索文件的内容，而这个搜索是只搜索文件名，不搜索内容。

快捷键为：cmd+P，详见搜索面板。

搜索面板

搜索面板有4大功能：

• 1、搜索文件：这是原始的搜索面板，用于按文件名搜索当前打开的项目里的文件(快捷键cmd+p)；
• 2、搜索行：在原始搜索面板以英文冒号:开头，用于跳转到当前文件的第n行(快捷键control+g，也可按cmd+p后手动输入:)；
• 3、搜索符号：在原始搜索面板以@开头，“符号”是指函数(方法)名、变量名、常量名、html标签名，css样式名等等(快捷键cmd+shift+o，也可按cmd+p后手动输入@)；
• 4、搜索命令：在原始搜索面板中以>开头，用于搜索命令(快捷键cmd+shift+p，也可按cmd+p后手动输入>)。

搜索文件(原始搜索面板)

下图就是原始搜索面板，用于按文件名搜索文件

快捷键：cmd+p，P就是palette的首字母，它的本义是“调色板”，引申为“面板”，在这里是指搜索面板，我们可以在这里搜索当前项目中的文件。

正常情况下，选中文件→Enter，即会在当前窗口新开一个标签打开该文件，如果按cmd+Enter，则会新建一个分隔窗口并在分隔窗口里打开。

搜索行(跳转到指定行)

下图就是搜索行(定位到指定行)，从下图中可以看到，被定位的行会以不一样的背景色显示出现

用快捷键control+g(g:go，即“前往”)可以在打开原始搜索面板后自动插入英文冒号:，当然你也完全可以cmd+p打开原始搜索面板后，再手动输入英文冒号:。

在原始搜索面板中以英文冒号:开头再输入数字，回车，就可以定位到指定行。当然你也可以按快捷键control+g(g:go，即“前往”)，按这个快捷键会打开原始搜索面板并自动在里面输入英文冒号:(这样你就不用手动输入了)。

事实上，你还可以在冒号前面先搜索文件，然后跟着冒号，就表示要定位到该文件的第几行。

注意：一般来说，只使用一个control键再加一个字母键的快捷键，在macOS中都需要把control键换成cmd键。比如win的ctrl+c/ctrl+x/ctrl+v/ctrl+f等等，在mac中都要换成cmd+c/cmd+x/cmd+v/cmd+f，但是本例的control+g属于少数例外的情况，也就是说在macOS中也是直接按control+g，不需要把control换成cmd。

搜索符号(变量名等)

下图就是搜索“符号”(“符号”指函数/方法名、常量名、变量名、函数名、html标签名、css名等)，其实就相当于显示“函数列表”或者准确点叫“函数及变量列表”

快捷键：cmd+shift+o，该快捷键会打开原始搜索面板并自动在里面输入@符号，当然你用cmd+p打开原始搜索面板后自己输入@符号也行。

另外，这个函数/变量列表，也可以在左侧栏的“大纲(OUTLINE)”中查看，具体见：大纲(OUTLINE)。

搜索命令

下图就是搜索命令界面，在原始搜索面板中以大于号>开头

用cmd+shift+p快捷键可以在打开原始搜索面板后自动插入>符号，当然我们也完全可以cmd+p打开原始搜索面板并手动在里面添加大于号>。

其实一个命令就是“一个操作”，比如“Transform to Uppercase”就是“转换成大写”的操作。

所搜索的命令，都在Code→Preferences→Keyboard Shortcuts中找到，有些命令是已经有快捷键的，我们直接按快捷键就行(当然你执行命令也可以)，有些没有快捷键的，也可以给它设置快捷键。

快捷键及一些设置

vscode中有两种跟常见编辑器不一样的快捷键：

• 1、[⌘K F]，表示先按cmd+K，放开之后(cmd和F都放开)，再按F；
• 2、[⌘K ⌘S]，表示先按cmd+K，然后放开K(保持按住cmd)，再按S；

当你按了cmd+K之后，左下角的状态栏里会显示“cmd+K已经被按下，正在等待第二个按键”

也就是说，cmd+K是一个组合快捷键的触发键(K我们可以理解为Keymap)，只要按下cmd+K，就会等待第二个按键，这就是vscode跟其它编辑器不一样的地方，只不过按第二个按键还分两种情况，一种是放开cmd键再按第二个按键，一种是不放开cmd键再按第二个按钮，通过这样的方法，可以大大减少快捷键冲突，这种做法我觉得非常好。

注意：我说的是“两种”快捷键，不是“两个”，也就是说，像我上边举例那两个一样按法的快捷键还有很多，只不过具体的字母不一样而已。

显示/隐藏侧边栏

侧边栏，英文叫“side bar”，显示隐藏侧边栏有两种方法：

• 1、快捷键：cmd+b，b指bar；
• 2、鼠标单击：鼠标左键单击侧边栏当前打开的图标(如下图，当前打开的是debug，鼠标左键单击它，就可以隐藏)。
  

创建文件/窗口

创建新文件：cmd+N，当然也可以File→New File来创建，此外还可以双击编辑器顶部空白处创建。
创建新窗口：cmd+shift+N

关闭软件窗口

关闭当前Tab：cmd+W
关闭当前窗口：cmd+shift+W（因为cmd+shift+N可以创建新窗口，所以窗口可能不止有一个）。

分隔窗口

在右边分隔出一个窗口：点编辑器右上角的分隔窗口按钮(快捷键cmd+\)；
在下边分隔出一个窗口：按住option键再点编辑器右上角的分隔窗口按钮(默认没有快捷键，但可以在快捷键设置列表搜索“split editor”，然后找到“View: Split Editor Down”并给它设置你喜欢的快捷键)。

也可以用鼠标拖文件到编辑器主窗口的上下左右四个边界，拖到对应的边界后会有一个预览的灰色区域，代表你放开鼠标后，文件将会在这里新建一个分隔的窗口来打开

cmd+shift+P打开命令窗口，搜索“layout 2”即可找到“View Grid Editor: Layout 2⨉2”(即四个窗口)

切换tab与分隔窗口

对macOS稍微了解一点的童鞋可能都知道，macOS的浏览器多个tab，是可以用cmd+1-8来快速切换到第1-8个tab的，而cmd+9会切换到最后一个tab(无论最后一个是第几个)。

而在vscode中，这个快捷键被用于切换多个分隔出来的编辑器

对应的快捷键可以在快捷键设置中搜索“focus editor group”找到

如果想切换单一编辑器内的多个tab，要把cmd换成control，即control+数字来切换，不过切换到最后一个tab不是control+9而是control+0，control+9是切换到第9个tab。

在快捷键设置中搜索“openeditorat”即可搜索到这些快捷键

另外，也可以用option+cmd+←/→来向左(后)/右(前)切换tab。

control+tab：在多个tab之间切换，但是切换后要快速放开(control和tab同时放开)，否则会显示列表让你选择要切换到哪个文件。

cmd+反引号：在多个分隔窗口之间切换。

显示隐藏控制台

cmd+j，至于这个j是什么意思，我没查到，我拿有可能是javacript的意思。

自定义快捷键

Code→Preferences→Keyboard Shortcuts([⌘k ⌘s])打开快捷键设置界面

在快捷键设置界面搜索你要设置快捷键的操作，比如说你要给“把选中文字转换成大写”这个操作设置快捷键，可以搜索“upper”，就能搜索到“Transform to Uppercase”，双击“Keybinding”区域即可设置快捷键(我这里已经设置过了)

上图中双击Keybinding区域后，就会弹出这个框，直接按你要设置的快捷键就会被录入

但是上图录入快捷键后下边提示“1 existing cmd has this keybinding”，意思是已经有一个操作使用了该快捷键，我们点击“1 existing cmd has this keybinding”这行字可以跳转到使用了这个关键字的操作里(其实就是它自动在上边输入了搜索关键字)。

上图中点进去之后，发现是“Toggle Output”占用了这个快捷键

那什么是“Toggle Output”呢？其实Output就是编辑器的输出区域(如下图)，它占用了cmd+shift+u快捷键，意思就是我们按cmd+shift+u就会自动切换到这个区域，但我认为这个用鼠标点就好了，根本没必要占用一个快捷键，所以我们可以去把这个快捷键删掉

右击→点击“Remove Keybinding”就可以把它个快捷键删掉(当然也可以直接用cmd+delete快捷键删除)

删掉之后好像没有了？其实并不是，因为我们刚刚是按快捷键搜索的，删掉这个快捷键“Toggle Output”当然就不会被搜索出来了，但是我们直接搜索“Toggle Output”还是会搜索出来的，只不过快捷键没有了而已，也就是如果你后悔了，你想设置回去，或者给它换一个快捷键都是可以的

然后我们再次在快捷键设置里搜索“uppercase”，找到“Transform to uppercase”后，双击Keybinding区域，在弹出的窗口中直接按你要设置的快捷键，这次它不显示“1 existing cmd has this keybinding”了，录入快捷键后按回车就可以设置了

小写也一样方法设置，因为小写是lowercase，所以我们可以设置为cmd+shift+l，但是我们会发现cmd+shift+l竟然有三个已存在的快捷键

但这三个快捷键是我感觉也没啥用，其实也可以不删除，直接设置转换小写快捷键为cmd+shift+l即可

上/下移动或复制指定行

把光标所在行往上/下移动：option+↑/↓
把光标所在行往上/下复制：option+shift+↑/↓

上面两个操作默认是对光标所在行进行操作的，但是我们还可以对多行同时进行操作，只需要把要操作的多行先选中，再按快捷键即可。

注：这两个功能也可以用鼠标完成。选中要移动位置的一行或多行代码，用鼠标左键按住拖动即可，如果要复制，多按一个option键就行(会显示+号)，其实这个跟在访达中移动文件和复制文件的操作是一样的。

注释快捷键

单行注释：cmd+/
多行注释：option+shift+A

多光标编辑

在任意位置插入光标：按住option键，点击需要插入光标的位置即可。
连续多行相同列插入光标(方法一)：首先用把光标定位到多行的第一行或最后一行的某个位置(在一行中的位置其实就是在第几“列”)，然后按option+cmd+↑/↓，即可从该行开始往上或往下在相同的列插入光标。
连续多行相同列插入光标(方法二)：option+shift+按住鼠标左键拖移(如果鼠标有中键，不用按option+shift，直接用中键拖移就行)。
在多行行尾插入光标：先选中多行，然后按option+shift+i(i表示input，即输入)，就会在这些行的行尾都出现一个光标，当然你用上边的按住option键再点击的方法，也是可以的。另外还可以用“连续多行相同列插入光标”的方法先在任意列插入多个光标，然后再按cmd+→光标都会跑到行尾。
在相同单词后面插入光标：cmd+D，按第一次会选中光标左侧或右侧离它最近的单词，并在该词后面添加光标，不放开cmd，继续按D，会依次往下选中相同的词并在它们后面添加光标。

取消多光标：按Esc键或光标随意点击编辑器区域任意地方。

缩放编辑器

放大编辑器：cmd+加号
缩写编辑器：cmd+减号

注意这个缩小放大，是会把整个编辑器的字体放大或缩小的，如果想只修改编辑器字体大小，可以在Code→Preferences→Settints中找到TextEditor→Font，然后修改里面的字体大小即可，不需要点保存，光标blur即生效。

软换行

View→Word Wrap，快捷键：option+Z。

软换行：是指一行的长度超过编辑器右边界时，就会自动换行显示(这样不需要左右移动即可看全一行代码)，但这只是显示上换行了，实际上是没有换行的(也就是没有\n这种换行符的)，所以叫“软”换行。

行号

在设置里搜索“line numbers”→点击“Text Editor”，即可看到行号设置

等号设置选项：

• on：很好理解，就是正常的显示行号
• off：也很好理解，就是不显示行号
• relative：相对行号，意思是把光标所在行视为第一行，往上和往下都由光标处开始计算，分别是2，3，4，……，这个对于vim编辑非常有用，比如我想复制或删除光标上方的n行，有相对行号就方便很多。
• interval：循环计数，1-10记一轮，10之后又从1开始。

行背景色

vscode的所有设置选项，其实是存储在一个叫settings.json文件中的，而行背景色没有界面可以直接设置，所以我们需要直接编辑settings.json文件，自己添加设置。

在设置界面中→点击右上角的编辑json图标

上图点击编辑json文件后，如下图所示

我们需要添加一个用于自定义当前行背景颜色的配置(如下图)，注意在原json最后添加配置时，应该在最后一行后面添加一个英文的逗号,，因为json每一个元素是以逗号分隔的，而如果后面没有语句，就不能加逗号。

按cmd+S保存后这个颜色马上就会生效，你可以自己修改颜色，鼠标悬停在颜色代码左侧那个小颜色块上(不需要点击)，就会显示出一个可以修改颜色的颜色选择器。

要添加的配置(注意一定要在原配置的最后一行添加一个逗号)

"workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#363e55"
}

行背景色显示范围

只在编辑器行里显示(行号及行号与编辑器之间的空隙不显示背景)

只在行号和行号与编辑器之间的空隙显示背景，编辑器正文不显示背景

显示整行

前面的：line、gutter、all，是在这里选的

显示制表符和空格

在RenderWhiteSpace里选择all即可

空格用“点”显示出来了(就是有点看不太清)

缩进参考线

如图为缩进参考线，当一个函数或语句代码比较多时，用这个参考线参一眼看出它的结束点在哪儿

在设置中搜索“renderIndentGuides”并把它勾上即可

垂直参考线(标尺)

垂直参考线如下图所示，它的作用是有些项目规定一行不能超过多少个字符，有这条线一眼就能看出来

这条线没有直接的设置界面，需要自己编辑settings.json(在设置界面中点击右上角的Open Settings(UI)图标，图标上有个旋转箭头的，很好找)

在settings.json中添加以下配置，方括号中的数字即为标尺要在第几列显示(注意一定要在原配置的最后一行加个逗号再加这行配置)

"editor.rulers": [60]

合并代码

control+J：将选中的多行代码合并为一行(注意macOS也用control)。

代码格式化

option+shift+F：格式化整个文件。
cmd+K cmd+F：只格式化选中的代码(注意这种快捷键的按法是，按住cmd，然后按一下K，不要放开cmd，再按一下F，而如果是cmd+K F就代表先按一下cmd+K，然后放开cmd和K，再单独按F)。

F是指format(格式化)，注意格式化代码需要安装插件，如果没有插件同会提示安装插件。

注：我们一般使用插件进行自动格式化，如果你之前安装过一个插件但是又卸载了，然后换成另一个格式化插件，这时候有可能造成无法格式化代码(特别是js)，这是因为defaultFormatter之前设置的是其它插件但是又被你卸载了导致的。我们在编辑器代码区域右击→Format Document With…→Configure Default Formatter→选择格式化插件，比如“Premitter”。

自动格式化：在设置中搜索“format on save”，勾选它即可在保存文件时自动格式化代码。

注释缩进问题

js中，当前一行代码不以分号结束，后一行的注释会自动缩进(而代码不会缩进)，如下所示，很奇怪

multiply(1, 2)
    // 在js中合法(不会报错)，字符串"1"会被自动转换为数字1
multiply("1", 2)
    // 在js中合法(不会报错)，b值未传，默认为undefined，数字1与undefined相乘，最后结果是NaN(Not a Number)
    // NaN这种结果虽然不报错，但并非我们想要的结果，我们应该在一开始就避免这个问题，而不是让它正常运行再返回一个无意义的结果
multiply(1)

这个问题其实是“JS-CSS-HTML Formatter”这个插件造成的，卸载它，换成Prettier插件就没问题了。

代码缩进

自动缩进：cmd+shift+P打开命令面板，搜索“reindent”，就有reindent lines(重新缩进)和reindent selected lines(重新缩进选中行)。

这两个操作默认没有快捷键，如果需要快捷键可以自己添加，但一般都会自动缩进，少数没有自动缩进的情况用命令缩进一下也不会太麻烦。

---

手动缩进：

• 1、光标放在要缩进的代码前面，按Tab键向右缩进，shift+Tab向左缩进；
• 2、光标放在要缩进的代码所在行任意位置，按cmd+]向右缩进，cmd+[向左缩进；

注：以上只是单行，多行的话，用多光标模式(option+鼠标点击)或选中多行之后，再按同样的快捷键即可；

修改缩进空格数
点击底下的“Spaces: 2”(或“Spaces: 4”)，上方会弹出菜单，我们点击“change view”

然后就能选择你需要的缩进空格数，一般是2或4(目前来看，写前端的一般是2比较多，我个人习惯4)

调换字符位置

control+T：把光标左侧字符及光标本身整体向右移动一位(效果就相当于把光标前后字符交换位置)，如果光标右侧没有字符，则会把光标左侧两个字符调换位置，而如果光标左侧没有字符，则该快捷键不会有任何效果！

鼠标拖选

如果在行号中拖选，可选中鼠标划过的行。

快速修复

如果一个单词打错了，旁边会有个小灯泡，点击小灯泡就会提示要修复成哪个单词，另外“点击小灯泡”这个操作是有快捷键的，快捷键为cmd+.

重构：重命名符号&提取代码为函数

重命名符号(Rename Symbol)：
符号：指常量、变量、函数名(包括对象的方法名)等。

当你要修改一个变量/常量/函数名时，所有调用到该变量/常量/函数的地方都要修改，如果用替换的方法，还是有可能替换错，而用vscode重构的方法就不会错。

把光标放到要重命名的变量/常量/函数名前面或后面，然后按F2就会弹出一个输入框，你在这个框中重命名后，回车后，vscode即会修改所有涉及到该名称的地方。

注1：F2重命名的作用范围是所有文件，control+F2的作用范围是当前文件。
注2：macOS正常情况下F2键是增加亮度的键，F2的功能需要用按住Fn再按，即Fn+F2。
注3：重命名符号默认只支持javascript(包括nodejs)，其它的需要插件支持，比如PHP的“PHP Intelephense”插件就支持，但很遗憾，该功能是付费的，所以我们可以安装另一个免费插件来解决这个问题，我用的是“PHP Refactor Tool”(注意这个插件只有F2，没有control+F2)。

“PHP Intelephense”插件的“rename symbol”功能是“Premium”版本的功能(premium这个意思的意思就是需要“额外费用”)

---

提取代码为函数：
当一个函数内的代码过多，我们想把其中一部分代码作为一个函数提取出来时，我们可以选中函数内要提取的代码，右击→选择“Refactor…”(或按快捷键control+shift+R)→选择“Extract to function in global scope”

它就会把你选中的代码放到一个新函数中，并在原函数调用该新函数

注：该功能默认只支持javascript(包括nodejs)，其它语言需要各自的插件来实现。

option – 把光标移动粒度变成单词

光标移动粒度为一个字符：
←/→：向左/右移动一个字符(所有系统通用)
shift+←/→：向左/右方向选择一个字符(所有系统通用)
delete：删除光标左侧的一个字符
Fn+delete：删除光标右侧的一个字符

把上边的快捷键全部添加一个option就会变成以单词为单位：
option+←/→：以单词为单位向左/右移动
option+shift+←/→：以单词为单位向左/右选中文本
option+delete：以单词为单位删除光标左侧的单词
option+fn+delete：以单词为单位删除光标右侧的单词

注：以单词为单位的意思是：只要有空格隔开就算是单词(无论中英文)，而中文没有空格隔开，所以中文一行字会变认为是一个单词。

光标移动&跳转

option+←/→：按单词为粒度移动光标(macOS通用快捷键，非vscode独有)
cmd+←/→：移动到光标所在行的行首/行尾(macOS通用快捷键，非vscode独有)。
cmd+shift+\：光标在一对花括号之间跳转(一般用于函数的左右花括号)
cmd+enter：在光标所在行下边新开始一行(光标不需要在行尾)
cmd+shift+enter：在光标所在行上边新开始一行(光标不需要在行尾)

撤消与反撤消

cmd+Z：撤消刚刚的操作(比如你刚刚输入了字符，删除了字符)
cmd+shift+Z：是cmd+Z的反操作，只有按过cmd+Z后才能用。
cmd+U：撤消当前文件中光标的移动(即把光标重新定位回当前位置的前一个位置)
control+-：撤消不同文件间的光标的移动(即把光标重新定位回当前位置的前一个位置)，非常适合改了js/css再回去html页面这种操作。

转换大小写

转换大小写这个操作，默认是没有快捷键的，默认只能用命令转换。

选中要转换大小写的字符，然后按cmd+shift+P打开命令面板，在里面输入“uppercase”搜索，找到“Transform to Uppercase”，选中之后回车即可转换成大写，转成小写的话就是“Transform to Lowercase”(搜索“lowercase”)。

但要靠命令来转换大小写，还是非常麻烦的，所以我们可以给它设置快捷键(命令面板的命令都可以设置快捷键)，具体请参考自定义快捷键。

删除操作

cmd+shift+k：删除整行，光标定位到下一行的相同列(注意空格不算一个字符，即不算一列)。
cmd+x：剪切整行，效果等同于删除整行，但光标会定位到下一行的行首。
cmd+delete：删除光标到行首之间的所有字符。
option+delete：删除光标左侧的一个单词。
option+fn+delete：删除光标右侧的一个单词。

注：除了cmd+shift+k为vscode专用快捷键，其它删除操作快捷键基本上都是macOS上几乎所有编辑器通用的快捷键(但有极少数例外，比如微软office系列软件)。

Tab与空格

我们知道，缩进一般是按tab键来缩进，缩进符号有两种，一种是空格，一种是制表符(即\t)，在vscode的设置中搜索“indentation”，可找到“Detect Indentation”，如下图

假设你勾选了这个“Detect Indentation”，如果你打开的文件是别人写好的，你要在上边增加代码，回车自动缩进的时候，就会用自动检测这个文件是使用空格还是使用制表符缩进的，然后自动使用它之前使用的缩进，否则的话，它会固定使用一种缩进(固定是空格或制表符\t)，这样容易造成同一个文件中，又有空格缩进，又有制表符缩进，这样的文件肯定会出问题的，所以这个“Detect Indentation”一定要勾上！

---

在上边的“Detect Indentation”中点击“Editor: Insert Spaces”会跳转到下边的“Editor: Insert Spaces”里，如果你是自己新建一个文件写代码，勾了这个勾，你按tab，它就会把tab转换为空格，但是一个tab会转换成几个空格呢？其实在“Detect Indentation”里有一个“Editor: Tab Size”，你点它，就会跳转到“Editor: Tab Size”里，这个一般是4比较多

大纲(OUTLINE)

当侧边栏选择的是第一个“Explorer”时

左下角，即侧边栏的下方有个“OUTLINE”，中文叫“大纲”

点开大纲(OUTLINE)，可以看到函数、变量、常量列表，就跟你按command+shift+o搜索一样(见：搜索符号(变量名等))

查看文件历史版本

当侧边栏选择的是第一个“Explorer”时

左下角有个时间线(TIMELINE)，点它开，就能看到各种时间保存的版本(如果你的文件已经加入了git，它会显示git的commit，如果只是单纯保存，那它会显示保存的版本)

点击某个历史版本，它会进行文件对比，很容易看出哪里有修改

右击某个版本→点击“Restore Contents”(恢复内容)可以恢复该版本的内容到当前文件中

历史文件版本保存在以下目录中

~/Library/Application Support/Code/User/History/

常用扩展插件

活动栏上最下边那个图标即为扩展插件图标，点击它，就可以在侧边栏里搜索插件。

原则上，能不安装的插件尽量不要安装，因为插件越多，编辑器就会占用越多cpu和内存资源，运行速度也相对越慢，但一些必须的插件还是要安装一下的。

macOS版的vscode扩展是安装在~/.vscode/extensions/目录中的。

按分类搜索扩展插件

可在扩展搜索框输入@符号按分类搜索扩展插件

汉化插件

插件名：Chinese (Simplified) Language Pack for Visual Studio Code

搜索“Chinese”就会出来

当然我自己没有安装这个插件，一是我看英文没什么困难，二是我经常在stackover/github等平台提问题，有时候会附带截图，在这些平台，界面是英文会比中文好点，因为有时候老外不方便看懂中文，可能导致本来可以回答你问题的人由于看不懂而无法回答。

自动重命名标签插件

插件名：Auto Rename Tag

作用：对于一对的标签，当你修改起始标签名时，结束标签也会自动修改

搜索“auto”第一个就是（安装后马上生效，不用重启）

文件夹图标插件

插件名：vscode-icons，这是一个vscode官方插件。

作用：给文件夹添加图标，因为默认只有文件有图标，文件夹没有图标！没有加图标时，如果打开的项目多了，很难分清各个项目及文件夹上下级关系，添加了图标就好多了。

安装前，文件夹没有图标

安装后，文件夹有图标了

搜索“vscode-icons”就会出来

格式化代码插件

插件名：Prettier

作用：对你的代码进行格式化(设置“format on save”还能自动在保存的时候进行格式化)，使代码变的更好看，格式更统一。

临时运行插件Code Runner(推荐)

插件名：Code Runner

作用：不保存文件直接快速运行当前代码。如果不使用code runner，你需要在“Run and Debug”里创建一个“launch.json”，并且必须保存文件，才能运行代码，如果是需要编译的代码，还要创建task.json。

搜索“code runner”就会出来

CodeRunner会自动直接创建一个临时文件，所以不需要保存文件也能运行

使用CodeRunner运行代码的4种方法：
1、点击右上角的三角形按钮

2、右击页面→点击Run Code

3、使用快捷键control+option+N。
4、command+shift+P打开命令面板，并在其中搜索“run code”，选中它并回车执行

清除前一次运行记录：
Code Runner它默认不会清除前一次的运行记录，但我个人大多数时候都要求清除前一次的记录，所以可以在Extension里找到Code Runner，点击它的小齿轮→点击“Extension Settings”，在里面第一项就是“Clear Previous Output”。

快速运行代码：
cmd+N新建一个tab，点击“Select a language”

搜索并选中你要写的语言

如果你要修改语言，可以点右下角再次选择(当然也可以用快捷键cmd+K M，注意这种快捷键的按法是按完cmd+K，然后两个键都放开，再单独按M)

然后在里面写你要写的代码，写完之后使用前面说的CodeRunner运行方法运行代码

Code Runner重要设置
如果你的代码有打印，Code Runner是直接以文本的方式输出的，这跟你在终端中看到的输出是一样的，然而，如果你的代码需要接收用户输入(等待用户输入)，那么你肯定是无法输入的，因为它只是把输出结果原封不动的结你显示出来，它是只读的，是无法接受用户输入的。

要解决这个问题，我们可以设置在终端中运行，在vscode的设置中搜索“run in terminal”(我这边用的英文，中文版我不知道是不是要搜索中文)，找到下图所示的选项，勾上即可(不用重启直接生效)

如果你的代码是要接收用户输入的，并且没有设置在终端运行，此时如果你运行代码，将会导致进程挂起，因为不是在终端control+C也无法结束它，此时你可以右击vscode Output区域→点击“Stop Code Run”，快捷键是control+alt+M

支持golang运行多文件
直接看例子吧，有一个demo项目，里面有三个文件，结构如下

demo
├── go.mod
├── main.go
└── sum.go

三个文件的内容如下，其中go.mod可以在demo目录下执行go mod init自动生成(当然也可以手动创建)

// main.go
package main

import "fmt"

func main() {
    num3 := sum(1, 2)
    fmt.Println(num3)
}

// sum.go
package main

func sum(num1 int, num2 int) int {
    return num1 + num2
}

// go.mod
module demo

go 1.17

如果你在main.go页面下右击→Runn Code（即使用Code Runner来运行main.go），结果会报错如下

# command-line-arguments
demo/main.go:6:10: undefined: sum

这个报错意思是sum函数未定义，但是如果你在终端中，cd到demo目录下，并运行go run .，它就能执行。用Code Runner运行报错的原因，是因为Code Runner只运行了main.go，要解决这个问题，需要增加配置。

打开vscode配置界面，点击右上角三个按钮的中间那个按钮，可以查看配置文件的源码（其实就是json文件）

在配置文件源码中，我们需要增加两个这样的配置

"code-runner.executorMap": {
    "go": "cd $dir && go run .",
},
"code-runner.executorMapByGlob": {
    "$dir/*.go": "go"
},

注意：你可能在配置中能找到executorMapByFileExtension配置项，最初我以为是因为版本更新了，所以把以前的executorMap更新成了executorMapByFileExtension，但事实上并不是，这两个配置项并不相同，它们是可以同时存在的。

所以千万不要自作聪明，把"go": "cd $dir && go run .",增加到executorMapByFileExtension中，这样是不行的。

PHP自动生成函数注释插件

插件名：PHP DocBlocker
作用：在函数上边输入/**然后回车，即可自动生成函数注释。

SFTP插件

vscode默认不支持sftp，需要通过插件来支持，我觉得最好的就是“SFTP”这个插件。

在vscode插件里搜索“sftp”，可以看到有三个一模一样的

其实，第一个是原始作者，是中国人，这是该插件的github链接，但他最新一个版本发布于2018年1月26日，最新代码也是2年前的，主要是他这个插件在新版本的vscode中有bug，根本没法用，但却不见更新，github上的Issues也没有回复过，让人感觉这个人已经消失了一样。

而第二个则是一个法国人fork了第一个版本，修复了bug，这是github链接。

第三个是一个乌克兰人fork了第一个版本，同样也是修复了无法使用的bug，这是github链接。

原始版本就不用看了，肯定没法用了，第二个和第三个用哪个呢？我看第二个的安装人数比第三个多，更新频率也比第三个高，所以我建议安装第二个，也就是Natizyskunk这个。

安装好之后cmd+shift+p打开命令面板，搜索“sftp”，找到“SFTP: Config”，回车

然后填写配置

{
    "name": "自己随便起一个名字",
    "host": "你的服务器ip",
    "protocol": "sftp",
    "port": 22,
    "username": "使用ssh登录你服务器的用户名",
    "privateKeyPath": "~/.ssh/id_rsa",
    "remotePath": "/data/wwwroot/wordpress",
    "uploadOnSave": false
}

我们知道，sftp是基于ssh传输通道的，所以所谓的sftp，其实就是填写登录你服务器的ssh参数。

而ssh登录服务器，可以用“用户名+密码”也可以用“用户名+公钥”方式，我上面的配置采用的是公钥方式，需要你先把公钥上传到你的服务器，至于怎么传，请看这篇文章：Linux-使用ssh免密码登录。

如果你不想用公钥方式，而是要用密码登录，那把上面的“privateKeyPath”改成“password”就行，然后值就填你的ssh登录密码。

remotePath是远程根目录(最后一个目录可用/结尾，也可不用，插件会做兼容处理)，比如我要上传当前正在编辑的一个文件：functions.php，它的路径是

wordpress/wp-content/themes/nisarg-child/functions.php

注意，该路径是该文件在vscode中的路径，并非在电脑上的绝对路径，开头的“wordpress”是一个文件夹，vscode打开的就是这个文件夹，也就是所谓的“根目录”(只不过这个是“本地”的，并且是相对vscode来说的根目录)。

而remotePath的意思，就是在服务器中指定代替“wordpress”这个文件夹的“文件夹”，我指定的是/data/wwwroot/wordpress，意思就是说，最终这个functions.php将会被上传到服务器上的

# remotePath + 在vscode中的路径(不包含“wordpress”这个根目录)
/data/wwwroot/wordpress + /wp-content/themes/nisarg-child/functions.php

# 即最终会上传到服务器上的这个路径
/data/wwwroot/wordpress/wp-content/themes/nisarg-child/functions.php

uploadOnSave当你按保存时，是否自动上传，true就会自动上传。

至于上传，当你填写完sftp配置后，应该要重启一下，然后右击当前编辑的文件，就能在菜单后面发现多了两个菜单：Upload和Download，不用多说，一个是从服务器上下载当前文件，一个是把当前文件上传到服务器

当然你也可以cmd+shift+p打开命令面板，然后在里面输入“sftp”或者“upload”、“Download”之类的，找到对应的命令来上传或下载。

在浏览器中打开html页面插件

安装open in brower插件，然后右击编辑器点击“Open in default browser”

调试程序(Debug)

1、安装插件

调试什么语言就安装对应语言的插件，但nodejs不用安装，因为node插件是编辑器内置的插件，可以输入@符号并选择“buildin”(内置)，就能找到node debug，可以看到，内置的插件是不能卸载的，只能禁用

2、打开文件夹

被调试的程序必须位于一个文件夹内，然后使用vscode打开这个文件夹。

如果你是本来就已经存在的项目，那么这个项目本身肯定就是在一个文件夹内，用vscode打开它就行；

如果你是测试，那么就要自己创建一个文件夹并在该文件夹内创建一个(或多个)测试程序文件，如test.c、test.go、test.js、test.php等等。

3、编写launch.json

无论调试什么语言的代码，都需要创建launch.json文件，创建出来的launch.json文件其实是位于当前文件夹下的.vscode目录中(在访达中点开头的文件是会被隐藏的)

---

创建过程如下：
点击活动栏的“Run & Debug”→“Create a launch.json file”，然后它还会要你选择，但是这个选择你可以不选，随便点一下空白地方它也会创建

比如go语言我选择的是第一个，它创建出来的launch.json如下

如果我不选，它的configuration就是空的，也就是说，你选什么，其实就是默认给你创建一个配置

如果没选也没关系，因为我们还可以点击右下角的“Add Configuration…”来添加，点击之后它会自动在configuration的方括号里弹出配置，你自己选一个合适的就好

4、添加断点

调试肯定要添加断点，跟所有编辑器一样，在行号前面点击该行就能给该行添加一个断点，再次点击就能取消该断点

5、开始调试

当创建launch.json文件后，“Run and Debug”里就会显示出一个三角形的“开始”按钮，点击它就可以开始调试了，“开始”按钮右侧的那个名称表示本次调试使用的launch.json的名称

预定义变量：
launch.json(以及task.json)中可以使用预定义变量，比如${file}表示当前打开的文件，${fileDirname}表示当前文件所在目录，其它的请查看官方文档的预定义变量。

支持javascript

安装插件

说实话，很多文章都说安装这两个插件(看你用哪个浏览器就装哪个)，但事实上我试了不装也一样调试，所以我也不知道这两个插件具体是起什么作用，大家可能先不装试试

打开文件夹

调试要求被调试的文件必须位于vscode打开的文件夹内。所以必须新建一个文件夹，并在vscode中打开该文件夹，然后在文件夹内创建一个html文件(如index.html)。

没错，虽然我们调试js，但因为js是依附于html存在的，所以需要一个html文件，你可以把js写在外部js文件中再引入，也可以直接在html文件中写。

创建launch.json文件

保持当前打开的文件为html文件，然后点击“Run and Debug”→”Create a launch.json file.”→选择“Chrome”，即会创建launch.json并自动打开该文件

开启调试

在html文件里写一些js代码或引入外部js，并给给js适当打一些断点，然后就可以点击左上角的“开始”按钮进行调试了(点击点击“开始”按钮时，必须保持当前打开的文件为该html文件)。

点击“开始”按钮后，将会自动打开本机的chrome浏览器并访问该页面，然后它又会自动跳转回vscode，这时vscode里就已经开启了debug，

如果你关掉打开的浏览器窗口，debug会自动结束，又或者你点停止debug，浏览器窗口也会自动关闭。

支持PHP

请直接看这篇文章：vscode使用xdebug调试php。

支持Golang

插件安装

首先要安装go扩展

cmd+N新建一个tab并点击“Select a language”→搜索并选择“go”，右下角会提示你没有安装gopls

gopls是Go团队开发的一个独立的Go语言服务器，它提供了很多IDE的功能，例如自动补全、重构、工作空间符号搜索、代码美化和诊断分析任何兼容的编辑器前端。

如果我们直接点“install”，则会报错，原因是安装源网站在国内不通

在设置里搜索“proxy”，给它添加一个代理地址(注意这个代理地址是填代理客户端监听的端口，需要你有代理工具才行)

如果前面那个提示在添加代理前被你点过了就没有了，但我们还可以点击右下角的“Analysis Tools Missing”，它就会弹出这个窗口

然后上图点击Show，我们可以看到它缺少这些工具

我们点Install，稍等，如果一切正常(比如你的代理速度不慢并且能正常用)，则会安装成功，如下图所示

这个安装，其实也可以直接用go来安装，因为它本身就是go的包

go get -v 包名

从上边的截图我们可以看到，这些go模块都被安装到了~/go/bin/目录里，因为~/go/目录是go环境变量，在我这里是"/Users/bruce/go"，我们可以在go env里查到

go env | grep "GOPATH"

在macOS里~/go/这个GOPATH应该是默认路径，因为我没有修改过。

测试代码提示

把下边的代码复制到编辑器

package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}

右击→Run Code，可以看到，运行成功

测试debug

要debug，首先需要创建launch.json，而创建launch.json，需要你先打开一个文件夹，这意味着，你不能用临时创建一个文件的方式来debug。

---

创建一个空文件夹，并用vscode打开它，然后在该文件夹下创建一个main.go文件，里面写上简单的测试代码

package main

import "fmt"

func main() {
    fmt.Println("dsfddsfd")
}

点击活动栏上的“Debug & Run”→“Create a launch.json file”→选择第一个“GO:Launch Package”

在launch.json中填入这段配置，表示这是调试当前单个文件

{
    "name": "Launch file",
    "type": "go",
    "request": "launch",
    "mode": "auto",
    "program": "${file}"
}

然后切换到你要调试的单个文件(我这里是main.go)，就可以点左上角那个三角形(注意点击调试前一定要先切换到你要调试的文件，因为我们调试的是当前文件)

调试文件夹和工作区的，由于我对go接触不多，这里暂时不写。

支持python

安装code runner，打开vscode配置界面→点击右上角中间按钮，可以转成json，然后在json中添加以下代码，代表用python3来执行vscode中的python代码

"code-runner.executorMap": {
    "python": "python3",
},

支持C/C++

安装C/C++扩展插件

首先搜索并安装“C/C++”扩展

运行C文件

创建一个test.c文件，里面粘贴上代码

#include <stdio.h>
int main(int argc, char const *argv[])
{
    printf("Hello C\n");
    return 0;
}

在编辑器里右击→Run Code即可快速运行(需要安装Run Code插件)

其实插件做的事儿从控制台里也能看出来，它就是编译出可执行文件并运行，只不过自动做了，不用我们手敲命令，手敲命令也是一样的。

调试C文件

点击活动栏的“Run and Debug”→点击“Create a launch.json file.”→macOS选择“C++(GDB/LLDB)”

上边选择之后，还要选一次，这里我们选clang，选gcc无法调试，由于我只是粗略试验一下过程，所以还不知道具体原因

并且选择clang，它创建launch.json后会自动进入调试，其它语言的话，创建了launch.json后还要点击开启按钮都会开启调试的，这个是原因我也不清楚。

自定义代码片段

请参考：VSCode 利用 Snippets 设置超实用的代码块。
代码块可以用这个在线生成器生成：snippet-generator。

---

参考链接：
vscode教程
宇宙最强vscode教程（基础篇）
第一次使用VS Code时你应该知道的一切配置
ials/what-is-vscode.html)
宇宙最强vscode教程（基础篇）
第一次使用VS Code时你应该知道的一切配置