iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

30天學網頁設計系列 第 2

Day2 Visual Studio Code 功能簡易說明

  • 分享至 

  • xImage
  •  

Visual Studio Code(簡稱VS Code)

由微軟開發,並且支援Windows、Linux和macOS作業系統且開放原始碼的文字編輯器
可支援偵錯、內建了Git 版本控制功能,同時也具有開發環境功能
例如程式碼補全(類似於 IntelliSense)、程式碼片段和程式碼重構等...
此編輯器也支援用戶自訂組態,例如改變主題顏色、鍵盤捷徑等各種屬性和參數
還在編輯器中內建了擴充程式管理的功能。

這也是我目前所使用的編輯器,可以簡單輕鬆就上手
他也把很多需要套件才能使用的功能都給內建好了,加上也有提供中文版本

軟體名稱:Visual Studio Code
檔案下載:visualstudio.com
語言下載:繁體中文語言設定說明
作業系統:Windows7、10,MacOs、linux


打開VS Code會顯示上圖的畫面,我將依序簡介最左邊的功能列表,由上往下分別是

1.檔案總管

點選此按鈕可將功能顯示區隱藏起來,能讓程式分頁的區域變得更大。

2.原始檔控制

有加入git的話會把有更改過的檔案詳細列出來,並可以直接做git的操作。

3.偵錯

程式會使用完整符號的Debug資訊進行編譯,但不會進行優化。

4.套件安裝

常用的功能幾乎已內建。也可以額外安裝語言類的,例如:自動補字、或區分語法顏色。

5.搜尋

可用來搜尋關鍵字,而快捷鍵 command + P 可用來搜尋檔案

接下來介紹一些簡單實用的操作

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

2.到[File]選單下選擇[Open Folder…]來開啟剛剛建立的Python資料夾。

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

4.在python資料夾新增一個資料夾,我命名為「practise01」。

5.接著在practise01下新增一個檔案。

6.我將檔名命名為「01.py」
並在右邊的程式分頁上輸入 print('holle world'),這是python常用的輸出函示指令。

7.在剛剛的01.py檔案點右鍵選擇[Open in Integrated Terminal]開啟終端機畫面。

8.在終端機上輸入「py 01.py」便可以正確顯示出”Hello World”文字。

這邊也稍微提一下我常用到的快捷鍵

喜好設定 > 鍵盤快速鍵

自動縮排:shift + option + F

搜尋:command + F

搜尋範圍:目前開啟的檔案

取代:option + command + F

檔案搜尋 command + P
選取欲搜尋的檔案後點擊即可開啟

搜尋開啟的資料夾內的內容:shift + command + F


上一篇
Day1 前言
下一篇
Day3 HTML、CSS、JavaScript基本架構
系列文
30天學網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言