🚀 在 VS Code 中免費取得

在 Chromebook 上使用 VS Code 學習

2020 年 12 月 3 日,作者:Alessandro Segala,@ItalyPaleAle

在過去幾年中,執行 Google Chrome OS 的 Chromebook 一直是「傳統」筆記型電腦的替代方案。由於有許多選擇,從非常經濟實惠的型號到高階型號,Chromebook 在學生中尤其受歡迎,他們可以使用 Chromebook 進行學習、完成作業和參加線上課程。

雖然 Chromebook 和 Chrome OS 通常以網頁瀏覽器為中心,但您也可以啟用 Linux 環境,以便安裝原生桌面應用程式,包括 Visual Studio Code!

透過在您的 Chromebook 上執行 VS Code,您可以輕鬆快速地開始使用各種語言和架構進行程式碼撰寫。這包括 Python、JavaScript 和 Node.js、Java 和 C# 等多種語言!

在本文(共兩篇中的第一篇)中,我們將探討如何在 Chromebook 上安裝 Visual Studio Code,以及如何設定環境以開始使用 Python 或 JavaScript/Node.js 進行程式碼撰寫。在後續的文章中,我們也將探討如何運用 遠端開發 VS Code 擴充功能,以連線到更強大的開發環境。

您需要的東西

VS Code 可以在任何近期的 Chromebook 上執行,只要您可以透過 Crostini 啟用 Linux 應用程式即可,我們將在稍後說明如何操作。

Visual Studio Code 是一個輕量型編輯器,因此您可以在低功耗的 Chromebook 上執行它,最低要求為 1 GB RAM。此外,VS Code 現在也適用於 ARMv7 和 ARM64 上的 Linux,這表示您也可以在搭載 ARM 晶片的 Chromebook 上執行它!

在本教學課程中,我將使用入門級 Chromebook,配備 ARM64 CPU、4 GB RAM 和 32 GB 磁碟。儘管規格不高,但 VS Code 在這部機器上執行良好!

在您的 Chromebook 上啟用 Linux

在我們可以在 Chrome OS 上安裝 VS Code 之前,我們需要使用 Crostini 啟用對原生 Linux 應用程式的支援。

首先,開啟您的系統「設定」,然後在側邊欄上尋找 Linux (測試版)。從那裡開啟 Linux 支援。

Enabling Linux support on Chrome OS

依照螢幕上的指示設定 Linux 環境 (對於大多數人來說,接受預設值就已足夠)。您的 Chromebook 接著將下載工具以建立 Linux 環境並為您設定。在幕後,這實際上是建立執行 Debian 10 的容器,因此您可以獲得完整的 Linux 發行版來使用!

設定好 Linux 環境後,您會看到一個新的終端機視窗彈出。

Terminal running on Linux

在我們可以安裝 VS Code 之前,我們需要在 Linux 終端機中執行幾個命令。我們需要更新 Linux 套件清單,並安裝選用 (但強烈建議) 的相依性 gnome-keyring。在終端機中,輸入以下兩個命令 (在每個命令的結尾按下 Enter 鍵以執行它們)

sudo apt-get update
sudo apt-get install -y gnome-keyring

輸出將與此類似

Output of the commands in the terminal

一旦第二個命令結束,您就可以移至下一步。

安裝 VS Code

我們現在準備好安裝 VS Code 了!

前往 Visual Studio Code 下載 頁面。從那裡,您需要為您的 Chromebook 選擇正確的套件

  • 對於執行 Intel 或 AMD 晶片的 Chromebook,請選擇 .deb64 位元 版本。
  • 如果您的 Chromebook 在 ARM64 晶片上執行 (就像我正在測試的這部),請改為選擇 ARM64 版本的 .deb 套件。

List of downloads

如果您不確定您的 Chromebook 使用的是哪種 CPU,請在 Linux 終端機中執行命令 dpkg --print-architecture 以找出答案。您將看到 amd64 (適用於 Intel 和 AMD 晶片:為 VS Code 選擇 64 位元 版本) 或 arm64 (選擇 ARM64)。

Output of the command to find the architecture: this laptop is running on arm64

在您下載 VS Code 後,您會在您的 下載 資料夾中找到該套件。按兩下該套件以啟動安裝程式

Package installer asking to install VS Code

您的 Chromebook 接著將安裝 VS Code 和所有其他相依性。

安裝完成後,在您的應用程式清單中,您會在名為 Linux 應用程式 的資料夾內找到 Visual Studio Code (以及 Linux 終端機)。您現在可以啟動 VS Code 了。

Launching the Visual Studio Code app

您應該會看到 VS Code 正在執行,此時您已準備好開始程式碼撰寫!

VS Code running on the Chromebook

如果您是 VS Code 的新手,並想知道如何使用編輯器,以下是一些資源供您探索

  • VS Code 簡介影片:這些影片將說明如何使用 VS Code 開啟檔案和資料夾、安裝佈景主題和擴充功能、設定編輯器等等。
  • 使用 VS Code 學習程式碼撰寫:我們的「學習」章節包含針對程式碼撰寫新手且想要入門的人所設計的文章、教學課程和影片。

使用 JavaScript 和 Node.js 進行程式碼撰寫

JavaScript 是一種非常彈性的程式語言,可用於建置在網頁瀏覽器內以及在具有 Node.js 的網頁伺服器上執行的應用程式。如今,JavaScript 也被用於建置原生桌面應用程式 (Electron) 和行動應用程式 (Apache Cordoba、React Native 等)、程式設計物聯網 (IoT) 裝置等等。

秘訣:如果您想學習 JavaScript,我們的同事製作了 免費影片系列觀看:JavaScript 初學者系列

Visual Studio Code 是一個非常受歡迎的編輯器,適用於使用 JavaScript 和 Node.js 進行程式碼撰寫 (State of JS 調查),並且原生支援 JavaScript。

但是,為了在您的 Chromebook 上使用 Node.js (以及一般 JavaScript),您必須安裝 Node.js 執行階段。為此,我們將使用 nvm,這是一個小型開放原始碼公用程式,可讓您更輕鬆地安裝 Node.js 並更新它。

若要安裝 nvm,請在 Linux 終端機內執行以下命令

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
source .bashrc

Installing nvm

在您安裝 nvm 後,您可以使用此命令安裝最新版本的 Node.js

nvm install node

Installing Node.js via nvm

秘訣:您是否知道 VS Code 包含整合式終端機?您可以從 終端機 功能表啟動它,然後按一下 新增終端機。VS Code 是在 Linux 環境的內容中執行的,因此整合式終端機也是在 Linux 中執行的。

nvm 提供許多選項來設定、更新和管理 Node.js。如果您有興趣,您可以在 nvm 的官方 文件 中閱讀更多資訊。

在安裝 Node.js 後,您可以在終端機中使用 node 命令 (執行 node --version 是檢查您的 Node.js 安裝的好方法),以及 VS Code 的所有內建功能,例如 Node.js 和 JavaScript 的整合式工作執行器和偵錯工具。若要深入瞭解如何在 VS Code 中使用 JavaScript 和 Node.js,請查看 VS Code 文件

使用 Python 進行程式碼撰寫

Python 是另一種熱門的程式語言,而且對於初學者來說特別棒。使用 Python,您可以為網頁、桌面和命令列建置應用程式。Python 是最適合用於資料科學和人工智慧 (AI) 的語言之一,它也用於程式設計 IoT 裝置、微控制器等等!

VS Code 是一個非常適合用於程式碼撰寫 Python 和學習該語言的編輯器。您可以在 VS Code 中使用 Python 來建置各種應用程式,以及使用 Notebooks,例如資料科學家使用的那些。

秘訣:如果您正在考慮開始使用 Python,這裡也有一個 免費影片系列 給您:觀看:Python 簡介影片系列

Chrome OS 已預先安裝 Python 3 直譯器,但我們需要安裝更多套件才能獲得最佳的 Python 程式碼撰寫體驗。這包括 pip (Python 的相依性管理員)、venv (用於管理 Python 虛擬環境) 以及一些用於處理原生套件的建置工具。在終端機中,執行

sudo apt-get install -y python3-pip python3-dev python3-venv build-essential libssl-dev libffi-dev

Installing Python dependencies

VS Code 中的 Python 支援是透過 Microsoft Python 擴充功能提供的。若要安裝 Python 擴充功能,請從 VS Code 內使用左側的活動列開啟「擴充功能」檢視 (⇧⌘X (Windows、Linux Ctrl+Shift+X)),然後搜尋「python」並安裝 Microsoft 提供的擴充功能

Installing the Python extension for VS Code

此時,您已準備好開始在 VS Code 中使用 Python 進行開發!若要深入瞭解如何在 VS Code 中使用 Python,包括執行您的程式碼、使用整合式偵錯工具、程式碼風格檢查等,請查看我們的 VS Code 中的 Python 文件。

即將推出:使用遠端開發

今天就到此為止!在這篇文章中,我們探討了如何在 Chromebook 上安裝 VS Code,以及如何開始使用 JavaScript/Node.js 和 Python 進行程式碼撰寫。

但是,還有更多。雖然 Chromebook 即使在像我正在測試的這種低功耗版本上也能正常執行 VS Code,但有時您需要使用更快速的機器進行開發,並具有更多的記憶體和/或更快的 CPU。例如,也許您正在使用 ARM 供電的 Chromebook,但您需要在 Intel/AMD 晶片上執行您的程式碼。或者,也許您想要使用人工智慧,並且需要存取具有強大 GPU 的機器。

透過 VS Code 和 遠端開發 擴充功能 (SSH 和 Container) 以及 GitHub Codespaces,我們可以解決上述所有問題以及更多問題。

在本教學課程的下一部分中,您將瞭解 VS Code 遠端擴充功能和 GitHub Codespaces 如何將您的 Chromebook 變成開發強大的工具!

同時,祝您程式碼撰寫愉快…學習愉快!

Alessandro Segala,VS Code 產品經理 @ItalyPaleAle