在 Chromebook 上使用 VS Code 學習
2020 年 12 月 3 日,作者:Alessandro Segala, @ItalyPaleAle
在過去的幾年裡,執行 Google Chrome OS 的 Chromebook 一直是“傳統”筆記型電腦的替代品。得益於從經濟實惠到高階型號的眾多選擇,Chromebook 在學生中尤其受歡迎,他們可以用它來學習、完成作業和參加線上課程。
雖然 Chromebook 和 Chrome OS 通常以 Web 瀏覽器為中心,但你也可以啟用一個 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 支援。
按照螢幕上的說明配置 Linux 環境(對大多數人來說,接受預設值即可)。然後,你的 Chromebook 將下載用於建立 Linux 環境的工具併為你進行配置。這實際上是在後臺建立了一個執行 Debian 10 的容器,所以你將擁有一個完整的 Linux 發行版可供使用!
Linux 環境設定完成後,你會看到一個新的終端視窗彈出。
在安裝 VS Code 之前,我們需要在 Linux 終端中執行幾個命令。我們需要更新 Linux 軟體包列表,並安裝一個可選(但強烈推薦)的依賴項 gnome-keyring
。在終端中,輸入以下兩個命令(在每個命令末尾按 Enter 鍵執行):
sudo apt-get update
sudo apt-get install -y gnome-keyring
輸出將與此類似:
第二個命令一結束,你就可以進入下一步了。
安裝 VS Code
現在我們準備好安裝 VS Code 了!
前往 Visual Studio Code 下載頁面。在那裡,你需要為你的 Chromebook 選擇正確的軟體包:
- 對於搭載 Intel 或 AMD 晶片的 Chromebook,請選擇 64 bit 版本的 .deb 檔案。
- 如果你的 Chromebook 執行在 ARM64 晶片上(就像我測試用的這臺),請選擇 ARM64 版本的 .deb 軟體包。
如果你不確定你的 Chromebook 使用的是哪種 CPU,可以在 Linux 終端中執行 dpkg --print-architecture
命令來檢視。你會看到 amd64
(適用於 Intel 和 AMD 晶片:為 VS Code 選擇 64 bit 版本)或 arm64
(選擇 ARM64)。
下載 VS Code 後,你會在下載資料夾中找到該軟體包。雙擊該軟體包以啟動安裝程式:
然後,你的 Chromebook 將安裝 VS Code 和所有其他依賴項。
安裝完成後,在你的應用列表中,你會在一個名為 Linux 應用的資料夾中找到 Visual Studio Code(以及 Linux 終端)。現在你可以啟動 VS Code 了。
你應該能看到 VS Code 正在執行,此時你就可以開始編碼了!
如果你是 VS Code 新手,想了解如何使用這款編輯器,這裡有一些資源供你探索:
- VS Code 介紹影片:這些影片將講解如何使用 VS Code 開啟檔案和資料夾、安裝主題和擴充套件、配置編輯器等。
- 使用 VS Code 學習程式設計:我們的“學習”部分包含為程式設計新手準備的文章、教程和影片,幫助他們入門。
使用 JavaScript 和 Node.js 編碼
JavaScript 是一門非常靈活的程式語言,可用於構建在 Web 瀏覽器中執行的應用程式,以及透過 Node.js 在 Web 伺服器上執行的應用程式。如今,JavaScript 也被用於構建原生桌面應用(Electron)和移動應用(Apache Cordoba, React Native 等)、編寫物聯網(IoT)裝置程式等等。
提示:如果你想學習 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
安裝 nvm 後,你可以用這個命令安裝最新版本的 Node.js:
nvm install node
提示:你知道 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)的語言之一,它還被用於為物聯網裝置、微控制器等程式設計!
VS Code 是一款用於 Python 編碼和學習該語言的出色編輯器。你可以在 VS Code 中使用 Python 構建各種型別的應用程式,也可以處理 Notebook,例如資料科學家使用的那些。
提示:如果你想開始學習 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
VS Code 中的 Python 支援是透過微軟 Python 擴充套件提供的。要安裝 Python 擴充套件,請在 VS Code 中,使用左側的活動欄開啟擴充套件檢視(⇧⌘X (Windows, Linux Ctrl+Shift+X)),然後搜尋“python”並安裝由微軟提供的擴充套件:
至此,你就可以開始在 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 變成一個開發 powerhouse(強大的開發工作站)!
在此期間,祝你編碼愉快……學習愉快!
Alessandro Segala,VS Code 產品經理 @ItalyPaleAle