VS Code 环境使用教程

时间：2021-03-07 00:10:54 阅读：66 评论：0 收藏：0 [点我收藏+]

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 上安装按钮即可。

技术分享图片

插件安装/卸载后可能需要重载环境才能生效，请留意右下角的提示信息。

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);
        }
    }
}

技术分享图片