宁皓网 vs code

VS Code 是微软发布的一款开源代码编辑工具。

封面摄影：Danilo Faria

来自  https://ninghao.net/course/6330#info

准备

1)安装 VS Code 编辑器

vs code 就是 visual studio code .. 是微软开发的一款开源的代码编辑器 .. 在 code.visualstudio.com 这个网站上，

https://code.visualstudio.com

你可以下载适合自己系统的 vs code ...

在 mac ，windows 还有 linux 系统上都可以找到对应版本的 vs code ..

我用的是 mac ... 并且我已经提前下载好了 .. 找到这个下载下来的压缩包 .. 先解压一下 ...

然后直接把解压出来的 vs code 放在系统的应用程序目录的下面 ..

完成以后，我们就可以在启动台里面，找到安装好的 vs code ..

打开以后，会显示一个默认的欢迎页面 .. 上面会显示一些有用的帮助信息 ..

来自 https://ninghao.net/video/6332#info

2)安装简体中文语言包

因为我的操作系统的语言是简体中文.. 所以第一次启动 vs code 以后，编辑器的右下角会出现一个提示 .. 说可以安装简体中文语言包，并且把它设置成编辑器默认的语言 .. 按一下安装并重启 ..

vs code 会下载简体中文语言，安装好以后，会把它设置成编辑器默认的语言 .. 重启编辑器以后，你会发现编辑器的界面 ... 还有编辑器的菜单 ... 现在显示的都会是简体中文 ..

虽然简体中文对我们更友好一些 .. 不过我还是推荐大家可以使用默认的英文 .. 这样可以学几个英文单词 .. 遇到问题的时候也更容易去搜索相关的英文文档 ..

我们可以把编辑器的语言设置成英文 .. 或者直接把刚才安装的简体中文扩展彻底删除掉 .. 编辑器的最左边这里叫 Activity Bar .. 点一下上面的扩展小图标 ..

找到之前安装的简体中文语言包扩展 .. 点一下设置小图标 .. 选择卸载 ..

重新加载可以刷新编辑器的状态 ... 不过刷新之后编辑器上显示的仍然是中文语言，需要重新启动一下编辑器 ...

这里可以再取消勾选这个 启动时显示欢迎页 ..

然后关掉编辑器 ... 重新再打开它 ..

编辑器的界面现在就变回了原来的英文 ... 这个欢迎界面仍然是打开的状态 .. 这是因为编辑器会记住上次打开的东西 ..

再把这个欢迎界面关掉 .. command + W ...

出现这个安装语言的提示窗口以后 .. 可以打开 设置小图标 ... 选择 Don't show again .. 不再提示 ..

重新再打开编辑器 ... 这回就不会再显示那个欢迎界面了 .. 如果以后你需要它的话 .. 可以打开命令面板 .. command + shift + P ... 搜索一下 welcome ... 可以再打开编辑器的欢迎页面 ...

来自  https://ninghao.net/video/6333

3)使用 code 命令行工具

vs code 编辑器带了一个命令行工具，可以在命令行界面下面使用它 .. 先打开系统上的终端 ... 输入 code ... 会显示没找到这个命令 .. 因为这个工具还没包含在系统的环境变量里面 ..

回到编辑器 .. 打开命令面板 .. 可以使用快捷键 command + shift + P， 或者也可以在 View 菜单上 .. 找到这个 Command Palette ..

在这个命令面板上面可以搜索想要执行的任务 .. 搜索一下 shell command ... 执行一下这个 Install code command in PATH .. 把 code 命令放到系统的环境变量里面 ..

完成以后再到终端上试一下 ... 执行一下 code --help ... 会显示这个命令的帮助信息 ..

下面可以新建一个目录 .. 名字是 ninghao-code ... 进入到这个目录的下面 ... 然后再用 vs code 打开这个目录 .. 执行一下 code ./ ... 意思就是使用 vs code 编辑器打开当前所在的目录 ..

来自  https://ninghao.net/video/6334#info

设置

4)用户设置

我们可以自由定制 VS Code 编辑器 .. command + B 可以切换显示编辑器的边栏 .. 打开浏览器相关的配置 .. Code .. Preferences .. Settings ..

或者使用快捷键 Command + ,  (  Command  ,  )也可以在命令面板上搜索 settings .. 选择执行 open settings 这个命令 ...

左边显示的是编辑器默认的一些配置 .. 这些配置会根据类型分成了不同的群组 .. 右边默认打开的就是用户自己的设置 .. 这里已经有了一个配置选项，workbench.startupEditor .. 它的值是 newUntitledFile .. 意思就是启动编辑器以后会新建一个没有标题的文件 .. 我们可以把它的值设置成 none ...

现在我还想修改一下编辑器里面的字号 .. 这里可以先搜索一下 fontsize .. 如果你安装了中文语言包，可以直接使用中文搜索 ..

找到一些配置选项，根据配置的注释上的描述，可以判断一下是不是自己需要的配置 .. 比如我要的是 editor.fontSize 这个配置 .. 鼠标放上去 .. Copy to settings .. 复制到设置 ..

出现一个提示，说不能修改这个配置 .. 这个是因为刚才我修改了用户配置文件，但是还没有保存 .. 选择这个 Save and Retry .. 保存并重试 ..

这样配置选项就会到用户设置这里 ..

我们可以直接在自己的配置文件里修改这个配置选项的值 .. 把它换成 16 ... 保存以后，你会发现编辑器里的文字会比之前的大一些 ...

编辑器底部这块叫 StatusBar .. 就是状态栏 .. 默认这里会显示一个反馈小图标 .. 就是这个小笑脸 .. 我们可以把它隐藏起来 .. 搜索一个配置 .. Status ... 会找到一个 workbench .. 表示工作台 .. statusBar .. feedback .. visbile ... 现在它的值是 true .. 修改一下 ... 设置成 false ..

会把这个配置选项复制到我们自己的配置里面，对应的值会变成 false .... 这样状态栏上的反馈图标就不见了 ..

默认想要隐藏这个状态值，可以把 workbench.statusBar.visible 这个配置的值，设置成 false ...

平时工作的时候如果需要状态栏，可以再让它显示出来 .. 打开命令面板 .. 搜索一下 status bar ... 会找到一个切换显示状态的任务 ..

编辑器右边这里显示的这个东西叫 minimap，小地图 .. 搜索一下 minimap ... 把这个 editor.minimap.enabled 的值设置成 false ... 这样就会禁用掉刚才我们看到的那个小地图 ..

配置的时候也可以这样 .. 直接在这个用户设置文件里面输入想要的配置 ... 比如工作台相关的配置的名字里面一般都会有个 workbench ... 输入以后编辑器会给我们提示 .. 告诉我们它下面可以配置的一些选项 .. 比如我要配置一下字体平滑 .. fontAliasing .. 默认它的值是 default .. 这里可以把它设置成 antialiased ..

来自  https://ninghao.net/video/6336#info

5)主题

theme，主题 .. 主题可以更改编辑器的外观样式 .. 找到 Code .. Preferences ... Color Theme .. 这个菜单项可以打开编辑器的主题列表 .. 注意这个菜单项上有个快捷键 .. Command + K ... Command + T ... 它的意思是先按一下 Command + K ... 接着再按一下 Command + T ...

编辑器的主题分成了两大类 .. 亮色主题，还有暗色主题 .. 默认编辑器用的是一款暗色主题 .. 输入主题的名字 .. 可以预览编辑器使用了这个主题之后的样式 ..

一般主题也会带着一个对应的代码语法高亮的样式 ..

默认的主题不喜欢，我们可以去安装社区提供的主题 .. Install Additional Color Theme ..

这样会打开编辑器的扩展商店 .. 列出 themes 这个分类的扩展 .. 也就是主题 ..

比如我要安装一个 atom one dark .... 搜索一下这个主题 ... 找到以后安装一下它 ..

安装完成以后，再重载一下编辑器 ...

然后再打开主题列表 ... 选择刚才安装的 atom one dark 这个主题 .. 你会看到编辑器的外观样式的变化 .. 注意在 user settings 里面，会多了一个配置选项 .. workbench.colorTheme ... 它设置的就是编辑器要使用的主题 ..

要换回原来的主题 .. 可以把它的值设置成 Visual Studio Dark .. 或者在用户设置里去掉这个配置选项 ...

来自  https://ninghao.net/video/6337#info

6)终端

VS Code 编辑器默认集成了终端 .. 就是你可以在编辑器里面打开系统上的命令行界面 .. Toggle Integrated Terminal .. 这个任务有个快捷键是 ctrl + 反引号  ( ctrl  ` )..

它会切换显示终端窗口 ... 这里会显示终端的列表 ... 现在只有一个终端窗口 .. 我们可以把它分成两栏 .. 按一下拆分终端 ... 或者使用快捷键 Command + \ ..

如果你需要新的终端窗口 ... 或者按一下 ctrl + shift + 反引号 ... 或者在命令面板上搜索一下 terminal new ...

现在这个窗口列表里面，就会有两个终端窗口 ... 按一下这个垃圾筒小图标，可以关掉当前的终端窗口 ...

在 mac 系统上，这个终端，打开的其实就是系统上的终端 .. 在用户设置这里 .. 我们可以搜索一下 terminal 相关的配置 ...

我们可以配置一下集成的终端 .. 比如在 mac 上面，打开的应该就是这个 Terminal.app ..

在 Windows 系统上，打开的是系统的 cmd .. 如果你在 Windows 上使用 Cmder 作为系统的终端 .. 这里可以修改一下 Windows 运行的终端的位置 .. 把它换成 cmder 所在的位置 ..

然后再找到终端的字号的配置 ... 修改一下它 .. 默认是 12， 改成 16 ...

搜索一下 termianl cursor ... 把光标的样式换成 underline ..

我的终端上使用的字体是 Monaco .. 这里也可以修改一下集成的终端字体 .. terminal.integrated.fontFamily .. Monaco ..

行间距也可以修改一下 ... 对应的选项就是 ternimal.integrated.lineHeight ... 设置成 1.2 ...

这个终端上的文字的颜色我也想改一下 .. 在用户设置里面 .. 添加一个 workbench.colorCustomizations ... 它里面再添加一个 terminal.foreground ... 然后设置一下想要的颜色 ... #5b8748

你会发现终端上显示的文字的颜色会有一些变化 ...

来自  https://ninghao.net/video/6338#info

7)自定义界面颜色与代码语法高亮颜色

改变编辑器的外观样式，除了可以选择不同的主题以外，我们还可以在用户设置里去设置一下编辑器的某个具体的地方的颜色 .. 你可以先选择一个自己喜欢的主题，然后再基于它去修改需要的地方 ..

界面上的不同的颜色都有自己名字，具体的名字你可以搜索一下 VS Code theme color reference ...

https://code.visualstudio.com/api/references/theme-color

在用户设置里面先添加一个 workbench.colorCustomizations ... 然后在它里面去设置界面上的颜色 ... 之前介绍编辑器终端的时候我添加了两个颜色的设置 ..

这些颜色设置我们也可以针对某个特定的主题 ... 比如 VS Code 默认的主题是 Default Dark+ ... 先添加一个 Default Dark+ .. 然后在它里面再去设置颜色 .. 这样这些颜色的设置就只会影响这个 Default Dark+ 主题 ..

假设我要修改一下状态栏的颜色 .. 先把状态栏显示出来 ...

然后在设置里添加一个 statusBar.background .. 它影响的就是状态栏的背景颜色 .. 值设置成 #0f0f0f ..

你会看到状态栏的颜色的变化 .. 再设置一下状态栏上的内容的颜色 .. 名字是 stautsBar.foreground .. #575757 ..

因为这些设置是在 Default Dark+ 里面，所以它们只会影响这个主题 ..

语法高亮

大部分主题里面都带着一个对应的语法高亮的样式，这些东西我们也可以自己定制一下 .. 在用户设置里 .. 先添加一个 editor.tokenColorCustomizations ...

里面设置一下主题 .. 比如 Default Dark+ ... 这个主题的语法高亮里面，注释内容的颜色是一种绿色 .. 我希望代码里面的注释可以不那么显眼 .. 所以可以修改一下 comments 内容的颜色 ... 用一种浅灰色 .. #555555 ..

注意代码里面的注释内容的颜色的变化 ... 现在它会变成一种浅灰色 ..

如果你想使用我的编辑器的相关的配置，可以在这个地址里面找到 ... 复制一下 settings.json 文件里的内容 ... 把它们粘贴到你自己的编辑器的用户设置里 ...

然后可以再根据自己的实际情况去修改一下 ...

有些配置可能得重新启动一下编辑器才能生效 ...

https://coding.net/u/ninghao/p/vscode-preferences/git/blob/master/settings.json 

来自  https://ninghao.net/video/6358

8)自定义快捷键

VS Code 编辑器里定义了大量的快捷键 .. 查看在编辑器里定义的这些快捷键，可以这样 .. 打开命令面板 .. 搜索一下 key ... 然后选择 打开键盘快捷键 ... Open keyboard Shortcuts ... 这里会显示定义的快捷键 ..

命令就是要执行的任务 .. Keybinding 是对应的快捷键 .. 注意有点是组合快捷键 .. 比如这个 Add line Comment，你得先按一下 Command + K ，接着再按一下 Command + C ..

Source 表示的是这个快捷键是谁定义的 .. 后面还有一个 When，它设置的是定义的这个快捷键在什么时候可以使用 .. 比如在编辑代码的时候 .. 在打开编辑器调试模式的时候等等 ..

双击，可以修改定义的这个快捷键 ..

另外下面还有一些命令还没有快捷键 .. 搜索一下 new file ... 双击这个 explorer.newFile .. 这个命令可以在项目目录树上添加新文件 .. 快捷键是 字母 A ..

现在这里会显示，这个快捷键是 User 定义的 .. 用户定义的快捷键会保存在一个叫 keybindings.json 的文件里面 ... 点击打开这个文件 ...

里面会有刚才我们定义的这个快捷键 .. key 是按钮 a .. command 是 explorer.newFile ... 这里我们需要再设置一个 when .. 不然的话，不管在哪里，只要是按了按键 a ，都会执行这个 explorer.newFile ..

这里把 when 设置成 "when": "filesExplorerFocus && !inputFocus" ... 只在文件浏览器在焦点状态的情况下，这个快捷键才有效 ...

下面我们再去试一下 ... 打开 Explorer .. shift + command + E 可以切换文件浏览器的焦点状态 .. 进入焦点状态以后，按一下按键 a ... 会执行 explorer.newFile 命令 .. 这样我们就可以在文件浏览器上添加一个新的文件 ..

如果文件浏览器不在焦点状态的时候 ... 再按下按键 a ，是不会执行 explorer.newFile 的 ...

来自  https://ninghao.net/video/6359#info