Visual Studio Code 介面的基礎使用介紹(使用Python)

整合式的開發工具人見人愛,但碩大的IDE工具常常造成機器的負載,因為不是每人的機器都是超強神勇,尤其是高效能輕薄的筆電相當昂貴,為了讓眾人的文書筆電也能輕鬆撰寫Python、Java、PHP、HTML等,‍ Visual Studio Code  (簡稱VSCode)是一個支援多平台的開放原始碼免費程式碼編輯器,由微軟開發,並支持Windows,Mac OS,Linux,只要裝上對應語言的延伸外掛模組(Extensions),即可輕鬆變成IDE的開發環境。


市面上的程式碼編輯器非常多,看到許多人都推薦使用PyCharm開發工具來撰寫Python語言,Community版免費,但其專業版是要付費的,於是挑上微軟免費的VS Code,除輕盈可以快速的編寫程式外,加快運行的速度是很棒的體驗,且支援多平台,安裝延伸模組即可輕鬆變成整合式的開發工具,例如自動補全、智能感知、靜態檢查、調試和單元測試等功能,更能輕鬆與語言間快速切換。

Visual Studio Code的安裝後,正常是英文介面,個人覺得不一定要更換中文介面,畢竟中文延伸模組並不會同步VS Code的版本。

 

VS Code編輯器上主要分成三個區塊,左邊是快速功能鈕,藍色框是快速功能鈕的顯示區,右邊綠色框是Python程式分頁的顯示區。

 

點選紅色框鈕即可將快速功能顯示區隱藏起來,這樣可以讓程式分頁的區域變得更大。

 

一般開發都是以資料夾視為一個專案的管理,所以先開啟檔案總管建立一個的資料夾,例如筆者在C磁碟根目錄下建立python資料夾。

 

到【File】選單下選擇「Open Folder…」來開啟之前建立的Python資料夾。

 

開啟後將滑鼠指標移至開啟的Python上,出現新增檔案、新增資料夾、重新整理與摺疊展開等四個虛擬鈕,選擇新增一個資料夾。

 

新增的資料夾位於python資料夾下,筆者命名為「lesson01」。

 

接著再到lesson01下新增一個檔案。

 

將檔名命名為「first.py」,並在右邊的程式分頁上輸入兩行(如下),第一行有#開頭為註解,第二行是python常用的輸出函示指令。當分頁內的內容有被更動過時,你會發現分頁標題右邊出現一個點圖示(綠色框),表示被異動過尚未儲存檔,筆者習慣使用【Ctrl+s】立即存檔,當存檔後,綠色框內的點圖示即會消失。

 

完成了人生第一支python程式後,如何執行呢?你不用跳到VS Code工具外來執行,直接按下【Ctrl+、】即可開啟終端機畫面,。

 

再終端機畫面上輸入python first.py(或使用py first.py),結果竟然出現錯誤。上圖中筆者使用【Ctrl+、】叫出終端機畫面,其路徑是出現VS Code開啟的「Python」資料夾上,但筆者特意建立一個lesson01資料夾,並在其下撰寫first.py程式檔,也就是說first.py並非在「python」資料夾下。還記得Python的安裝中有勾選path的選項,python在任何均可正常執行,所以問題出現在first.py程式檔,從立一個角度來說,就是終端機畫面上的路徑抓不到first.py程式檔。

 

筆者為了避免這類路徑的問題,習慣在程式檔名上使用滑鼠右鍵來開啟終端機畫面。

 

此時看到的路徑是「C:\python\lesson01」,再次輸入「python first.py」來執行,果然正確地顯示出”Hello World”文字。

 

終端機畫面視窗可以開啟眾多個,如上述使用滑鼠右鍵與快捷鍵開啟兩個終端機畫面視窗,你可以點選紅色框拉下的選單中切換,想要刪除多於用不到的終端機畫面視窗,請按下藍色框內的垃圾桶小圖示,即可刪除目前顯示的終端機畫面視窗。

 

談到這裡,不管是撰寫程式,還是執行程式,感覺還是離不開程式編輯器的影子,想要讓VS Code變成IDE的環境,得需要安裝延伸的模組。如果你有看過筆者的另一篇「學習 Python 語言的好搭檔 Visual Studio Code 程式碼編輯器」文章,其中安裝了兩個延伸模組,一個是中文介面模組,另一個是Python的整合開發延伸模組。

 

假如你有安裝Python的整合開發延伸模組,你會在右上角出現一個執行按鈕(紅色框),點選即可執行目前的所在的程式頁面,是你否有發現,路徑的問題也不用你去擔心,是不是有IDE整合環境的味道了呢?

 

VS Code工具最底端為狀態列,狀態列右邊可以得知目前編輯區的游標位置、編碼格式、編輯語言等,左邊可以看到目前使用的Python版本是3.83 64位元,假如你有安裝多個版本,可以輕鬆選擇想邊執行的版本。

 

每個人的螢幕解析度不同,太細膩的4K解析度會造成邊VS Code字體太小,沒關係,利用【Ctrl】+【+/-】快捷鍵輕鬆調整介面內的文字整體縮放。

 

延伸閱讀:

Bloggerads載入中~

itwalker

或許技術與功力已遠遠不及時下年輕人,但試著去畫一個圓,圓不圓沒關係,盡力就好,如果覺得文章不錯的話,請大家按個「讚」或「+1」,感謝您的支持與鼓勵!歡迎加入我的粉絲團 : https://www.facebook.com/itwalker ,更多關於挨踢路人甲的文章: https://walker-a.com

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料