AtomCode 前端开发实战教程

面向日常前端开发工作，从入门到精通

1. AtomCode 是什么

AtomCode 是由 AtomGit 开发的 AI 编程助手，专为开发者设计。

核心特点

对话式编程：在聊天中完成编码、调试、重构
技能生态（Skills）：可安装社区/自定义编程技能
MCP 服务：连接外部工具（数据库、浏览器、API）
Hooks：自动触发格式化、lint、类型检查
跨平台：Windows / macOS / Linux 均可

适用人群

角色	适用性
前端开发	✅ 最佳
全栈开发	✅ 最佳
后端开发	✅ 很好
运维/DevOps	⚠️ 能用
非技术用户	❌ 不推荐

2. 安装与配置

2.1 基础安装

复制代码

# VS Code 扩展商店搜索 "AtomCode" 安装
# 或 CLI 安装
npm install -g @atomgit/atomcode

2.2 首次启动配置

复制代码

atomcode init
# 会在当前目录创建 .atomcode/ 配置文件夹

2.3 建议的全局配置

.atomcode/settings.json：

复制代码

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": { "fileRegex": "\\.(vue|js|ts|jsx|tsx|css|scss)$" },
        "commands": ["npx prettier --write {file}", "npx eslint --fix {file}"],
        "description": "保存后自动格式化和 lint"
      }
    ],
    "PreToolUse": [
      {
        "matcher": { "fileRegex": "\\.env$" },
        "block": true,
        "message": "⛔ 禁止直接编辑 .env 文件"
      }
    ]
  }
}

2.4 Node.js 检查

复制代码

node --version   # 需 ≥18
npx --version    # 检查 npx 可用

3. 核心概念

复制代码

┌─────────────────────────────────────────────┐
│               AtomCode                       │
│  ┌──────────┐ ┌──────────┐ ┌──────────────┐ │
│  │  Skills   │ │   MCP    │ │    Hooks     │ │
│  │ 📦技能包  │ │ 🔗外部服务│ │ ⚡自动触发   │ │
│  └──────────┘ └──────────┘ └──────────────┘ │
│  ┌──────────┐ ┌──────────┐                  │
│  │ Commands │ │ Subagents│                  │
│  │ ⌨️快捷命令│ │ 🤖子代理  │                  │
│  └──────────┘ └──────────┘                  │
└─────────────────────────────────────────────┘

三种交互模式

模式	触发方式	适用场景
对话	直接聊天	提问、代码审查、讨论方案
Slash 命令	`/命令名`	快速执行特定任务
自动触发	Hooks	格式检查、文件保护

4. 前端项目初始化

4.1 快速新建项目

复制代码

# React + Vite
我需要创建一个 React 项目，用 Ant Design 做组件库

# Vue + Vite
帮我初始化一个 Vue 3 + Pinia + Element Plus 的项目

# Next.js
创建一个 Next.js 14 App Router 项目

4.2 初始化 AtomCode 配置

进入项目目录后：

复制代码

cd my-project
atomcode init

然后告诉我项目类型，我会自动推荐合适的 skills 和配置。

4.3 推荐的前端 Skills 安装

复制代码

# 核心
npx skills add sundial-org/awesome-openclaw-skills@git-essentials -g -y
npx skills add aj-geddes/claude-code-bmad-skills@developer -g -y

# 特定框架（按需）
npx skills add <react-skill> -g -y
npx skills add <vue-skill> -g -y

5. 每日工作流

5.1 早晨：开工

复制代码

# 检查 Git 状态
/git-essentials 帮我看下当前分支状态

# 拉取最新代码
帮我 git pull 并告诉我哪些文件有变更

5.2 开发中

复制代码

# 写组件
帮我创建一个 Button 组件，支持 primary/dashed/text 三种类型

# 改样式
把这个 Card 组件的阴影改成更柔和的效果

# 联调 API
帮我写这个用户列表页面的 API 调用和状态管理

# 调试
这个控制台报错 Uncaught TypeError: xxx.map is not a function

5.3 Code Review

复制代码

# 帮我审查这段代码
帮我 review src/components/Table.vue，关注性能问题

# 找 bug
这段代码有什么潜在问题？

5.4 提交代码

复制代码

# 提交
帮我 git add 改动的文件，commit 信息写 "fix: 修复表格分页重复请求问题"

# 列出暂存区
git add -A，然后列出暂存的文件让我确认

6. Skills 实战

6.1 安装社区 Skills

复制代码

# 搜索可用 skill
npx skills find react
npx skills find vue
npx skills find typescript

# 安装（-g 全局，-y 自动确认）
npx skills add owner/repo@skill-name -g -y

6.2 自定义 Skill 示例

场景：团队有一个「新建页面」的标准流程。

创建 .atomcode/skills/new-page/SKILL.md：

复制代码

---
name: new-page
description: 创建标准前端页面（路由+组件+样式+类型）
user_invocable: true
disable_model_invocation: false
---

# new-page

根据团队规范创建新页面。

## 参数
- {name}: 页面名称（PascalCase）
- {route}: 路由路径

## 执行步骤
1. 创建 src/views/{name}/index.vue
2. 创建 src/views/{name}/types.ts（类型定义）
3. 创建 src/views/{name}/style.module.scss
4. 在 router/index.ts 注册路由 {route}
5. 导出到相应当目录的 index.ts

使用：/new-page name=UserProfile route=/user/profile

6.3 常用前端 Skills 推荐

Skill 名	用途	来源
git-essentials	Git 工作流	社区
developer	通用开发能力	社区
file-organizer	文件整理	自定义（已装）
git-setup	Git 环境检查	自定义（已装）
project-conventions	项目规范检查	自定义
new-component	创建新组件模板	自定义

7. MCP 服务配置

7.1 什么是 MCP

MCP（Model Context Protocol）让 AtomCode 连接外部工具：

复制代码

AtomCode ←→ MCP Server ←→ 外部服务（数据库、API、浏览器）

7.2 前端常用 MCP

文档查询（context7）

配置 ~/.atomcode/mcp.json：

复制代码

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@context7/context7-server"]
    }
  }
}

效果：在对话中直接查询 React/Vue/Next.js 官方文档。

浏览器测试（Playwright）

复制代码

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp"]
    }
  }
}

效果：AtomCode 可以直接操作浏览器进行 UI 测试。

数据库（PostgreSQL）

复制代码

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@supabase/mcp-server"]
    }
  }
}

7.3 MCP 配置规则

配置位置	作用范围	是否提交到 Git
项目 `.atomcode/mcp.json`	仅当前项目	✅ 建议提交
全局 `~/.atomcode/mcp.json`	所有项目	❌ 不提交

MCP 配置修改后需要重启 AtomCode 才能生效

8. Hooks 自动化

8.1 完整的前端 Hooks 配置

复制代码

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": { "fileRegex": "\\.env(\\.\\w+)?$" },
        "block": true,
        "message": "⛔ .env 文件包含敏感信息，不允许直接编辑"
      },
      {
        "matcher": { "fileRegex": "(package-lock\\.json|yarn\\.lock|pnpm-lock\\.yaml)$" },
        "block": true,
        "message": "⛔ 锁定文件请使用包管理器（npm/yarn/pnpm）更新"
      }
    ],
    "PostToolUse": [
      {
        "matcher": { "fileRegex": "\\.(vue|js|ts|jsx|tsx)$" },
        "commands": ["npx prettier --write --ignore-unknown ."],
        "description": "前端文件编辑后自动格式化"
      }
    ]
  },
  "permissions": {
    "allow": [
      "Edit",
      "Write",
      "Bash(npm *)",
      "Bash(npx *)",
      "Bash(yarn *)",
      "Bash(pnpm *)",
      "Bash(git *)"
    ]
  }
}

8.2 常见 Hook 场景

场景	Hook 类型	效果
代码格式化	PostToolUse	编辑后自动 prettier
ESLint 检查	PostToolUse	编辑后自动 lint
TypeScript 类型检查	PostToolUse	编辑后运行 tsc --noEmit
保护 .env	PreToolUse	阻止意外编辑
保护锁文件	PreToolUse	阻止手动改 lock 文件
运行测试	PostToolUse	修改组件后跑相关测试

9. 高级技巧

9.1 用子代理做代码审查

创建 .atomcode/skills/code-reviewer/SKILL.md：

复制代码

---
name: code-reviewer
description: 专门的前端代码审查员
user_invocable: false
disable_model_invocation: true
---

# Code Reviewer

你是一个资深前端工程师，专注代码审查。

## 审查重点
1. **性能**：有无不必要的重渲染、内存泄漏
2. **可维护性**：组件拆封是否合理，命名是否清晰
3. **类型安全**：TypeScript 类型是否正确
4. **可访问性**：ARIA 属性、键盘导航
5. **错误处理**：API 调用有无 try-catch、边界情况

9.2 快捷键和 Slash 命令

命令	作用
`/help`	查看所有可用命令
`/skill-list`	列出当前已安装 skills
`/file-organizer`	整理文件
`/git-setup`	检查 Git 环境
`/git-essentials`	Git 工作流

9.3 高效提问技巧

复制代码

❌ 低效：这段代码怎么优化？
✅ 高效：这个 Table 组件在大数据量(1000+行)时很卡，
   怎么做虚拟滚动优化？我用的是 Ant Design 5.x

❌ 低效：帮我写个登录页面
✅ 高效：帮我写一个登录页面，使用 Formik + Yup 做表单验证，
   API 地址是 /api/auth/login，UI 参考 Ant Design Pro

9.4 .atomcode 目录结构

复制代码

my-project/
├── .atomcode/
│   ├── settings.json           # Hooks + 权限配置
│   ├── mcp.json                # MCP 服务配置（可选）
│   ├── commands/               # 自定义 slash 命令
│   │   └── deploy.md
│   └── skills/                 # 自定义 skills
│       ├── file-organizer/
│       │   └── SKILL.md
│       ├── new-component/
│       │   └── SKILL.md
│       └── code-reviewer/
│           └── SKILL.md

10. 常见问题

Q: AtomCode 怎么收费？

目前基础功能免费。高级功能（团队协作、私有模型）可能收费，请关注 AtomGit 官方公告。

Q: 可以私用 DeepSeek 或其他模型吗？

AtomCode 默认使用 deepseek-v4-flash，但你可以在设置中切换其他支持的模型。

Q: 安装 skills 报错怎么办？

复制代码

# 检查 Node.js
node --version

# 检查网络
npm ping

# 尝试手动安装
mkdir -p ~/.atomcode/skills/<name>
# 去 https://skills.sh 找 SKILL.md 内容粘贴

Q: 如何更新 skills？

复制代码

npx skills update <skill-name>

Q: MCP 服务不生效？

检查 .atomcode/mcp.json 格式是否正确（JSON 语法）
重启 AtomCode
运行 atomcode --mcp-debug 查看日志

Q: 如何分享我的 skill 给团队？

将 .atomcode/skills/<name>/SKILL.md 提交到 Git 仓库即可。团队 git pull 后自动生效。

Q: AtomCode 会查看我的代码吗？

AtomCode 在处理你当前打开的对话时，会读取相关的代码文件。代码不会上传到第三方服务器（deepseek-v4-flash 在 AtomGit 自己的基础设施上运行）。

快速启动清单

复制代码

□ 安装 AtomCode（VS Code 扩展 / npm）
□ node --version 确认 ≥18
□ atomcode init 初始化项目配置
□ npx skills install 安装基础 skills
□ 配置 .atomcode/settings.json hooks
□ 按需配置 MCP 服务
□ 开始你的第一次对话！