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

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

Table of Contents

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来实现。

Visual Studio Code与Visual Studio的关系

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

vscode进程名称

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

界面

欢迎页

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

清除欢迎页上已经打开过的历史记录
FileOpen RecentClear Recently Opened

交互式演练场

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

Activity Bar(活动栏)

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

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

-w682

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

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

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

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

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

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

侧边栏与主编辑器

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

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

面包屑与小地图

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

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

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

终端(Terminal)

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

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

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

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

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

在命令行中使用vscode

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

几个基本命令

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

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

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

修改配置

在可视界面里修改配置

快捷键:cmd+,(其实macOS里所有软件的偏好设置快捷键,都是cmd+,)。

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

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

直接修改配置文件

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

对Settings界面来说,“查看源码”其实就是查看“settings.json”文件,因为所有配置都是保存在这里的
-w899
有些童鞋可能会觉得,配置怎么这么少?其实这些都是自定义的配置,那些没有写出来的配置,都直接使用默认值了,只有你修改过的才会保存在这里。

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

但其实settings.json还可以在另外的位置,前面的位置是因为在Settings页面里选的是“User”(即“用户空间”),如果你选它旁边的“Workspace”,再随便修改一下配置,按cmd+s保存,它就会把settings.json保存在当前项目下的.vscode目录里
-w1027
这种根据项目来保存配置的方法,可以把设置也提交到版本控制系统中,这样大家用的都是统一的配置,当前用户空间的同名配置会覆盖用户空间配置。


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

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

设置自动保存文件

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

修改vscode编辑器字体

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

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

设置自动识别文件编码

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

PHP双击变量不选中美元符号问题

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

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

文件资源管理器

打开/关闭文件夹

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

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

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

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

关闭已经打开的文件夹:
FileClose Folder,快捷键cmd+K F

同时创建多级文件夹

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

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

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

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

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

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

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

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

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

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

主编辑器

预览文件与打开文件

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

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

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

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

禅模式(Zen Mode)

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

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

居中布局模式

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

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

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

折叠代码

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

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

快捷键:option+cmd+[(折叠),option+cmd+]展开。

支持Markdown

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

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

支持JSON

vscode默认是支持JSON的,新建文件后点击“Select a language”→搜索并选择“JSON”(或JSON with comments)。

我们可以把一个未格式化的JSON串粘贴到这里,然后右击→Format Doment(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,选择后,放开按键即可生效。

搜索与替换

在当前文件中搜索

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

在搜索结果之间跳转Enter键跳转到下一个,shift+Enter跳转到上一个(用于光标在搜索框的情况,光标在编辑器中的情况要按cmd+Gshift+cmd+G)。

搜索框中的三个按钮

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

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

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

在当前文件中替换

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

替换栏旁边的两个按钮,第一个是单次替换,第二个是替换全部
image.jpg

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

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

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

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

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

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

快捷键为:cmd+P,详见搜索面板

搜索面板

搜索面板有4大功能:

  • 1、搜索文件,这是原始的搜索面板(cmd+p),用于按文件名搜索当前打开的项目里的文件;
  • 2、搜索行,在原始搜索面板以英文冒号:开头(按control+g会自动添加该冒号,注意macOS也用control,不用换cmd),用于跳转到第n行;
  • 3、搜索符号(symbols),在原始搜索面板以@开头(无快捷键,需要cmd+p打开原始搜索面板并自己输入@),“符号”是指变量名、常量名、html标签名,css样式名等等,选中搜索到的对应符号,回车就会自动把光标定位到该符号的前面;
  • 4、搜索命令,在原始搜索面板中以>开头就表示搜索命令(按cmd+shift+p可自动输入>符号)。

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

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

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

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

搜索行(跳转到指定行)

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

用快捷键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名等),其实就相当于显示“函数列表”或者准确点叫“函数变量列表”
-w680

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

搜索命令

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

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

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

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

快捷键

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

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

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

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

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

显示/隐藏侧边栏

侧边栏,英文叫“side bar”,快捷键:cmd+b,b指bar。

创建文件/窗口

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

关闭软件窗口

关闭当前Tab:cmd+W
关闭当前窗口:cmd+shift+W(因为cmd+shift+N可以创建新窗口,所以窗口可能不止有一个)。

分隔窗口

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

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

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

切换tab与分隔窗口

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

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

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

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

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

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

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

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

显示隐藏控制台

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

自定义快捷键

CodePreferencesKeyboard Shortcuts([⌘k ⌘s])打开快捷键设置界面

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

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

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

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

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

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

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

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

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

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

上/下移动或复制指定行

把光标所在行往上/下移动: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+减号

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

软换行

ViewWord Wrap,快捷键:option+Z

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

行号

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

等号设置选项

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

行背景色

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

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

上图点击编辑json文件后,如下图所示
-w796

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

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

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

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

行背景色显示范围

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

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

显示整行
-w743

前面的:line、gutter、all,是在这里选的
-w782

显示制表符和空格

在RenderWhiteSpace里选择all即可
-w786

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

缩进参考线

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

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

垂直参考线(标尺)

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

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

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(格式化),注意格式化代码需要安装插件,如果没有插件同会提示安装插件。

代码缩进

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

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


手动缩进

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

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

调换字符位置

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

鼠标拖选

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

快速修复

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

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

重命名符号(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这个意思的意思就是需要“额外费用”)
-w1436


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

-w428

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

注:该功能默认只支持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系列软件)。

常用扩展插件

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

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

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

按分类搜索扩展插件

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

汉化插件

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

搜索“Chinese”就会出来
-w643

当然我自己没有安装这个插件,一是我看英文没什么困难,二是我经常在stackover/github等平台提问题,在这些平台,界面是英文会比中文好点,毕竟全世界的人都可以回答。

自动重命名标签插件

插件名:Auto Rename Tag

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

搜索“auto”第一个就是(安装后马上生效,不用重启)
-w589

文件夹图标插件

插件名:vscode-icons

作用:给文件夹添加图标,因为默认只有文件有图标,文件夹没有图标!

安装前,文件夹没有图标
-w205

安装后,文件夹有图标了
-w220

搜索“vscode-icons”就会出来
-w270

临时运行代码插件

插件名:Code Runner

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

搜索“code runner”就会出来
-w306

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

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

2、右击页面→点击Run Code
-w632

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

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

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

搜索并选中你要写的语言
-w779

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

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

PHP自动生成函数注释插件

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

-w474

SFTP插件

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

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

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

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

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

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

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

然后填写配置

{
    "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,不用多说,一个是从服务器上下载当前文件,一个是把当前文件上传到服务器
image.jpg

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

调试程序(Debug)

1、安装插件

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

2、打开文件夹

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

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

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

3、编写launch.json

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


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

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

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

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

4、添加断点

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

5、开始调试

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

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

支持javascript

安装插件

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

打开文件夹

调试要求被调试的文件必须位于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并自动打开该文件
-w644

开启调试

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

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

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

支持PHP

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

支持Golang

插件安装

首先要安装go扩展
-w359

cmd+N新建一个tab并点击“Select a language”→搜索并选择“go”,右下角会提示你没有安装gopls
-w542
goplsGo是团队开发了一个独立的Go语言服务器,它提供了很多IDE的功能,例如自动补全、重构、工作空间符号搜索、代码美化和诊断分析任何兼容的编辑器前端。

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

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

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

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

我们点Install,稍等,如果一切正常(比如你的代理速度不慢并且能正常用),则会安装成功,如下图所示
-w1137
这个安装,其实也可以直接用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,可以看到,运行成功
-w1151

测试debug

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


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

package main

import "fmt"

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

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

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

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

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

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

支持C/C++

安装C/C++扩展插件

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

运行C文件

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

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

-w478

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

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

调试C文件

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

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

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

自定义代码片段

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


参考链接:
vscode教程
宇宙最强vscode教程(基础篇)
第一次使用VS Code时你应该知道的一切配置

打赏
订阅评论
提醒
guest

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请发表评论。x
()
x

扫码在手机查看
iPhone请用自带相机扫
安卓用UC/QQ浏览器扫

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