前端開發工具總覽：學習網頁前端需要哪些工具
剛開始學前端時，最容易卡住的往往不是語法，而是「我到底該裝什麼」。這頁整理前端最核心的兩類工具：本機使用的編輯器 / IDE，以及免安裝的線上編輯器，並說明各自的價格、支援平台與適合情境。
給完全新手的一句話
先裝 Visual Studio Code 就能開始寫 HTML / CSS / JavaScript 了，其他的等真的需要再補。
IDE 與程式碼編輯器
「編輯器（Editor）」負責讓您把程式碼寫得舒服；「IDE（Integrated Development Environment，整合開發環境）」則額外整合了除錯、重構、版本控制等功能。前端因為工具鏈大多跑在終端機上，實務上絕大多數人使用的是「編輯器 + 擴充套件」的組合。
Visual Studio Code
Visual Studio Code 是微軟開發的跨平台免費編輯器，也是前端社群的絕對主流。它以擴充套件支援語法突顯、自動補全與重構，並內建終端機與 Git 版本控制。輕量的本體加上龐大的套件市集與最豐富的教學資源，是初學者最不容易踩雷的選擇。
Sublime Text
Sublime Text 是跨平台的文字編輯器，屬於專有軟體，功能可透過套件擴充。最大的優勢是啟動與開檔速度極快，開啟數十 MB 的 log 幾乎不需等待，多重選取與 Goto Anything 也能快速批次改字，很適合當成隨手開檔的第二把工具。本體安裝檔也相當小巧。
WebStorm
WebStorm 是 JetBrains 開發的專業 IDE，對 JavaScript、TypeScript 與 React、Vue.js、Node.js 提供開箱即用的完整支援，重構、跳轉定義與除錯整合都是強項，幾乎不必自己拼裝套件。缺點是較吃記憶體且需付費，專案越大越划算。學生與開源專案維護者可申請免費授權。
Zed
Zed 是 Atom 原班人馬打造的新世代編輯器，以 Rust 開發，主打極低的輸入延遲與流暢捲動，並內建多人即時協作與 AI 輔助。介面乾淨、開檔快速，但擴充套件生態仍在成長，整合度尚不如 VS Code 完整。目前更新頻率很高，值得持續關注。
GitHub Codespaces
GitHub Codespaces 是 Microsoft 提供的雲端開發環境，操作體驗與 VS Code 相同。程式碼與執行環境都放在雲端，不必在本機安裝任何相依套件，換電腦也能接續開發，很適合電腦效能不足或需要統一團隊環境的情境。環境設定也能寫進設定檔一併版控。
已停止維護（僅供了解）
以下幾款曾經很流行，但已停止開發或非現代前端主流，不建議新專案使用：
- Atom：由 GitHub 開發的自由及開放原始碼編輯器，支援 Node.js 所寫的外掛程式並內建 Git 版本控制，已於 2022 年 12 月正式退役，團隊後續轉向 Zed。
- Brackets：Adobe 以 HTML、CSS 及 JavaScript 編寫的編輯器，主打即時預覽與 CSS 快速編輯，Adobe 已於 2021 年終止支援。
- Adobe Dreamweaver：Adobe 公司的網站開發軟體，使用所見即所得（WYSIWYG）介面，亦有 HTML 原始碼編輯功能。現代前端多以元件化框架開發，已非主流選擇。
線上編輯器
線上編輯器讓您不需要在電腦上安裝任何軟體，例如：VS Code，只要打開瀏覽器就能直接編寫 HTML、CSS 和 JavaScript，並即時看到渲染結果。它們最常見的用途是練習語法、重現 Bug、分享程式碼片段。
CodePen
CodePen 是社群活躍度最高、介面也最美觀的線上編輯器，更像是開發者的社群媒體。精選作品區能看到大量高水準的 CSS 動畫與互動效果，原始碼公開可直接 Fork 修改，許多人也把它當成線上作品集。編輯器內也支援 Sass 與 TypeScript。
JSFiddle
JSFiddle 介面單純、載入快速，最適合快速重現 Bug 或測試特定函式庫。畫面固定切成 HTML、CSS、JavaScript 與結果四格，設定面板可直接勾選要載入的框架，許多 Stack Overflow 問答都會附上它的連結。產生的網址會永久保存，貼在文件裡日後仍能開啟。
JS Bin
JS Bin 主打簡潔、快速、無干擾，專注於 JavaScript 的除錯與逐步測試。它內建 Console 面板，能一邊改程式碼一邊看輸出結果，也可自由切換要顯示哪幾個面板，想驗證一小段語法行為時最為順手。也能把畫面嵌入教學文章，讓讀者直接動手修改。
StackBlitz
StackBlitz 是雲端專案級的線上編輯器，介面接近 VS Code，支援 npm 套件與完整的專案結構。它透過 WebContainers 把 Node.js 跑在瀏覽器裡，啟動快速，許多框架的官方文件都用它提供可執行的範例。連開發伺服器都跑在本機瀏覽器中，不受網路品質影響。
CodeSandbox
CodeSandbox 同樣支援完整專案結構與 npm 套件，並提供雲端虛擬機，連需要真實 Node.js 後端的專案也跑得動。它的強項是協作：可即時共編、與 GitHub 連動並自動建立 Pull Request 預覽環境。另外，免費方案的運算資源有限，閒置過久的專案會自動休眠。
常見問題
前端一定要用 VS Code 嗎？
不一定，但強烈建議新手從 VS Code 開始。它免費、教學資源最多，遇到問題時最容易搜尋到解法；等您熟悉工作流程後，再轉換到 WebStorm 或其他編輯器都不遲。
編輯器和 IDE 有什麼差別？
編輯器專注在「寫程式碼」，功能靠擴充套件補齊；IDE 則內建除錯器、重構工具與專案管理，開箱即用但相對吃資源。VS Code 介於兩者之間，裝上擴充套件後幾乎等同一個輕量 IDE。
線上編輯器可以取代本機環境嗎？
練習語法與分享片段沒問題，但真實專案會需要版本控制、套件安裝與建置流程，仍應建立本機開發環境。若受限於電腦效能，可考慮 GitHub Codespaces 或 StackBlitz 這類雲端方案。
