學習網頁前端需要那些工具

IDE（Integrated Development Environment）

Visual Studio Code

是一款由微軟開發且跨平台的免費原始碼編輯器。該軟體以擴充元件的方式支援語法突顯、程式碼自動補全、程式碼重構功能，並且內建了命令列工具和 Git 版本控制系統。使用者可以更改佈景主題和鍵盤捷徑實現個人化設定，也可以透過內建的擴充元件程式商店安裝其他擴充元件以加強軟體功能。

• 價格：免費。
• 系統：Windows、MacOS、Linux。

Sublime Text

是一套跨平台的文字編輯器，支援基於 Python 的外掛程式。Sublime Text 是專有軟體，可透過套件（Package）擴充功能。大多數的套件使用自由軟體授權釋出，並由社群建置維護。

• 價格：免費，永久憑證需付費。
• 系統：Windows、MacOS、Linux。

Atom

由 GitHub 開發的自由及開放原始碼的文字與程式碼編輯器，支援 Node.js 所寫的外掛程式，並內建由Github 提供的 Git 版本控制系統。

• 價格：免費。
• 系統：Windows、MacOS、Linux。

Brackets

是 Adobe Systems 開發的一個以 HTML、CSS 及 JavaScript 編寫的編輯器。

• 價格：免費。
• 系統：Windows、MacOS、Linux。

Adobe Dreamweaver

是 Adobe 公司的網站開發軟體。它使用所見即所得的介面，亦有 HTML 編輯的功能。

• 價格：付費。
• 系統：Windows、MacOS。

WebStorm

WebStorm 是由 JetBrains 開發的高級 IDE，專為現代 JavaScript 開發而設計。它為 JavaScript、TypeScript、HTML 和 CSS 以及流行的框架如 React、Angular、Vue.js 和 Node.js 提供全面支持。WebStorm 提供了一個用戶友好的界面，並結合強大的功能來簡化初學者和有經驗的開發者的網頁開發過程。

• 價格：付費。
• 系統：Windows、MacOS、Linux。

Codespaces

這款軟體由 Microsoft 設計，擁有 Visual Studio Code 的所有功能，讓您不論在哪裡都能夠撰寫程式碼。重要的是，Codespaces 的用戶可以將程式碼放在雲端伺服器中而不需要在個人電腦上運行，讓您能向業主展示專案並即時獲取回饋。

• 價格：付費。
• 系統：瀏覽器。

線上編輯器

簡單來說，就是讓您不需要在電腦上安裝任何軟體，如: VS Code，只要打開瀏覽器，就能直接編寫 HTML、CSS 和 JavaScript，並即時看到渲染結果。

以下幾個線上編輯器的共同特點與各自的獨特優勢：

CodePen

目前社群活躍度最高、介面最美觀的平台。它不僅是一個工具，更像是一個開發者的社群媒體。

JSFiddle

快速重現 Bug 或測試特定的 Library。很多 Stack Overflow 上的回答都會附上 JSFiddle 的連結。

JSBin

主打簡潔、快速、無干擾。專注於 JavaScript 調試（Debugging）。