現已釋出!閱讀關於 11 月新增功能和修復的內容。

在 Chromebook 上使用 VS Code 學習

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

在過去的幾年裡,執行 Google Chrome OS 的 Chromebook 提供了“傳統”筆記型電腦的替代選擇。由於有很多選擇,從非常實惠的型號到高階型號,Chromebooks 在學生中特別受歡迎,他們可以用它們來學習、完成作業和參加虛擬課程。

雖然 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。此外,VS Code 現在可用於 ARMv7 和 ARM64 上的 Linux,這意味著你也可以在由 ARM 晶片驅動的 Chromebook 上執行它!

對於本教程,我將使用一臺入門級 Chromebook,配備 ARM64 CPU、4 GB 記憶體和 32 GB 磁碟。儘管配置適中,VS Code 在這臺機器上執行得很好!

在 Chromebook 上啟用 Linux

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

首先,開啟系統的“設定”,然後在側邊欄中查詢“Linux(Beta 版)”。從那裡,開啟 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,請選擇變體為 64 bit.deb
  • 如果你的 Chromebook 執行在 ARM64 晶片上(就像我正在測試的那個),請選擇變體為 ARM64.deb 包。

List of downloads

如果你不確定你的 Chromebook 使用的是哪種 CPU,請在 Linux 終端中執行命令 dpkg --print-architecture 來查詢。你將看到 amd64(適用於 Intel 和 AMD 晶片:為 VS Code 選擇 64 bit 變體)或 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 apps”的資料夾中找到 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 在 Web 伺服器上執行的應用程式。如今,JavaScript 也被用於構建原生桌面應用程式(Electron)和移動應用程式(Apache Cordoba、React Native 等)、程式設計物聯網(IoT)裝置等等。

提示:如果你想學習 JavaScript,我們的同事製作了一個免費影片系列觀看:JavaScript 入門系列

Visual Studio Code 是使用 JavaScript 和 Node.js 進行編碼的非常流行的編輯器(State of JS survey),並且原生支援 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,你可以構建用於 Web、桌面和命令列的應用程式。Python 是最適合用於資料科學和人工智慧 (AI) 的語言之一,它也用於程式設計 IoT 裝置、微控制器等等!

VS Code 是用於 Python 編碼和學習該語言的優秀編輯器。你可以在 VS Code 中使用 Python 來構建各種應用程式,以及處理筆記本,例如資料科學家使用的筆記本。

提示:如果你正在考慮開始學習 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 的更多資訊,包括執行程式碼、使用整合偵錯程式、linting 等,請檢視我們關於VS Code 中的 Python 的文件。

接下來:使用遠端開發

今天就到這裡!在這篇文章中,我們介紹瞭如何在 Chromebook 上安裝 VS Code,以及如何開始使用 JavaScript/Node.js 和 Python 進行編碼。

但是等等,還有更多。雖然 Chromebook 可以很好地執行 VS Code,即使在我正在測試的這種低功耗版本上也是如此,但有時你需要使用更快的機器進行開發,具有更多的記憶體和/或更快的 CPU。例如,你可能正在使用由 ARM 驅動的 Chromebook,但你需要將程式碼執行在 Intel/AMD 晶片上。或者你可能想從事人工智慧工作,需要訪問具有強大 GPU 的機器。

藉助 VS Code 和遠端開發擴充套件(SSH 和容器),以及 GitHub Codespaces,我們可以解決上述所有問題——以及更多。

在本教程的下一部分中,你將瞭解 VS Code 遠端擴充套件和 GitHub Codespaces 如何將你的 Chromebook 變成一個開發強國!

在此期間,編碼愉快……學習愉快!

Alessandro Segala,VS Code 產品經理 @ItalyPaleAle

© . This site is unofficial and not affiliated with Microsoft.