【HTML指南】Day05-VScode是什麼?前端人員必裝?

工欲善其事，必先利其器，之前我們都是用記事本來進行開發雖然也是可以完成但是很不方便，例如我們之前都在筆記本輸入標籤的單字是不是都需要完整打出來，如果打錯了單字最後找問題在哪裡是有點麻煩，如果有自動補全這些問題就再也不是問題了。

那有沒有一種工具可以加快開發，把時間精力都花在刀口上呢?

有的那就是 VScode 編輯器，雖然還有其他編輯器，但是本篇就只介紹 VScode

內容目錄

網頁編輯工具有哪些?

可以說非常非常多，如果作為一位初學沒必要花太多時間在選擇一款編輯工具上，那是因為你需要把時間花在如何學習 HTML 或是 CSS，你只需要找一款你看得順眼的編輯工具就好了。

現在各廠所做的編輯工具有的是免費有的付費，但是最到後面每家的功能都差不多了，你只要學會一款編輯工具其餘的都可以互通，對於真正的高手用什麼工具都可以實現你的目標，就跟你會開車會騎摩托車一樣你學會了這些技能思路，你換車就算不同廠牌的車你還是會開呀!只是駕馭的感覺要熟悉一下而已。

點我瞭解小青如何每月多賺5位數台幣

為什麼要用 VScode

那是因為可以說前端人員用的人最多，裡頭又有很多外掛可以安裝讓你便捷性持續增加，然而 VScode 是由微軟所開發，他們花了大把大把的銀子去做並免費開放給所有人使用，不管你用 Windows 作業系統、MacOS 還是 Linux 通通你都可以裝。

VScode 最多人員使用
VScode 免費
VScode 支援三大作業系統

VScode 如何安裝

其實非常簡單，你到 VScode 官方網站就可以下載(下載連結)

下在完後選擇你要安裝到哪一個硬碟，之後全按下一步並從新開機就完成了。

VScode 前端必裝外掛

首先我們會到編輯器的右邊會有一個由好幾個方塊組成符號或是你按快捷鍵 Ctrl+Shift+X 也可以直接開啟，這就是安裝外掛的地方，只要你在搜尋處搜尋一下幾個前端人員必裝的外掛，先裝這些就夠用了，往後你在自己進行探索適合你的外掛。

必裝外掛01

Chinese ( Traditional ) 用途是把整個編輯器漢化成繁體中文

必裝外掛02

Open in browser 用途是寫好 html 代碼後使用瀏覽器打開查看

必裝外掛03

Auto Rename Tag 用途是自動配對修改命名

點我瞭解小青如何每月多賺5位數台幣

必裝外掛04

CSS Peek 用途是追蹤樣式表也就是追蹤 CSS

小總結

外掛一開始不要太糾結，先裝這些就好了不要忘記時間還是以花在趕快學習完 HTML 為主。

外掛插件	作用功能
Chinese (Traditional)	漢化編輯器成繁體中文
Open in browser	使用瀏覽器打開查看HTML
Auto Rename Tag	自動配對修改命名
CSS Peek	追蹤CSS

VScode 初次如何使用?

首先我們第一次使用，一樣目的我們是要寫 HTML，以前筆記本是直接在桌面或是資料夾生成一個記事本，現在我們只要在菜單欄的檔案 -> 新增檔案 ( ctrl+N ) 就可以生成一個空白的文件，這文件就是記事本。

當你新增完一個文件，下一個動作就是先保存文件，一樣到菜單欄的檔案 -> 儲存 ( crtl+S )

然後要記得你檔案格式要取 html 格式。

完成以上步驟就可以開始寫 html 骨架了，如果忘記 HTML 的基本骨架可以去複習上篇文章在回來本篇文章繼續學習，那有了編輯器是不是會比筆記本還厲害，那是肯定的以前我們骨架都要打老半天現在只需打個驚嘆號花個一秒就可以自動生成骨架了，是不是很方便呢!

點我瞭解小青如何每月多賺5位數台幣

接下來輸入 title 標籤內容和在 body 標籤裡面寫號一段文字，就可以啟動之前我們裝的外掛插件 Open in browser ( Alt+B ) 才能夠啟動瀏覽器查看我們寫的 HTML 網頁。

VScode查看網頁右鍵選Open In Default Browser AltB

小總結

生成新文件 ( ctrl+N )
保存文件 ( ctrl+S )
保存格式 ( .html )格式
生成骨架，使用一個驚嘆號
查看網頁，使用右鍵選 Open In Default Browser ( Alt+B )

總結

在本章我們介紹了 VScode 的新建文件和儲存文件還有安裝四個前端人員會用到的外掛插件，基本上就可以應付所有場景了，至於要不要記下快捷鍵的按法我個人覺得用久了你自行會思考要不要使用快捷鍵台提高效率，也不需要去被它。

點我瞭解小青如何每月多賺5位數台幣

其他相關文章推薦:

能看到這裡通常只有 1％的人，很感謝您可以閱讀到這裡（鞠躬）
本篇文章歡迎社群分享，可按分享按鈕，讓更多的人知道此篇文章
如果是引用本篇文章任何段落請附上本篇文章連結即可唷！
嚴禁搬運整篇文章到你個人部落格、寫成新聞稿
這麼做你會被任何搜尋引擎懲罰 Ban 掉
如需合作請右上角服務項目 -> 聯繫我們
by 小青

【HTML指南】Day05 – VScode 是什麼?前端人員必裝?

網頁編輯工具有哪些?

為什麼要用 VScode

VScode 如何安裝