Visual Studio Code開發網站入門教學

Romaz Rau

6 min readJun 14, 2020

前言:

VS code具有輕量、可擴充等特性，非常適合開發網站使用，此篇文章分享在Windows電腦安裝VS code，以及一些好用的外掛擴充和快捷輸入。

安裝Visual Studio Code:

前往 Visual Studio Code官網 選擇符合自己電腦的版本安裝即可，安裝過程有一些選用選項看個人需求去做選擇，基本上無需特別操作順著步驟即可安裝完成。

基本操作:

最左邊一列為Active Bar，可以開啟一些工具窗格，首先打開Explorer窗格，點選Open Folder選擇一個工作目錄，準備進行第一次在VS code上的檔案撰寫。

左Explorer為顯示編輯檔案的窗格，右Extensions為顯示外掛套件的窗格。

在Explorer窗格中點選右鍵選擇New File即可新增第一個檔案，記得命名最後要加上附檔名才能讓編輯器正確辨識檔案類型喔。

完成新增檔案了，接下來教一些用於html檔的快捷輸入，讓編寫檔案更有效率。

快捷輸入(Emmet):

在檔案中輸入關鍵字，編輯器就會給予選項，按下tab鍵即可自動帶入。如果輸入過程提示消失了就代表關鍵字不對了，這時刪掉幾個字元再繼續輸入提示就會又出現了。這邊簡單示範幾個常用的輸入示範:

產生基本html架構:

標籤與屬性:

單純標籤:
h1                     -->   <h1></h1>標籤和內容
h1{contants}           -->   <h1>contants</h1>標籤和id屬性
h1#idName              -->   <h1 id="idname"></h1>標籤和class屬性
h1.className           -->   <h1 class="className"></h1>標籤和特定屬性
h1[style="color:red"]  -->   <h1 style="color:red"></h1>組合使用
h1#id2.cls1.cls2[style="color:red"]{Oops}    -->
  
   <h1 id="id2" class="cls1 cls2" style="color:red">Oops</h1>

嵌套、乘法和分組

增加子元素
ul>li                  -->   <ul><li></li></ul>增加同級元素
ul>li{1}+li{2}         -->   <ul>
                                 <li>1</li>
                                 <li>2</li>
                             </ul>乘法
ul>li*2                -->   <ul>
                                 <li></li>
                                 <li></li>
                             </ul>乘法和自動記數(符號$)
ul>li{Num:$}*2         -->   <ul>
                                 <li>Num:1</li>
                                 <li>Num:2</li>
                             </ul>乘法和分組
ul>(li>a)*2            -->   <ul>
                                 <li><a href=""></a></li>
                                 <li><a href=""></a></li>
                             </ul>