VS Code 环境使用教程
1.介绍
VS Code 环境提供的是一个可以在浏览器中使用原生 VS Code 编辑代码的程序。在该环境中，你可以使用到与本地安装近乎一致的 VS Code 程序来编辑代码文件，打开 Terminal 终端执行 Linux 命令，还可以在 Terminal 中运行 Web 服务获得临时域名并在浏览器进行预览调试。本次实验将介绍蓝桥云课使用的 VS Code 环境的一些功能和特点。
2.VS Code界面
VS Code 不同于图形界面环境，对带宽要求较低，所以比较适用于一些需要大量代码编辑的场景，例如 C/C++，Java Web 开发和前端开发。在大多数情况下，我们更推荐你使用 VS Code 环境，而非 Linux VNC 桌面环境。
启动 VS Code 环境之后，你可以看到它的默认界面，大致分为 3 部分：
- 代码文件浏览区：左边的区域将用于组织项目的文件结构，你可以在此区域创建各种类型的代码文件和文件夹。
- 代码文件编辑区：当你双击打开相应的代码文件之后，将会呈现在编辑区域。你可以在此区域编辑代码，编辑后的代码会实时保存。
- Linux 终端：因为 VS Code 本身是运行在 Linux 容器环境中，所以下方的区域是一个 Linux 终端。你可以通过终端运行命令，执行编译、运行代码等操作。
菜单由顶栏固定显示的形式改为了点击按钮显示。点击左上角三条横线的图标可以显示完整的菜单栏。
如果你发现界面没有菜单按钮，可能是因为被意外隐藏了，此时可以在侧边工具栏点击右键，选择显示菜单，就可以正确显示菜单按钮。如果出现其他图标按钮消失的情况，处理方式也类似。
环境下方默认显示 Linux 终端，如果你的环境没有显示，可以点击菜单按钮，选择终端，新终端打开。或者按下键盘快捷键 ctrl + shift + ` （数字键 1 左侧的按键）也可以直接打开。
3.插件安装
我们已经在环境中预安装了部分常用的插件，包括简体中文插件，Java，Python 等语言相关的插件。
如果要安装你自己需要的插件，可以在搜索栏中输入名称或者 ID 搜索对应的插件，然后点击插件搜索里的安装或者详细信息的在 Remote 上安装按钮即可。
插件安装/卸载后可能需要重载环境才能生效，请留意右下角的提示信息。
推荐插件安装
作者：瑟玛普拉格
链接：https://www.zhihu.com/question/339448146/answer/805693081
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
1，HTML snippets(Visual Studio Code HTML snippets)
这是一款前端开发者必备的扩展，它能将你从手动键入每个标签中解放出来。只需输入 div 然后按下回车，一对标签就出现了。更厉害的是，对于需要嵌套的标签，你可以直接用 ul>li>a 的格式表示，按下回车后就能看到你需要的嵌套。还有一点，这个扩展已经包括所有的 HMTL5 片段。
2，JavaScript (ES6) code snippets
在上面一段中你可能就已经注意到，代码片段很有用，它能够有效减少拼写错误和提高编码效率。几乎每个前端程序员都是 JavaScript 的使用者，为了提高编写 JS 代码的效率，这个扩展很有用，并且它还支持 .ts, .tsx 和 .jsx 文件。
扩展中有很多快捷缩写，比如想要调用 export default class ClassName{}，输入 ecl 按下空格即可。
3，CSS Peek
既然已经分别介绍了 HTML 和 JS 的助手，我们也不能落下 CSS。CSS Peek 是一个支持 .html 和 .js 文件的扩展，它能帮助开发者快速找到和查看选定类或 id 所用的样式。对于那些不喜欢来回切换文件或者分屏的开发者来说这个扩展很有用。
4，Angular/React/Vue
既然提到了代码片段，我们最好也提一下每个框架下的不同扩展。
对 AngularJS 来说，Angular Snippets(Version 8)是针对 AngularJS 8 的一款扩展，它为我们提供 Typescript 和 HTML 的代码片段。
对于 React.js 框架，ES7 React/Redux/GraphQL/React-Native snippets 是一个优秀的扩展，它使用 ES7 提供 React 和 Redux 的代码片段，用法和 Javascript snippets 类似，都是按空格键。
对 Vue.js 开发，有一个叫 Vetur 的扩展相当棒，它目前的下载量已经有将近2,000万。Vetur 的功能很强大，包括代码片段，Emmet，错误检查，格式化，调试和高亮语法等。
5，ESLint
如果你想要写出友好，易读，干净的代码，我建议你在 VSC 中安装一个 ESLint 扩展，它会帮助你持续养成好的编码习惯，比如缩进等。
6，Prettier 代码格式工具
说到漂亮整洁的代码，Prettier 听名字你就值得拥有。尤其在项目需要你和其他同事合作完成时，Prettier 会强势地将代码格式全部统一，让你再也不用和同事讨论自己的代码。
7，GitLens
我在文章开头就提到过，VSC 是整合了 git 功能的，通过安装 GitLens 这个功能将会更强大，它能让你看到每一行代码是由谁在什么时候写的，并且快速查看代码提交详情，在团队协作中这个扩展很有用。
8，Auto import 自动导入包
Auto import 是一个自动导入包扩展。如果目前手头的项目是基于不同组件的，那么你需要做的就是给每个组件命名，剩下的事交给 Auto import 就好。
9，Path autocomplete 路径自动补全
提到了导入的问题，另一个重要的扩展就是能够智能补全导入文件路径的 Path autocomplete。使用时，输入 ./ 后你就会看到一个包含所有文件名的下拉菜单。当文件目录繁杂时，这个扩展真的是很好用，它为你省去了很多一层一层刨开目录的痛苦。
10，Bracket Pair Colorizer 括号着色器
括号着色器能让我们一眼看出当前代码块的反括号在哪里。有时候在稍微复杂的函数中，找到正确的那对代码并不是那么容易，但 Bracket Pair Colorizer 在你键入一个括号时就为这一对括号分配了自己的颜色，便于阅读。
11，Indenticator 缩进指示器
Indenticator 可以高亮显示出当前缩进的深度，深度由线和点表示，同样使代码更整洁，提高代码易读性。
12，Debugger for Chrome 调试器
放在最后的是重磅级的调试扩展 Debugger for Chrome。这个插件能让你在 VSC 里面直接调试 JS 文件，效果和 Chrome 的控制台中差不多，让你不用打开浏览器就直接打断点。
4.C/C++示列项目
首先，我们从一个简单的 C/C++ 示例项目开始。
我们需要先在代码文件浏览区中通过右键 新建文件 创建一个名为 hello.c 的 C 语言文件。
然后，在编辑区域键入以下 C 代码，代码会自动保存。
#include<stdio.h>
int main()
{
printf("Hello, World.");
return 0;
}
如果想要执行上方的 C 语言代码，需要先编译代码。编译代码需要用到 Linux 终端，接下来在终端中输入以下命令。
gcc -o hello hello.c
注意参数是小写字母 o，不是数字 0。单击回车，这时目录下会生成了一个名为 hello 的文件，这是 C 语言程序编译后得到的可执行程序。
接下来，我们就可以在终端中执行文件，注意执行的是编译之后的文件：
./hello
执行完之后，就可以看到刚刚编写 C 语言文件的输出了。
终端输出 % 符号的原因可 点击查看
5.前端示列项目
首先，在代码文件浏览区中通过右键 新建文件 创建一个名为 hello.html 的 HTML 文件，然后在编辑区域输入以下 HTML 代码：
然后，我们键入以下 HTML 内容：
<!DOCTYPE html>
<html>
<head>
<title>欢迎来到 HTML 的世界</title>
</head>
<body>
<p>VS Code 示例教学项目.</p>
</body>
</html>
代码会自动保存。此时，如果希望预览刚刚编写的 HTML 页面效果，可以单击编辑器页面右上角的 预览图标 打开。
除了预览按钮，你还可以：选中代码文件 → 右键 → Open Preview，或者使用快捷键 Ctrl + Shift + V 打开预览：
你可以看到，右侧的 HTML 页面已经可以展示出来了。如果后续编辑和修改代码，预览页面也会动态更新。
6.代码调试功能
VS Code 环境中预制了 Java 相关的插件，所以可以直接在环境里 Debug Java 代码。
其他语言需要自行安装对应的插件。
在代码文件浏览区中点击右键 新建文件 创建一个名为 HelloWorld.java 的 Java 文件，然后在编辑区域输入以下代码：
/**
* HelloWorld
*/
public class HelloWorld {
public static void main(String[] args) {
for (int a = 0; a < 10; a++) {
System.out.println(a);
}
}
}
我们在 System.out.println(a); 处打上断点，以便查看 for 循环中变量 a 的值的变化。首先将鼠标放到代码对应的行号前，将出现的小红点点亮。
然后点击左侧运行图标，切换到调试的界面。可以点击上方的绿色运行标志，或者文件编辑栏里出现的 Debug 按钮开始调试。
开始调试后，终端会自动执行调试命令，左侧区域会显示变量和堆栈相关的信息，状态栏会变为橘黄色并且显示调试状态，顶部会显示一个调试工具栏。可以看到当前变量 a 的值为 0，点击上方的继续按钮执行一次调试。
程序会自动执行一次循环，a 的值变为 1。
如果要详细查看执行的每一个步骤，可以点击第二个单步跳过按钮，会高亮显示在变量 a 的值发生变化前执行过的代码。停止调试可以点击停止按钮，或者按下快捷键 Shift + F5。
如果不需要调试，也可以直接点击 Run 运行程序，同样会在下方终端里自动执行并输出结果。
7.总结
本次教程中，我们了解了 VS Code 的界面布局以及常用功能的使用，你可以进一步通过鼠标点击菜单按钮了解 VS Code 提供的全部功能，或者打开 VS Code 官方文档 查看详细功能说明。
8.联系方式
qq：2061302791
微信：xie2061302791
电话：15284524485
个人网站：https://xieyingpeng.github.io
Github：https://github.com/xieyingpeng/
博客园：https://www.cnblogs.com/Xieyingpengz
知乎：https://www.zhihu.com/people/nan-qiao-12-73