JetBrains WebStorm – JavaScript／TypeScript／React 開發

JetBrains WebStorm 是一款由 JetBrains 開發的專業 JavaScript IDE（整合開發環境），專門為前端開發者設計，支援多種前端與後端 JavaScript 框架與技術，例如 React、Vue、Angular、Node.js 等。

以下是 WebStorm 的介紹與基礎教學，方便你快速上手。

---

🔍 WebStorm 簡介

✅ 主要特色

功能	說明
智慧程式碼補全	支援 JavaScript、TypeScript、HTML、CSS 等語言的即時語法提示與補全。
代碼重構工具	提供安全的重構功能，如重新命名、抽取方法、轉換箭頭函式等。
偵錯與測試工具	內建 JavaScript/Node.js 偵錯器與測試框架整合（如 Jest、Mocha）。
版本控制整合	原生支援 Git、GitHub、Mercurial 等版本控制工具。
框架支援	React、Vue、Angular、Svelte、Next.js、Node.js 等都有完整支援。
Terminal / Console	內建 Terminal，方便操作 CLI 工具如 npm、yarn 等。

---

🧰 安裝與啟動

安裝步驟：

1. 前往官網下載：https://www.jetbrains.com/webstorm/
2. 選擇作業系統（Windows / macOS / Linux）
3. 安裝並啟動 WebStorm。
4. 可選擇啟用 30 天免費試用 或使用教育授權 / 授權碼登入。

---

📁 建立新專案

1. 開啟 WebStorm → 點選 New Project
2. 選擇專案類型（如 React App、Empty Project、Node.js 專案等）
3. 選擇資料夾位置與 Node.js 版本
4. 點選 Create，WebStorm 會自動幫你建立基本結構

---

👨‍💻 基本操作教學

📦 安裝套件（npm）

• 透過內建 Terminal：

  npm install axios
  

• 或使用 UI 套件管理工具：
  File > Settings > Languages & Frameworks > Node.js and NPM

---

🧠 自動補全與提示

• 輸入 console. → 自動提示 log、error、warn 等
• 輸入 HTML/CSS/JS 內容都有即時提示與補全，並提示錯誤

---

🔍 搜尋功能

快捷鍵	功能
Shift（兩次）	全域搜尋檔案或功能
Ctrl + Shift + F	全專案文字搜尋
Ctrl + P	查看函式參數
Ctrl + Click	跳轉至定義
Alt + Enter	快速修正錯誤與建議

---

🐞 偵錯（Debug）

1. 在你要下中斷點的位置點一下左側（變紅點）
2. 點選右上角的 Debug 按鈕
3. 監控變數、Call Stack、輸出等資訊

---

✅ 測試（使用 Jest 為例）

1. 安裝 Jest：

   npm install --save-dev jest
   

2. 建立測試檔：

   // sum.test.js
   const sum = (a, b) => a + b;
   test('adds 1 + 2 to equal 3', () => {
     expect(sum(1, 2)).toBe(3);
   });
   

3. 直接右鍵執行測試或用 Terminal 執行：

   npx jest
   

---

🧩 常用插件推薦

插件名稱	用途
ESLint	程式碼風格檢查
Prettier	自動排版格式化
Vue.js	支援 .vue 檔案語法與模板
React snippets	快速插入 React 組件模板
GitToolBox	增強 Git 操作顯示

---

📚 學習資源

• 官方文件：https://www.jetbrains.com/help/webstorm/
• YouTube 教學頻道（搜尋：WebStorm Tutorial）
• JetBrains Academy（互動式教學平台）