VS Code 環境使用教程

本文轉載自查看原文 2021-03-06 21:22 425 專業

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

圖片描述