环境设置

在编写任何一行 Shopify 代码之前，你需要一个正确配置的开发环境。本节课将引导你完成所有需要的工具安装，提供 macOS、Linux 和 Windows（WSL2）的精确命令。学完后，你将拥有 Claude Code、Shopify CLI 和一个 Shopify 开发店铺。

所需工具概览

工具	用途	版本
Node.js	JavaScript 运行时	20+（推荐 LTS）
npm	包管理器	随 Node.js 一起安装
Claude Code	智能编程 CLI	最新版
Shopify CLI	Shopify 开发工具包	最新版（v3+）
Git	版本控制	2.30+
VS Code 或 Cursor	代码编辑器	最新版

第一步：安装 Node.js 20+

Shopify CLI 和 Claude Code 都需要 Node.js。我们推荐使用 nvm（Node 版本管理器），这样可以轻松切换版本。

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

第二步：安装 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 验证它是否正常工作。

第三步：安装 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 合作伙伴账号凭据登录。

Shopify CLI v3+ 架构

Shopify CLI v3 基于 oclif 框架构建，采用插件架构。@shopify/app 包添加了应用相关的命令。当你运行 shopify app init 时，CLI 会生成一个包含 Shopify 专用工具的完整 Remix 应用脚手架。

验证 Shopify CLI

# List available commands
shopify commands

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

第四步：创建 Shopify 合作伙伴账号

如果你还没有，请创建一个免费的 Shopify 合作伙伴账号：

1. 访问 partners.shopify.com
2. 点击 Join now 并填写你的信息
3. 验证你的电子邮件地址
4. 完成合作伙伴入职调查

合作伙伴账号让你可以访问：

• 无限量的开发店铺（免费的 Shopify 测试店铺）
• 合作伙伴仪表板，用于管理应用和店铺
• 收入分成，当你发布应用或推荐商家时
• Shopify Academy 课程和认证

第五步：创建开发店铺

开发店铺是免费的 Shopify 店铺，永不过期且包含所有功能。本课程至少需要一个。

通过合作伙伴仪表板

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"。这会为你提供示例产品、集合、客户和订单，让你可以立即开始工作。使用看起来真实的数据进行开发比从零开始要高效得多。

第六步：设置代码编辑器

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 Check	Liquid 文件的 Lint 检查和自动补全
GraphQL	GraphQL 语法高亮和验证
Tailwind CSS IntelliSense	Tailwind 自动补全（用于 Hydrogen）
ESLint	JavaScript/TypeScript Lint 检查
Prettier	代码格式化

Cursor

如果你更喜欢 Cursor（AI 增强的 VS Code 分支），相同的扩展也可以使用。Cursor 还有内置的 AI 功能，与 Claude Code 配合得很好 -- 使用 Cursor 进行内联建议，使用 Claude Code 处理更大的多文件智能任务。

推荐的 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"
  }
}

第七步：配置 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 自动化

这是你第一次体验智能编程。启动 Claude Code 并问它："检查我的开发环境是否已正确设置用于 Shopify 开发。验证 Node.js 20+、Shopify CLI 和 Git 是否已安装。" Claude Code 将运行这些命令并告诉你缺少什么。

下一步

你的环境已准备就绪。在下一节课中，我们将使用 shopify app init 创建你的第一个 Shopify 应用，并将其安装到你的开发店铺上。