VsCode使⽤教程
⼀、关于Vscode
1.1 VsCode是个啥
Visual Studio Code is a lightweight but powerful source code editor which runs on yourdesktop and is available for Windows, macOS and Linux. It comes with built-in support forJavaScript, 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.png2.6.2 less的层序
image.png2.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
