學習網頁前端需要那些工具
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 的用戶可以將程式碼放在雲端伺服器中而不需要在個人電腦上運行，讓你能向業主展示專案並即時獲取回饋。
- 價格：付費。
- 系統：瀏覽器。
Visual Studio Code（VSCode）
- 下載。
- 安裝。
Visual Studio Code 套件安裝
Live Server
Live Server 是一款 VSCode 的擴充套件，它允許開發者快速在本地端電腦開啟一個開發用的伺服器，並且可以即時預覽他們的網頁應用。當您修改和保存文件時，這個插件會自動刷新瀏覽器，讓您立即看到更改的效果。
Code Runner。
Code Runner 是一款能夠讓您在 VSCode 上快速執行各種程式碼的擴充套件。
Chinese (Traditional) Language Pack for Visual Studio Code。
在新手時期為了能更快的上手程式碼，會建議能調整成自己看得比較習慣的語言。
Copy filename。
Copy filename 是一款讓您可以在檔案總管中，快速複製資料夾、檔案名稱的工具。
Image preview。
Image preview 可以讓您滑入程式碼中直接看到預覽影像。