老套說：「工欲善其事，必先利其器」— 要寫網頁，就不能沒有好用的開發環境。在開始認識各種前端技能之前，最重要的就是要先知道該在哪裡運行 Code ，就讓我們來看一看有哪些熱門又實用的開發環境吧！

線上編輯器

Codepen

CodePen 是一款線上編輯器，讓你能夠直接透過瀏覽器寫 Code，並且提供即時預覽畫面的功能。除了可以在上面開發簡單的網頁，也可以互相分享作品，學習更多網頁的開發技巧。

CodeSandbox

CodeSandbox 也是一款線上編輯器，支援各種前端框架，能夠直接創建 Template 配置專案，簡化建置專案的前置作業加速開發，並且也提供即時預覽畫面讓你直接看到更新的網頁內容。

本地開發環境

Visual Studio Code

VS Code 是目前最受歡迎、由微軟開發的一套文字編輯器，同時支持 Windows、macOS 和 Linux 系統。它除了可以用來開發 HTML、CSS、Javascript，也可以擴充支援 Python、C/C++、Java 等語言。

點擊Download按鈕就可以下載安裝檔，詳細安裝教學請參考這篇

擴充功能 (Extensions)

打開左側欄位的 Extensions，你可以看到 VS Code 所支援的擴充功能列表，這邊就來介紹幾個應用在網頁開發的實用插件：

Live Server

Live Server 提供即時預覽的功能，當你對網頁內容更動時，更新的內容會馬上反映在瀏覽器的畫面上。

只要按下下方的 Go Live 按鈕，就能使用 Auto Reload 的功能

Prettier - Code formatter

Prettier 提供代碼格式化(Formatter) 的功能，能夠幫你自動化整理、統一程式碼風格，支援 HTML、CSS、JavaScript ...等多種語言。

看更多關於 Prettier 的使用

小結

以上就是推薦給大家的熱門開發環境，在開始接下來的旅程之前，希望你能先認識這些工具，這樣你才能順利地跟著我認識各種前端技能。接著就帶著這些好用的工具，開始我們的前端技能樹之旅吧！Let's go！

如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️

參考資料

• Codepen Project - 完整的線上編輯器 @六角學院
• 使用 Visual Studio Code 開發 Web 應用程式 @Microsoft