Skip to main content

環境設置

在撰寫任何一行 Shopify 程式碼之前，你需要一個正確配置的開發環境。本課將引導你完成所需的每個工具，提供 macOS、Linux 和 Windows（WSL2）的確切命令。完成後，你將擁有 Claude Code、Shopify CLI 和一個 Shopify 開發商店。

所需工具概覽​

工具用途版本
Node.jsJavaScript 執行環境20+（建議 LTS）
npm套件管理器隨 Node.js 附帶
Claude CodeAgentic Coding CLI最新版
Shopify CLIShopify 開發工具包最新版（v3+）
Git版本控制2.30+
VS Code 或 Cursor程式碼編輯器最新版

步驟 1：安裝 Node.js 20+​

Shopify CLI 和 Claude Code 都需要 Node.js。我們建議使用 nvm（Node Version Manager），這樣你可以輕鬆切換版本。

macOS / Linux​

# Install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# Restart your terminal, then install Node.js 20 LTS
nvm install 20
nvm use 20
nvm alias default 20

# Verify installation
node --version   # Should print v20.x.x
npm --version    # Should print 10.x.x

Windows (WSL2)​

使用 WSL2，而非原生 Windows

Shopify CLI 和 Claude Code 在類 Unix 環境中運作最佳。請先安裝 WSL2，然後在 WSL2 終端機中按照 macOS/Linux 的指示操作。

# In PowerShell (as Administrator)
wsl --install -d Ubuntu

# After WSL2 is set up, open Ubuntu terminal and install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.bashrc
nvm install 20
nvm use 20

驗證 Node.js​

執行以下命令確認一切正常運作：

node -e "console.log('Node.js', process.version, 'is ready')"
# Expected output: Node.js v20.x.x is ready

步驟 2：安裝 Claude Code​

Claude Code 是 Anthropic 的命令列程式設計代理。它在你的終端機中執行，可以讀取檔案、執行命令，以及與 MCP 伺服器互動。

# Install Claude Code globally
npm install -g @anthropic-ai/claude-code

# Verify installation
claude --version

配置你的 Anthropic API 金鑰​

Claude Code 需要 API 金鑰來與 Anthropic 的模型通訊。請從 console.anthropic.com 取得。

# Option 1: Set in your shell profile (~/.zshrc or ~/.bashrc)
export ANTHROPIC_API_KEY="sk-ant-your-key-here"

# Option 2: Claude Code will prompt you on first run
claude
保護你的 API 金鑰

你的 Anthropic API 金鑰提供對帳戶的完整存取權限。絕對不要將它提交到 Git、在截圖中分享，或貼到公開頻道中。請使用環境變數或密鑰管理工具。

測試 Claude Code​

執行一個快速測試，確保 Claude Code 正常運作：

# Start Claude Code in your project directory
cd ~/shopify-projects
claude

# Inside Claude Code, try a simple prompt:
# > Create a file called hello.js that prints "Hello from Claude Code"

Claude Code 應該會建立該檔案，你可以用 node hello.js 驗證它是否正常運作。

步驟 3：安裝 Shopify CLI​

Shopify CLI 是你建立應用程式、主題、管理擴充功能和部署到 Shopify 的主要工具。

# Install Shopify CLI globally
npm install -g @shopify/cli @shopify/app

# Verify installation
shopify version
# Expected: @shopify/cli/3.x.x

# Authenticate with your Partner account
shopify auth login

shopify auth login 命令將會開啟瀏覽器視窗。使用你的 Shopify Partner 帳戶憑證登入。

Shopify CLI v3+ 架構

Shopify CLI v3 建構在 oclif 框架上，使用外掛架構。@shopify/app 套件新增了應用程式特定的命令。當你執行 shopify app init 時，CLI 會搭建一個完整的 Remix 應用程式，內建 Shopify 專屬工具。

驗證 Shopify CLI​

# List available commands
shopify commands

# Check that app commands are available
shopify app --help

步驟 4：建立 Shopify Partner 帳戶​

如果你還沒有，請建立一個免費的 Shopify Partner 帳戶：

  1. 前往 partners.shopify.com
  2. 點擊 Join now 並填寫你的資料
  3. 驗證你的電子郵件地址
  4. 完成合作夥伴入門問卷

Partner 帳戶讓你可以存取：

  • 無限的開發商店（免費的 Shopify 商店，用於測試）
  • Partner Dashboard，用於管理應用程式和商店
  • 發布應用程式或推薦商家時的收益分成
  • Shopify Academy 課程和認證

步驟 5：建立開發商店​

開發商店是永不過期且包含所有功能的免費 Shopify 商店。本課程至少需要一個。

透過 Partner Dashboard​

  1. 登入 partners.shopify.com
  2. 在左側邊欄中導航到 Stores
  3. 點擊 Add store
  4. 選擇 Create development store
  5. 選擇 Create a store to test and build
  6. 填寫商店名稱（例如 masterclass-dev）
  7. 選擇 Start with test data 來預先填充產品和訂單
  8. 點擊 Create development store

透過 Shopify CLI​

# Create a dev store directly from the CLI
shopify app dev --store=masterclass-dev
# The CLI will guide you through store creation if needed
預先填充測試資料

建立開發商店時，請務必選擇「Start with test data」。這會為你提供範例產品、集合、客戶和訂單，讓你可以立即開始工作。使用看起來真實的資料進行開發比從零開始更有效率。

步驟 6：設定你的程式碼編輯器​

VS Code​

我們建議使用 VS Code 搭配以下擴充功能進行 Shopify 開發：

# Install VS Code extensions from the terminal
code --install-extension Shopify.theme-check-vscode
code --install-extension GraphQL.vscode-graphql
code --install-extension GraphQL.vscode-graphql-syntax
code --install-extension bradlc.vscode-tailwindcss
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
擴充功能用途
Shopify Theme CheckLiquid 檔案的 linting 和自動完成
GraphQLGraphQL 語法高亮和驗證
Tailwind CSS IntelliSenseTailwind 的自動完成（用於 Hydrogen）
ESLintJavaScript/TypeScript linting
Prettier程式碼格式化

Cursor​

如果你偏好使用 Cursor（AI 增強的 VS Code 分支），同樣的擴充功能也適用。Cursor 還有內建的 AI 功能，與 Claude Code 可以很好地互補 —— 使用 Cursor 進行行內建議，使用 Claude Code 進行更大型的多檔案 Agentic 任務。

建議的 VS Code 設定​

將以下內容加入你的 .vscode/settings.json：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "files.associations": {
    "*.liquid": "liquid"
  },
  "emmet.includeLanguages": {
    "liquid": "html"
  },
  "[liquid]": {
    "editor.defaultFormatter": "Shopify.theme-check-vscode"
  }
}

步驟 7：配置 Git​

版本控制是必不可少的。使用你的身份資訊配置 Git：

# Set your Git identity
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

# Set default branch name
git config --global init.defaultBranch main

# Enable helpful Git settings
git config --global pull.rebase true
git config --global fetch.prune true

建立全域 .gitignore​

Shopify 專案包含不應該提交的檔案：

# Create a global gitignore
cat >> ~/.gitignore_global << 'EOF'
# Environment variables
.env
.env.local
.env.*.local

# Dependencies
node_modules/

# Shopify
.shopify/

# OS files
.DS_Store
Thumbs.db

# Editor
.vscode/settings.json
.idea/
EOF

git config --global core.excludesfile ~/.gitignore_global

驗證清單​

逐一檢查此清單以確認一切設置正確：

# Node.js 20+
node --version

# npm 10+
npm --version

# Claude Code
claude --version

# Shopify CLI 3+
shopify version

# Git 2.30+
git --version

# Shopify authentication
shopify auth login --check 2>/dev/null && echo "Authenticated" || echo "Run: shopify auth login"
使用 Claude Code 自動化

這是你第一次體驗 Agentic Coding。啟動 Claude Code 並詢問它：「Check that my development environment is set up correctly for Shopify development. Verify Node.js 20+, Shopify CLI, and Git are installed.」Claude Code 會執行命令並告訴你缺少什麼。

下一步​

你的環境已經準備好了。在下一課中，我們將使用 shopify app init 建立你的第一個 Shopify 應用程式，並將它安裝到你的開發商店上。