雖然不是程式背景出生，最早期接觸的網頁設計軟體是Adobe Dreamweaver，主要是「圖形化介面」使得剛接觸程式語法的新手來說能夠快速上手。使用一陣子後發現Dreamweaver幾個缺點：1.有版權費用 2.軟體過於龐大 3.常被笑說還使用DW軟體，這些種種理由開始尋找替代的軟體。在某天一個老師介紹下才知道Visual Studio Code很便利的編輯器軟體 。
(當然市面上有很多強大又好用的原始碼編輯器，這邊文章主要是以有中文化為主要出發點)。
Visual Studio Code是一款由微軟開發且跨平台的免費原始碼編輯器。該軟體支援語法突顯、代碼自動補全、代碼重構、檢視定義功能，並且內建了命令行工具和Git版本控制系統。使用者可以更改主題和鍵盤捷徑實現個性化設定，也可以通過內建的擴充程式商店安裝擴充以拓展軟體功能。(來自維基)
※如何安裝
1.進入官方網站後，按下Download for Windows (若不同作業系統會有不同的顯示)
2.安裝過程就是「我同意」、「下一步」等等，出現選擇附加的工作，可以依造自己的需求進行調整，最後按下安裝。
※安裝延伸模組
因為我們要編輯的HTML與CSS，所以透過官方提供的Extensions(延伸模組)來安裝需求套件，這邊列出幾個套件安裝：
- Chinese (Traditional) Language Pack for Visual Studio Code
中文繁體語言套件
安裝延伸模組套件只要點選旁邊的Install就能安裝，相對的卸除安裝也是如此的操作。
- HTML Boilerplate
簡化輸入HTML標籤
再延伸模組中輸入HTML可以發現很多的模組支援，我們選擇HTML Boilerplate主要是因為開發者在去年還有更新套件，因此使用這個模組來安裝。
HTML Boilerplate可以快速將HTML樣板導入，省的打上許多標籤語法，很便利的功能。
- Live Server
快速瀏覽編輯
Live Server模組最大的好處就是能夠快速開啟瀏覽器看到輸入的結果，因為HTML語法必須要透過瀏覽器預覽的，使用這樣的功能可以解省許多時間，但是使用該模組第一次使用會跳出防火牆，請一定要勾選允許使用，另外會占用5500 port，也得看有沒有使用這個連接埠。
操作方法就是在HTML檔案中按下右鍵，可以看到Open with Live Server，點一下後會提醒使用預設連接埠為5500，這時候就會跳出你的瀏覽器觀看成果了。
※總結
Visual Studio Code操作起來真的很便利，加上又提供Emmet文字編輯器的外掛功能，在撰寫HTML與CSS上真的是得心應手的好軟體，真心推薦給您。不過還是在說明一次市面上有很多便利的文字編輯器軟體，挑選自己順手的軟體來操作這樣才是王道。