前端開發環境怎麼配：React、Tailwind、套件管理跟格式化

我的前端專案主要使用 React 生態系，框架上會根據需求選擇 Astro、Remix（React Router）或 Vite。這篇整理了我在前端開發時的環境配置，包含套件管理、程式碼格式化、Tailwind CSS 設定等面向。

VS Code 擴充功能

以下是我在 VS Code 裡開發前端時搭配使用的擴充功能：

Prettier

程式碼格式化工具，支援 JavaScript、TypeScript、CSS、HTML 等多種語言。儲存時自動排版，統一程式碼風格，不用再花時間手動調整格式。

ESLint

JavaScript / TypeScript 的靜態分析工具，可以在編輯時即時標示出潛在的錯誤跟不符合規範的寫法，搭配 Prettier 一起用效果最好。

Tailwind CSS IntelliSense

Tailwind CSS 的官方擴充，輸入 class 名稱時會自動補全，滑鼠懸停還能預覽對應的 CSS 屬性。搭配 Tailwind 開發時幾乎是必裝的。

Tailwind Snippets

提供常用的 Tailwind CSS 程式碼片段，可以快速插入常見的樣式組合，加速開發效率。

PostCSS Language Support

提供 PostCSS 的語法高亮支援，讓 VS Code 能正確辨識 PostCSS 的語法，不會出現錯誤標記。

JavaScript (ES6) code snippets

提供 ES6+ 語法的程式碼片段，像是箭頭函式、解構賦值、Promise 等常用模式，可以用縮寫快速產生。

Live Sass Compiler

可以即時編譯 Sass / SCSS 檔案，儲存後自動產生對應的 CSS，不需要額外設定建構工具。

Auto Close Tag

輸入 HTML / XML 的開始標籤後，會自動補上對應的結束標籤，減少手動輸入跟標籤漏關的問題。

Color Picker

在程式碼裡遇到顏色值時，可以直接用視覺化的選色器來挑選或調整顏色，不用再去外部工具轉換色碼。

i18n Ally

國際化（i18n）管理工具，可以在程式碼裡直接預覽翻譯結果，管理多語系的翻譯鍵值。做多語系專案的時候，不用頻繁切換翻譯檔案。

Figma for VS Code

Figma 的官方擴充，可以直接在 VS Code 裡瀏覽 Figma 的設計稿，查看元件的尺寸、間距跟色碼，從設計到開發的銜接更順暢。

Pencil

AI UI 設計工具的 VS Code 擴充，可以直接在編輯器裡透過文字描述產生設計稿，搭配開發流程使用非常方便。

Astro

Astro 框架的官方擴充，提供 .astro 檔案的語法高亮、IntelliSense、格式化等功能。開發 Astro 專案時的必備擴充。

MDX

提供 MDX 檔案的語法高亮跟 IntelliSense 支援。在 Astro 專案裡用 MDX 來寫內容的時候，編輯體驗會好很多。

更多 VS Code 擴充功能推薦可以參考：

瀏覽器擴充功能

除了 VS Code 擴充，我在瀏覽器上也會裝一組專門給前端開發用的擴充。跟閱讀相關的擴充（翻譯、降噪、擷取、回顧）整理在 網頁閱讀工作流 裡，這邊只列跟開發流程比較直接相關的幾個。

React DevTools

開發 React 專案時必備的擴充，可以直接在瀏覽器的開發者工具裡檢視 React 元件樹、props 跟 state，除錯的時候非常方便。

Wappalyzer

可以分析任何網站背後使用了哪些技術，像是前端框架、CMS、伺服器、分析工具等等。我在研究別人的網站或評估技術方案的時候會用到。

JSON Viewer

讓瀏覽器可以直接把 JSON 格式化成好閱讀的樣式，不用再把 JSON 貼到其他工具去排版。在除錯 API 回傳結果的時候很實用。

Access Control-Allow-Origin - Unblock

開發時最常遇到的就是前端在 localhost 打後端 API 被 CORS 擋下來，後端還沒加好 CORS header 的時候就會卡住。這個擴充會幫你把 Access-Control-Allow-Origin: * 塞進回應 header 裡，繞開瀏覽器的 CORS 限制，預設是關閉的，只在要用的時候才按工具列上的按鈕開啟，開發完記得關掉。它也支援依網域設定、URL pattern 範圍限制，跟 SharedArrayBuffer 需要的 header 附加。

套件管理

npm

大部分的前端專案我使用 npm 來管理依賴，它是 Node.js 內建的套件管理工具，不需要額外安裝，對大多數專案來說已經夠用了。

pnpm

在一些比較大型的專案或 monorepo 架構的專案裡，我會改用 pnpm。它的安裝速度比 npm 快，而且透過硬連結的方式共享套件，磁碟空間的使用效率更好。在 package.json 裡可以透過 packageManager 欄位指定版本：

package.json

{
  "packageManager": "pnpm@10.14.0"
}

程式碼格式化

Prettier

我在前端專案裡統一使用 Prettier 來做程式碼格式化。常用的設定如下：

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

主要的設定邏輯：

• semi: true：語句結尾加分號，減少 ASI（自動分號插入）帶來的潛在問題。
• singleQuote: true：字串用單引號，這是 JavaScript 社群比較常見的慣例。
• tabWidth: 2：縮排用 2 個空格，前端專案的主流設定。
• trailingComma: “es5”：在 ES5 允許的地方加上尾隨逗號，方便 diff 跟新增項目。

部分專案我也會搭配 @trivago/prettier-plugin-sort-imports 來自動排序 import 語句，保持檔案開頭的整潔。

ESLint

搭配 Prettier 一起使用的靜態分析工具，目前我的專案已經升級到 ESLint 9+ 的 flat config 格式：

eslint.config.js

import js from '@eslint/js'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
    },
  }
)

Flat config 的好處是設定結構更清晰，也更容易做條件式的規則配置。

Tailwind CSS

我的前端專案幾乎都使用 Tailwind CSS 來處理樣式。目前有兩種版本在使用：

Tailwind CSS v4

較新的專案（像是這個官方網站）使用 Tailwind v4，透過 Vite 插件整合：

astro.config.mjs

import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
})

v4 的設定直接寫在 CSS 裡，不再需要 tailwind.config.js：

src/styles/global.css

@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

Tailwind CSS v3

較早期的專案則是使用 Tailwind v3，透過 tailwind.config.js 來做配置。我習慣在裡面定義專案的主題色跟自訂的設計 token：

tailwind.config.js

export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: { /* 自訂色票 */ },
        secondary: { /* 自訂色票 */ },
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
}

TypeScript

所有前端專案都使用 TypeScript，通常會開啟 strict 模式，並設定路徑別名來簡化 import：

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

路徑別名讓 import 可以用 @/components/Button 取代 ../../components/Button，專案結構變動時也不用大量修改路徑。

UI 元件庫

shadcn/ui + Radix UI

我的大部分專案都使用 shadcn/ui 搭配 Radix UI 作為基礎元件庫。shadcn/ui 的好處是元件直接複製到專案裡，可以完全客製化，不會受到第三方套件更新的影響。

搭配 Tailwind CSS 的 CSS 變數做主題管理，可以很方便地實作深色模式跟自訂品牌色。

主要技術棧

總結一下我在前端開發中常用的技術組合：

• 框架：Astro / Remix（React Router）/ Vite + React
• 語言：TypeScript（strict mode）
• 樣式：Tailwind CSS（v3 / v4）
• UI 元件：shadcn/ui + Radix UI
• 圖示：Phosphor Icons / Lucide React
• 套件管理：npm（主要）/ pnpm（monorepo）
• 格式化：Prettier + ESLint（flat config）
• 部署：Cloudflare Workers / 靜態部署