一、关于 Vscode#
1.1 VsCode 是个啥#
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).
支持的拓展常见的包含如下：
image.png
1.2 VSCode 的学习网址#
VSCode 帮助文档链接
怎么找到它，其实也及其的简单，仅仅需要。
image.png
二、How to Use#
2.1 调试代码和安装插件#
如何开始调试代码，这里以 python 为例#
Step1: 首先在商店中搜索 python
image.png
Step2: 之后就可以直接在主页面启动调试 F5
注意以下页面，其中如果是 IDE 内部使用如下对应窗口块的进行
image.png
文件和调试块的指示
image.png
三、熟识常用的快捷键#
3.1 调试常见的快捷键#
F9 打开和停止调试断点
F11 单步调试
F5 启动调试
image.png
调试的具体页面如图所示
image.png
二、使用一波#
2.1#
Vscode 是一个轻量的编译器，所以默认是通过打开文件夹的功能来打开对应的工程。而且下面会列举出最近打开的工程，方便打开用户打开最近打开的工程进行编辑和修改。
image.png
这里默认打一个工程，可以看到如下提示。
苹果电脑 Mac 如何输入⌘、⌥、⇧、⌃、等特殊字符 反正我是复制的，偷懒一下。
科普一波：
⌘ command 键
⌥ option/alt
⇧ shift 按键
^ 表示的是 control 键
打开一个工程
2.2 查询未知的快捷键#
首先键入⇧ ⌘ P，之后出现如图所示的界面，我们在这里面输入对应关键字 “调试”，可以快速搜索你需要使用到快捷键
image.png
2.3 ⇧ ⌘ F 整个工程中查找关键字#
作用之后效果，如下图。其实和直接点击左边的放大镜效果是等同的。
image.png
2.4 ⌘ P 快速你需要查看的文件，并且能快速跳转到#
image.png
2.5 ^ ` 调取和关闭终端#
快速吊起终端，对于我们这种，对于需要应用终端的代码，比如 python 或者 vue-cli 以及 RN，Flutter 都是特别方便。
2.6 大纲的功能#
关于 git 部分的默认支持，如果当前工程存在着改动，那么修改清晰可见。
image.png
打开其中一个 Vue 文件，其中大纲功能是是个非常赞的功能，这个问题件文件脉络清晰明显
image.png
2.6.1 html 树#
image.png
2.6.2 less 的层序#
image.png
2.6.3js 部分#
可以说唯一小小遗憾是没有按照 compute 和 methods 之类的对 function 进行分类，但是如此的顺序很 OK 了 (这一点不如 WebStrom)
image.png
2.7 快速强大的编码功能#
能够快速捕捉程序中的问题并突出显示。支持多光标编辑，参数提示以及其他快速编码特性。
image
2.8 IntelliSense 功能#
根据文档上下文为变量类型、函数定义和导入模块提供代码智能补全功能。
image.png
2.9 代码导航和重构#
使用 peek 和 navigate to definition 功能可以查阅浏览你的源代码，代码重构变得轻而易举。
image.png
2.10 更多更常见的功能#
image.png
2.11 关于后退和前进的意义#
在一个文档中我们可以首先在 A 处进行编辑，如下图增加一个标签
image.png
之后我们在 B 处开始设置该 div 的 css 样式
image.png
此时我们通过^ -就可以回到 A 区域
在 A 区域使用^ ⇧ -就会回到 B 取悦
如果联系多次按下回退是能够跨文件的，这个功能也很棒。
image.png
2.12 方便的放大和缩小整个界面的字体#
通过 ⌘ + 还有 ⌘ + 很容易的实现整个页面所有字体大小
image.png
image.png
2.13 格式化文件快捷键#
⌥ ⇧ F
image.png
2.14 用 VSCode 的固定窗口模式#
使用习惯了 WebStorm 的人都能很明显的感受到，webStorm 打开一个.js 都会比如像是下面如图：
webStorm 的展示.png
而正常打开一个窗口，单击的时候，通常会替换之前的窗口
image.png
要实现和 webStorm 一样的方式，其实可以直接在如上箭头所示的标题部分双击即可完成固定的效果。
image.png
注意观察会发现，此时标题字体将变成正体。
三、新建一个 html 直接采用 Chrome 来进行调试的实现方案#
3.1 首先安装，如下图。方法已经特别具体，再此不再赘述。#
image.png
3.2 在自己的 html 工程目录下面点击 f5, 或者在左侧选择调试按钮#
image
image.png
但是直接打开的chrome将会出现如下错误
image.png
3.3. 解决以上问题#
首先在弹出来的 launch.json 中添加以下内容
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "启动 Chrome 并打开 localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch index.html (disable sourcemaps)",
"type": "chrome",
"request": "launch",
"sourceMaps": false,
"file": "${workspaceRoot}/index.html"
}
]
}
3.4 然后在调试页面中选择对应的 scheme#
image.png
，在上方
image
，选择下拉按钮，会有一个添加，选择 chrome
四、附录其他#
4.1 MAC 上 F 功能按键#
由于采用 MACPro 开发，默认的 F1 到 F12 分别将会被系统调节按钮替代，如何将 F1 到 F12 设置为默认功能。
Mac 上的 F 键标准功能和按键上的特殊功能之间调换
设置 --》 键盘 --》 勾选将 F1、F2
4.2 实现 TODO 的指示功能#
首先安装对应的插件
image.png
其次重启 Vscode, 就可以看到如图所示的 TODO 的树形结构
image.png
五、参考链接和书籍#
Visual Studio Code 中文文档（一）- 快速入门
VS Code - Debugger for Chrome 调试 js