# WEB開發線上IDE推薦

###### tags: `開發工具` `IDE` `前端` `後端` `全端`

## 什麼是IDE？
- [整合開發環境](https://zh.wikipedia.org/wiki/%E9%9B%86%E6%88%90%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83)(Integrated Development Environment)的簡稱
- 與寫程式碼為主的編輯器不同，更強調「整合」其他開發常用工具在同一個環境
- 線上IDE："Coding anywhere only with browsers"
- 不用自己安裝開發環境
- 方便簡易測試/示範程式碼，甚至(小型)專案！

## 個人推薦的線上IDE
依自身使用經驗，以網站開發需求為主

### 前端(靜態)：
1. [JS Bin](https://jsbin.com/)，適合臨時測試畫面效果(介面較簡陋，適合用完即丟)
2. [Codepen](https://codepen.io/)，適合試做單一頁面(介面完善，適合展示靜態範例)
3. [CodeSandbox](https://codesandbox.io/?from-app=1)，適合操作前端框架(介面完整，但沒有終端機)

### 後/全端：
1. [Repl.it](https://replit.com/)，包含各類語言甚至部分系統權限(小型專案，尤其支援NPM)
2. [PHPSandbox](https://phpsandbox.io/)，便於展示PHP程式碼與專案，支援composer可使用Laravel等框架或套件
3. [Gitpod](https://gitpod.io/workspaces)，VSCode介面與root功能但有限制(最接近本機環境)
4. [GitHub Codespaces](https://github.com/features/codespaces)，也有VSCode介面但無終端機(測試版)