VSCode on Liangweidong's blog

Cursor 实战：AI-first IDE 的 5 大模式、Pro 订阅与插件生态全攻略

Mon, 15 Dec 2025 00:00:00 +0800

时间锚点：2025-12——Cursor 1.x 时代，Composer 2 已成默认，GPT-5.3 / Claude Sonnet 4.6 / Opus 4.6 已是日用模型；与 2024-07-28《AI 行业趋势综述》配套阅读（那篇是 2024 视角，本文为 2025 视角）

〇、2025 视角开篇

本文写于 2025-12-15，站在 2025 年底回望：Cursor 已经从"AI-first IDE 新星"演化成"事实标准之一"——2024-09 那篇前瞻到 2025 年底大部分已被验证。文中提到的 GPT-5.3 Codex / Sonnet 4.6 / Opus 4.6 / Composer 2 均为 2025 年中后期已发布的模型（不是"未来模型"），2024-09 时它们是"传闻 / 预览"，到 2025-12 已是"日常选项"。

一、为什么选择 Cursor

Cursor（Anysphere）是 2024 年现象级的 AI-first IDE，直接 fork VS Code 内核，把所有 AI 能力内化为编辑器一等公民。2024-2025 年间 ARR 从 0 冲到 5 亿美元，被视为 SaaS 史上最快增长曲线之一。

核心差异点（与传统 VS Code + Copilot 插件方案对比）：

维度	Cursor	VS Code + Copilot
架构	fork VS Code，AI 是内核一部分	插件机制，AI 是外挂
Tab 补全	多行 + 上下文感知，跨文件	单行 / 多行，断网即停
Agent 模式	原生 Agent + Plan + Debug	需通过插件 + MCP 间接调度
代码库理解	自动 embedding，存储在云端	无索引，每次需手动贴上下文
价格	Pro $20/月（含 API 额度）	Copilot $10/月（不含 API）

2025-12 更新：Cursor Pro 价格仍为 $20/月（保持 2024 价位），Copilot 在 2025 年提过一次价（$10→$19/月含 API），但 2025-Q3 又调回 $10 单订阅 / $19 含 API 两种档位。

二、5 大核心模式

Cursor 把 AI 协作拆成 5 个独立模式，每个模式有不同的工作流：

模式	触发方式	核心场景
Agent	`Ctrl+I`	端到端任务：修 Bug / 写功能 / 重构
Plan	`Shift+Tab` 切换	复杂任务先出方案再动手
Debug	调试菜单	难复现问题，先假设后验证
Ask	`Ctrl+L`	问答 / 解释代码，不修改文件
Composer	独立面板	跨文件大规模改写

2.1 Agent 模式

Agent 是 Cursor 的"主菜"，由三个组件协同：

1
2
3


Agent = Instructions（system prompt + 规则）
 + Tools（文件编辑 / 代码库搜索 / 终端执行 / MCP）
 + Model（Composer 2 / GPT-5.3 Codex / Claude Sonnet 4.6 / Opus 4.6）

实战中 Agent 自动处理这些事：

自动分析项目结构（@src/ 包含文件夹）
自动跑 npm test 验证
自动应用 diff，让用户 Ctrl+Y 接受
自动 commit（可关闭）

2.2 Plan 模式

复杂任务必须先开 Plan 模式——Agent 会：

分析当前代码库
提出 2-3 个澄清问题（“用 JWT 还是 session？"）
生成可审阅的实施计划
等待用户确认后才动手

经验法则：修改超过 3 个文件的任务，先 Plan。

2.3 Debug 模式

Debug 模式与传统 console.log 调试的差异：

不会立即写代码，而是先提出假设
自动加日志语句
利用运行时信息反推根因
再做针对性修复

适合：偶发性 bug、性能毛刺、并发问题。

2.4 Ask 模式

Ask 不修改任何文件，专用于：

“解释这段代码为什么这么写”
“这个函数的调用链是什么”
“对比 A 和 B 两种实现方案”

三、模型选择与 MAX 模式

Cursor 提供 5 类模型，按"质量-成本"梯度排列：

模型	上下文	定位	价格
Composer 2 Fast	200k	Cursor 自研 agentic 模型	Pro 套餐含
GPT-5.3 Codex	272k（MAX 1M）	OpenAI 编码专精	Pro + API 额度
GPT-5.4	272k（MAX 1M）	OpenAI 综合旗舰	Pro + API 额度
Sonnet 4.6	200k（MAX 1M）	Anthropic 日用	Pro + API 额度
Opus 4.6	200k（MAX 1M）	Anthropic 顶级	Pro + API 额度

MAX 模式会把上下文窗口撑到模型原生最大值（如 Sonnet 4.6 MAX = 1M），适合"整个代码库做大规模迁移"这类任务。但 MAX 按 token 计费，Pro 套餐会加收 20% 附加费。

实战配比建议：

日常 80%：Composer 2 Fast（快、便宜、够用）
中等复杂度：Sonnet 4.6（性价比最优）
大改动 / 难 Bug：Opus 4.6（最强但慢）
特定场景：GPT-5.3 Codex（编码任务特化）

四、Pro $20/月套餐成本核算

Pro 套餐结构：

1
2
3


Pro $20/月 = Auto 用量（Composer 2 + Auto 模式）
 + API 用量（其他模型，按 token 计费）
 + 至少 $20 API 额度

On-Demand 模式开启后，套餐额度用完按 API 费率继续扣费。月成本从 $20 到 $100+ 都有可能，取决于你用 MAX 模式 / Opus 4.6 的频率。

个人建议：

默认 Auto 模式，把"难任务"显式指定模型
关闭 On-Demand，避免月底天价账单
大规模重构任务用本地 Worktree 模式（下面有）

五、代码运行环境：Local / Worktree / Cloud

Agent 执行代码有 3 个环境：

环境	适用场景	优势
Local	当前工作区直接改	最直接，但风险大
Worktree	Git worktree 隔离分支	主分支不受影响，可并行
Cloud	云端代理	长任务 / 离开电脑时跑

关键习惯：所有"会改超过 5 个文件"的任务都用 Worktree，结束后 git merge 回主分支。

六、Auto-Run 与权限白名单

Agent 默认会在执行命令前询问，白名单机制可大幅减少打扰：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


{
 "commandAllowlist": [
 "npm test",
 "npm run build",
 "git status",
 "git diff"
 ],
 "mcpAllowlist": [
 "filesystem:read_file",
 "github:create_issue"
 ],
 "fetchDomainAllowlist": [
 "*.npmjs.com",
 "github.com"
 ]
}

保护机制（默认开启，建议全开）：

External-File Protection：禁止 Agent 写工作区外文件
File-Deletion Protection：禁止 Agent 自动删文件
MCP Tools Protection：禁止 Agent 自动跑 MCP 工具
Browser Protection：禁止 Agent 自动开浏览器

七、规则（Rules）系统

Cursor 的"规则"是 .cursor/rules/ 下的 Markdown 文件，按"全局 / 按文件路径 / 手动"三种粒度生效：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# 用户编码规范与重构指南

## 1. 交互与基础规范
- 中文优先：回答和注释用中文
- 代码颗粒度：超过 20 行考虑聚合或拆函数
- 避免深层嵌套，优先卫语句

## 2. 重构
- 小步重构：每次只做一个改动，频繁提交
- 命名拒绝缩写（约定俗成的 i 除外）
- 注释解释"为什么"而非"做什么"

规则文件支持 YAML frontmatter 限定作用路径：

1
2
3
4
5
6
7
8


---
paths:
 - "src/api/**/*.ts"
 - "**/*.{ts,tsx}"
---
# API 开发规范
- 所有 API 端点必须包含输入验证
- 使用标准错误响应格式

八、必备插件清单

分类	插件	作用
界面	One Dark Pro	主题美化
界面	material-icon-theme	图标美化
界面	Chinese (Simplified)	汉化包
界面	GitLens	Git 信息强化
效率	IntelliJ IDEA Keybindings	习惯 IDEA 快捷键切换
质量	SonarQube for IDE	静态分析
前端	Vue (Official)	Vue 3 开发
前端	ES7+ React/Redux Snippets	React 片段
前端	auto-rename-tag	HTML 标签自动重命名
前端	eslint	JS/TS 代码风格
Java	Language Support for Java (Red Hat)	Java 语法支持
Java	Extension Pack for Java	Java 套件
Java	Spring Boot Tools	Spring 工具
Java	Maven for Java / Gradle for Java	构建工具
Java	Test Runner for Java	JUnit 跑测
Go	Go	Go 语言支持
Rust	rust-analyzer	Rust 工具链
Python	Python (ms-python)	Python 调试 / 虚拟环境

避坑：Cursor 自带 AI 补全能力（Cursor Tab），与 Tabnine / GitHub Copilot 插件冲突，装一个就好。

九、核心快捷键速查

类别	操作	快捷键
Agent	开启/关闭对话	`Ctrl+I` / `Ctrl+L`
Agent	New Chat	`Ctrl+Shift+L`
Agent	切换 Agent	`Shift+Tab`
Agent	切换模型	`Ctrl+/`
Agent	接受变更跳下一处	`Ctrl+Y`
开关	Hide Terminal	`Ctrl+J`
开关	Search Files	`Ctrl+P`
跳转	跳到接口实现	`Ctrl+Alt+B`
跳转	跳到方法的接口	`Ctrl+U`
编辑	上面插入行	`Ctrl+Shift+Enter`
编辑	下面插入行	`Ctrl+Enter`
编辑	删除整行	`Shift+Del`
编辑	复制整行到下一行	`Alt+Shift+↓`

十、Java 跳转配置（提升 IDE 体验）

Cursor 继承自 VS Code，Java 跳转默认不完美。在 settings.json 加：

1
2
3
4


{
 "java.implementations": true,
 "java.references": true
}

装 Red Hat 的 Java Language Support + Debugger for Java 插件后，跳转功能接近 IDEA 体验。

十一、网络要求

Cursor 是 SaaS，对网络环境敏感。必需域名（公司内网需加白名单）：

1
2
3
4
5
6
7
8
9


api2.cursor.sh API 请求
api3.cursor.sh Cursor Tab
api4.cursor.sh Cursor Tab 区域节点
*.api5.cursor.sh Agent 请求
repo42.cursor.sh 代码库索引
*.authentication.cursor.sh 鉴权
marketplace.cursorapi.com 扩展市场
cursor-cdn.com 扩展市场 CDN
downloads.cursor.com 客户端更新

HTTP 兼容模式：默认 HTTP/2，企业代理环境若出现"流式响应被缓存"或"双向流不支持"等错误，可降级到 HTTP/1.1。

十二、订阅与计费陷阱

On-Demand 默认 Disabled——开启后套餐用完继续按 API 费扣，月底可能$100+
隐私选项 Data Sharing Enabled 默认开启——你的代码、提示词会用于训练，生产代码建议关闭
Commit Attribution 默认开启——Agent 生成的 commit 会标记 “Made with Cursor”，团队项目看公司文化决定
Cursor Tab 默认开启——多行补全比 Copilot 激进很多，新用户可能觉得"太自动”，可在 Settings > Cursor Tab 调灵敏度

十三、总结

Cursor 把"AI 是 IDE 一等公民"这件事做对了，编辑器体验 + Tab 补全 + Agent 闭环是它的护城河。但Pro $20 套餐只是个入门价，真要 MAX 模式 + Opus 4.6 跑大任务，月账单 $100+ 是常态。

实战建议：

新项目直接用 Cursor 起步，省去 30% 重复劳动
Worktree 模式是默认习惯，保护主分支
规则文件按团队规范沉淀，复用率最高的"知识资产"
On-Demand 默认关闭，控制成本
MAX 模式慎用，留给大改动

十四、2025→2026 模型升级与生态走向

站在 2025-12 收尾，回望 2024-09 时点 Cursor 模型表里那些"还是预览/即将推出"的型号，到 2025 年底已全部 GA：

模型	2024-09 时点	2025-12 时点
Composer 2 / Composer 2 Fast	尚未推出	日用首选（Cursor 自研 agentic 模型）
GPT-5.3 Codex	预览	OpenAI 编码主力（含 MAX 1M 选项）
GPT-5.4	传闻	OpenAI 综合旗舰（替代 GPT-4o/4.5 地位）
Sonnet 4.6	Sonnet 3.5 刚发布	Anthropic 性价比最优（替代 3.5/4.5 位置）
Opus 4.6	Opus 3 已发布	Anthropic 顶级（慢但最强）

2025 实战配比建议（相对 2024-09 原文"日常 80% Composer 2 Fast、中等 Sonnet 4.6、难 Bug Opus 4.6"基本一致）：

日常 80%：Composer 2 Fast（快、便宜、够用）—— 2025 年自研模型成熟后这个比例更稳
中等复杂度：Sonnet 4.6（性价比最优）—— 与 2024-09 判断一致
大改动 / 难 Bug：Opus 4.6（最强但慢）—— 与 2024-09 判断一致
特定场景：GPT-5.3 Codex（编码任务特化）—— 2025 年 OpenAI 编码模型已能跟 Sonnet 4.6 掰手腕

2026 展望（仅供参考，不属于"2025 已验证"内容）：

Cursor 可能跟进"按席位 + 按用量"双轨计费，避免 On-Demand 的天价账单争议
Composer 3 可能在 2026 年发布，进一步压缩对外部模型（GPT-5.3 / Sonnet 4.6）的依赖
AI IDE"五强格局"（Cursor / Trae / Claude Code / Copilot / Windsurf）短期不会破

下一步：可参考 2025-06-15《AI IDE 横评》看 Cursor / Trae / Claude Code / Copilot 五款主流工具的横向对比；2024-12-15《Trae 全攻略》了解字节系 AI IDE 的差异化打法。

VSCode HTML 开发速查与 Deno 入门

Tue, 15 May 2018 00:00:00 +0800

为什么写这篇：2018 年 VSCode 已经超越 Sublime 成为前端编辑器霸主，Emmet 缩写让写 HTML 像写"补全指令"一样快。同年 Node.js 作者 Ryan Dahl 公开了 Deno——“一种更安全、更现代的 JS/TS 运行时”。本文是这两件事的速查手册。

适用读者：刚开始用 VSCode 写 HTML 的同学；对 Deno 好奇但没动手的 Node 开发者。

前置知识：会装 VSCode 扩展；知道 Node.js 是什么。

1. VSCode 写 HTML 的 5 个高效快捷键

VSCode 内置 Emmet——Tab 键触发缩写 → 展开为代码片段。

快捷输入	展开为	用途
`!` + `Tab`	HTML5 完整骨架	新建 HTML 文件第一行
`html:5` + `Tab`	同上	等价于 `!`
`div*5` + `Tab`	5 个 div	批量创建同元素
`ul>li*3` + `Tab`	ul 包 3 个 li	嵌套批量
`div.classname` + `Tab`	`<div class="classname"></div>`	带 class 的元素

Why ! 工作：VSCode 把 ! 映射到 html5.json 这个 Emmet snippet 文件——触发后插入 DOCTYPE、html、head、body 全部标签。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
</body>
</html>

1.1 常用 Emmet 缩写速记

1
2
3
4
5
6
7
8
9


元素名 → <元素名></元素名>
元素#id → <元素 id="id"></元素>
元素.class → <元素 class="class"></元素>
元素[attr=val] → <元素 attr="val"></元素>
元素{文字} → <元素>文字</元素>
元素*数量 → 重复 N 次
父>子 → 嵌套
兄+弟 → 平级
()(群组) → 分组

实际案例：

1

.container>ul.list>li.item*5>a[href="#"]{链接$}

展开：

1
2
3
4
5
6
7
8
9


<div class="container">
 <ul class="list">
 <li class="item"><a href="#">链接1</a></li>
 <li class="item"><a href="#">链接2</a></li>
 <li class="item"><a href="#">链接3</a></li>
 <li class="item"><a href="#">链接4</a></li>
 <li class="item"><a href="#">链接5</a></li>
 </ul>
</div>

2. HTML5 骨架补全原理

! 触发的是 VSCode 内置的 HTML language server + Emmet engine：

输入 !
编辑器提示候选
按 Tab 接受
Emmet 把 ! 解析为 HTML5 模板，插入到光标位置

小贴士：可以在 文件 → 首选项 → 用户代码片段 → html.json 自定义模板，比如默认加 <meta name="author">、改 lang=“zh-CN” 等。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


{
 "html:zh": {
 "prefix": "!zh",
 "body": [
 "<!DOCTYPE html>",
 "<html lang=\"zh-CN\">",
 "<head>",
 " <meta charset=\"UTF-8\">",
 " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
 " <title>${1:文档标题}</title>",
 "</head>",
 "<body>",
 " $0",
 "</body>",
 "</html>"
 ]
 }
}

3. VSCode 必装前端扩展

类别	扩展	用途
核心	ESLint	代码检查（与项目内 `.eslintrc` 联动）
	Prettier	自动格式化
	EditorConfig for VS Code	跨编辑器代码风格（缩进/EOL）
HTML/CSS	Live Server	一键起本地 HTTP 服务器，文件改动自动刷新
	Auto Rename Tag	改开始标签自动改结束标签
	CSS Peek	从 HTML 跳到 CSS 定义
JS/TS	JavaScript (ES6) code snippets	ES6 代码片段
	TypeScript Vue Plugin (Volar)	Vue 3 + TS 类型提示
框架	Volar（Vue） / ES7+ React/Redux/React-Native snippets	框架支持
Git	GitLens	行内 blame、commit 历史
工具	Path Intellisense	路径自动补全
	TODO Highlight	高亮 TODO / FIXME
	REST Client	像 Postman 一样在 VSCode 里发 HTTP
	vscode-icons	文件夹/文件图标美化

轻量原则：扩展装得越多，VSCode 启动越慢。禁用不需要的——右键扩展 → “Disable (Workspace)” 或 “Disable Globally”。

4. Deno 是什么

Deno = “Destroy Node”——Node.js 作者 Ryan Dahl 在 2018 JSConf EU 演讲中亲口承认 Node.js 的设计缺陷（安全性、模块系统、构建工具链），宣布要"从头再来"，于是有了 Deno。

Deno 是一个安全的 JavaScript / TypeScript 运行时，基于 V8 引擎 + Rust + Tokio 异步运行时。

1
2


Node.js = V8 + libuv + C++ (2009)
Deno = V8 + Rust + Tokio (2018, 1.0 是 2020-05)

核心目标：

默认安全：沙箱、权限系统，没有 --allow-net 就不准联网
TypeScript 原生：不用配 tsconfig，不用装 ts-node，直接 deno run app.ts
标准模块走 URL：import { serve } from "https://deno.land/std/http/server.ts"
内置工具：deno fmt 格式化、deno lint 检查、deno test 测试、deno bundle 打包
单可执行文件：能编译成单一 binary 部署

5. Deno 安装与 REPL

5.1 安装

1
2
3
4
5


# Windows PowerShell
iwr https://deno.land/x/install/install.ps1 -useb | iex

# macOS / Linux
curl -fsSL https://deno.land/x/install/install.sh | sh

输出：

1
2


Deno was installed successfully to C:\Users\<user>\.deno\bin\deno.exe
Run 'deno --help' to get started

5.2 升级

1
2


deno upgrade
deno upgrade --version 1.45.0 # 指定版本

5.3 REPL 与执行

1
2
3
4
5
6
7


$ deno
# 进入交互式 REPL（类似 node）
> console.log(30933 + 404)
31337
> const name = 'Deno'
> `Hello, ${name}!` // 模板字符串支持
'Hello, Deno!'

5.4 执行脚本

1
2


// helloworld.ts
console.log('Hello, Deno!')

1
2
3


$ deno run helloworld.ts
Compile file:///D:/workspace/project/frontend/deno/helloworld.ts
Hello, Deno!

注意：第一次跑会"Compile"——Deno 把 TS 编译成 JS 缓存到 ~/.cache/deno/。第二次直接跑，无延迟。

5.5 一行执行远程脚本

1

deno run https://deno.land/std/examples/welcome.ts

6. Deno 的 TypeScript 原生支持

1
2
3
4
5
6
7
8


// app.ts
interface User {
 name: string
 age: number
}

const u: User = { name: '张三', age: 20 }
console.log(`Hello, ${u.name}!`)

1
2


$ deno run app.ts
Hello, 张三!

Why TS 一行就跑：Deno 内部用 swc 编译器把 TS 转成 JS，再喂给 V8 引擎。整个过程用户无感知——不用 tsc 编译、也不用 ts-node。

6.1 tsconfig 不必写

Deno 内置一套默认 TS 配置。如果要改：

1
2
3
4
5
6


{
 "compilerOptions": {
 "lib": ["deno.window"],
 "strict": true
 }
}

或在 deno.json：

1
2
3
4
5
6


{
 "compilerOptions": {
 "jsx": "react-jsx",
 "jsxImportSource": "preact"
 }
}

7. Deno vs Node：6 大差异

维度	Node.js	Deno
包管理	npm / yarn / pnpm + node_modules	无（直接 `import url`）
TS 支持	需要 ts-node / tsx / esbuild	原生
安全	默认有全部权限	默认零权限，按需 `--allow-*`
模块系统	CommonJS / ESM 双轨混乱	纯 ESM
标准库	没有官方 std（只有第三方）	`deno.land/std` 官方维护
工具链	各种 npm 包	内置（fmt / lint / test / bundle / doc / info）
部署	node + npm install + PM2	`deno compile` 单文件可执行

Why Deno 适合"快速脚本 + 安全执行"：在 CI 中跑第三方代码（如用户提交的函数计算）时，Deno 的沙箱比 Node + vm2 安全得多。

8. Deno 的安全沙箱

1
2
3
4
5
6
7
8
9


# 默认拒绝所有 I/O
deno run app.ts
# error: Uncaught PermissionDenied: read access to "./data.json"

# 显式授权
deno run --allow-read=./data.json app.ts

# 细粒度授权
deno run --allow-net=api.example.com --allow-read=/tmp --allow-env=API_KEY app.ts

权限 flag	作用
`--allow-read=[path]`	读文件
`--allow-write=[path]`	写文件
`--allow-net=[host]`	网络访问
`--allow-env=[var]`	读环境变量
`--allow-run=[cmd]`	执行子进程
`--allow-all`（`-A`）	全部权限（慎用）

设计哲学：Node 的 fs.readFile() 默认就能读任何文件——一旦代码被注入就完了。Deno 默认"什么都干不了"，按需授权——最小权限原则。

9. 示例：写一个 Deno HTTP Server

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


// server.ts
import { serve } from "https://deno.land/std@0.224.0/http/server.ts"

const handler = (req: Request): Response => {
 const url = new URL(req.url)
 if (url.pathname === "/") {
 return new Response("Hello, Deno!", {
 headers: { "content-type": "text/plain; charset=utf-8" }
 })
 }
 if (url.pathname === "/json") {
 return Response.json({ name: "Deno", version: Deno.version })
 }
 return new Response("Not Found", { status: 404 })
}

console.log("Listening on http://localhost:8000")
await serve(handler, { port: 8000 })

1
2


$ deno run --allow-net server.ts
Listening on http://localhost:8000

测试：

1
2
3
4
5


$ curl http://localhost:8000/
Hello, Deno!

$ curl http://localhost:8000/json
{"name":"Deno","version":{"deno":"1.45.0","v8":"...","typescript":"5.5.0"}}

关键点：

import 直接走 URL（https://deno.land/std/...）——没有 npm install

Deno.version 内置变量

用 Response.json() 返回 JSON

必须 --allow-net，否则起不来

9.5 Deno 编译为单文件可执行

1
2


deno compile --allow-net server.ts
# → server.exe (Windows) / server (Linux/Mac)

部署到生产环境时，直接拷这一个 binary 就行——不用装 Node、npm、Deno runtime。

小结

VSCode + Emmet：写 HTML 不超过 5 个键，效率比手敲高 10 倍
VSCode 扩展：选"必要 + 强相关"，别装几百个扩展拖慢启动
Deno：安全 + TS 原生 + 无 node_modules 的现代运行时
Deno 适用场景：CLI 工具、Serverless 函数、Edge Runtime、用户脚本执行
Deno 不适合：需要大量 npm 包的传统后端（生态仍小）

参考资料

设计建模工具实战：Axure / PowerDesigner / VSCode 全攻略

Wed, 15 Oct 2014 00:00:00 +0800

一、Windows 设计与建模工具全景

2014 年的 Windows 设计与开发工具链呈"专业分工"格局——没有一款 IDE 能通吃所有场景。本文整理：

Axure RP —— 交互原型
PowerDesigner —— 数据库建模
VSCode —— 轻量代码编辑器
Trae —— AI 辅助编程
Notepad++ —— 文本编辑瑞士军刀
Android Studio —— 移动开发

这套组合至今仍是"前端 + 后端 + 数据 + 移动"团队的标配。

二、Axure RP：交互原型的事实标准

2.1 定位

Axure RP（Rapid Prototyping）2003 年起源，是产品经理 + UX 设计师的"画图工具"。2014 年 Axure 7 已成熟，2017 年 Axure 8 加了 Team Project。

2.2 安装

官方 https://www.axure.com/。Windows 版 + Mac 版。安装时注意：

64 位系统 装 64 位（默认）
首次启动 要登录 Axure 账户激活
字体选 Microsoft YaHei / 思源黑体（比系统默认宋体好看 10 倍）

2.3 核心功能

页面与母版（Master）：

页面：每个独立屏
母版：复用元素（导航栏/页脚）
母版拖到页面就是占位，双击进入母版修改会全站联动

交互面板（Interactions）：

1
2
3
4
5


用例 1：登录失败弹窗
- 触发：点击登录按钮
- 条件：用户名 == "" OR 密码 == ""
- 动作：显示 Toast → 红色文字 "请输入用户名密码"
- 动作：聚焦到第一个空输入框

动态面板（Dynamic Panel）：

状态 A：未登录（头像占位 + 登录按钮）
状态 B：已登录（用户头像 + 退出按钮）
状态切换：交互中 Set Panel state to B

2.4 团队协作

Axure Share：上传 RP 文件到云 → 团队成员在线查看
链接预览：https://share.axure.com/XXXXX
导出 HTML 包：菜单 Publish → Generate HTML Files，双击 index.html 离线预览

2.5 与现代工具对比

工具	强项
Axure RP	逻辑交互最完整、逻辑面板最丰富
Figma	多人实时协作、组件库生态
Sketch	Mac 生态、矢量
墨刀 / 即时设计	国产、轻量
draw.io	流程图 + ER 图免费

经验法则：复杂逻辑交互用 Axure，简单 mockup 用 Figma。

三、PowerDesigner：数据库建模的老牌强者

3.1 定位

PowerDesigner 1989 年起源 Powersoft，SAP 收购 Sybase 后纳入麾下。2014 年是 16.5/16.6 版本。两套核心能力：

CDN/PDM：概念数据模型 / 物理数据模型
OOM/BPM：面向对象模型 / 业务流程模型

3.2 安装

16.5/16.6 SP06 兼容 Windows 7/8/10
16.7 是民间对 16.6 升级包的称呼
需要 JDK 1.6+（是的 2014 时代需要 Java）

3.3 CDM → PDM → SQL 三件套

1
2
3
4
5


概念模型（CDM）
 ↓ 自动转换
物理模型（PDM）
 ↓ 生成 SQL
数据库（MySQL/Oracle/PostgreSQL/...）

为什么需要 CDM：

CDM 关注业务实体（客户、订单、商品）
PDM 关注数据库细节（字段类型、索引、约束）
业务变了只改 CDM，PDM 自动重生成

3.4 名称转注释

PDM 里 Name 是逻辑名（中文友好），Code 是物理名（英文/SQL 字段）。批量把 Name 复制到 Comment：

Tools → Execute Commands → Edit/Run Scripts：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


' Name → Comment
Dim model
Set model = ActiveModel

For Each tbl In model.Tables
 tbl.Comment = tbl.Name
 For Each col In tbl.Columns
 col.Comment = col.Name
 Next
Next

执行后所有字段 Comment 都是 Name 中文，DDL 导出时自动带 COMMENT。

3.5 全局通用字段

每个表都加：create_by / create_time / update_by / update_time / sys_org_code。

两种做法：

PDM 全局模板：Tools → Model Options → Naming Convention → Default Field 添加
复制粘贴：先建一个表，右键 → Copy → Paste 保留字段

3.6 导出 DDL

Database → Generate Database：

Directory: 输出目录
File name: 默认 Script.sql
Generation options：勾选 Check model、Generate name in comment

导出的 SQL 直接 Navicat 执行。

3.7 PDMReader：免费 PDM 查看器

PDM 文件是 PowerDesigner 私有格式，没有 PD 看不了。PDMReader 是国产开源 PDM 浏览器：

装好后直接 .pdm 文件 → 自动生成 HTML 报告
免费导出 Word / Excel 数据字典

下载地址 http://www.pdmreader.com/（小众，但好用）。

四、VSCode：轻量编辑器的王者

4.1 定位

VSCode 2015-04 发布，4 年时间击败 Sublime、Atom。2014 时代它还是个"新生儿"——本文以 2024 视角写"VSCode 在 2014 之后的崛起"。

4.2 必备扩展（按场景）

通用：

扩展	用途
`Chinese (Simplified) Language Pack`	中文菜单
`Atom One Dark Theme`	经典暗色
`Markdown PDF`	MD 转 PDF
`IntelliJ IDEA Keybindings`	IDEA 快捷键习惯

Java 开发：

扩展	用途
`Extension Pack for Java`	微软官方全家桶
`Spring Boot Extension Pack`	Spring 全家桶
`Maven for Java`	Maven 集成
`Debugger for Java`	调试

4.3 配置代理

VSCode 启动可能需要代理（如果插件下载慢）：

File → Preferences → Settings → 搜 proxy：

1
2
3
4


{
 "http.proxy": "http://127.0.0.1:1081",
 "http.proxyStrictSSL": false
}

或者给 git 单独设代理：

1

git config --global http.https://github.com.proxy socks5://127.0.0.1:1080

4.4 常用快捷键

快捷键	作用
`Ctrl + P`	快速打开文件
`Ctrl + Shift + P`	命令面板
`Ctrl + B`	切换侧边栏
`Ctrl +` `	切换终端
`Ctrl + Shift + F`	全项目搜索
`F12`	跳转到定义
`Alt + F12`	查看定义（侧边）
`Ctrl + K Ctrl + C`	注释
`Shift + Alt + F`	格式化
`Ctrl + /`	行注释

五、Trae：AI 辅助编程的新时代

5.1 定位

Trae（2024）是字节跳动推出的 AI Native IDE，深度集成 Claude 3.5/GPT-4o。对标 Cursor。

5.2 核心能力

AI Chat 侧栏：写需求 → AI 自动改多文件
Inline Edit：Ctrl+K 在光标处改写代码
Agent Mode：写任务 → AI 拆解 → 自动执行 + 自我测试
上下文感知：自动读光标所在文件 + 关联文件

5.3 适用场景

新项目从 0 到 1：Agent 模式一键生成脚手架
老项目重构：AI 全项目扫描 → 出重构方案
Bug 定位：贴错误堆栈 → AI 给出最小复现 + 修复建议
单元测试生成：选中方法 → AI 自动生成 JUnit 5 / pytest 用例

六、Notepad++：Windows 文本编辑器之王

6.1 定位

Notepad++ 2003 年由 Don Ho 开发，基于 Scintilla 编辑组件。2014 时代是程序员最常用的"非 IDE"文本编辑器。

6.2 安装与配置

官方 https://notepad-plus-plus.org/downloads/
32 位版兼容更多插件
首次启动：Settings → Preferences → General → Language → 中文（界面中文化）
字体：Consolas 10pt（等宽字体之首）

6.3 必备插件

插件	用途
`Compare`	文件差异对比
`Explorer`	文件浏览器侧栏
`NppFTP`	内置 FTP/SFTP
`JSTool`	JSON 格式化
`XML Tools`	XML 美化
`MIME Tools`	Base64 编解码
`Markdown Panel`	MD 实时预览

6.4 杀手锏功能

列编辑：Alt + 鼠标拖动（多光标同时输入）
正则替换：Ctrl+H 勾选 Regular expression
多文件搜索：Ctrl+Shift+F
宏录制：Macro → Start Recording（重复操作自动化）

6.5 与 VSCode 对比

维度	Notepad++	VSCode
启动速度	★★★★★	★★★
内存	★★★★★	★★
插件生态	★★	★★★★★
大文件（>1 GB）	★★★★	★★（会卡）
多语言	★★★	★★★★★

经验法则：大文件 / 临时查看 → Notepad++，项目开发 → VSCode。

七、Android Studio：移动开发官方 IDE

7.1 定位

2013-12 Google 发布 Android Studio 1.0，正式取代 Eclipse ADT。基于 IntelliJ IDEA 社区版——前文提到的 IDEA 快捷键、插件全部通用。

7.2 安装与 SDK

官方 https://developer.android.com/studio。

安装时选 Android SDK + Android Virtual Device (AVD)
首次启动自动下载 SDK 平台工具 + Build Tools，强烈建议配置代理（详见 IDEA 章节）

7.3 Gradle 配置

gradle-wrapper.properties：

1
2
3
4
5


distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.5-bin.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

国内加速：用阿里云镜像：

1

distributionUrl=https\://mirrors.aliyun.com/macports/distfiles/gradle/gradle-8.5-bin.zip

7.4 模拟器选型

Android Studio 自带 AVD Manager：

x86_64 Image：Intel CPU 加速（推荐）
ARM Image：兼容性好但慢
物理机调试：开发者选项 → USB 调试 → adb devices 看

7.5 关键快捷键

快捷键	作用
`Alt + Enter`	导包 / 修复
`Ctrl + O`	重写方法
`Ctrl + I`	实现方法
`Ctrl + Shift + A`	找动作
`Ctrl + Alt + L`	格式化
`Alt + Insert`	生成代码

八、组合实战：产品→设计→开发→发布

8.1 完整工作流

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


产品经理（Axure）
 ↓ 输出原型 + 交互文档
UX 设计师（Figma/Axure）
 ↓ 输出 UI 设计稿
前端（VSCode + Trae AI）
 ↓ 输出静态页面
后端（IntelliJ IDEA）
 ↓ 输出 API + 业务
数据库（PowerDesigner）
 ↓ 输出 PDM + DDL
运维（Navicat + 服务器）
 ↓ 部署 + 监控

8.2 移动端

1
2
3
4
5
6
7
8


产品（Axure）
 ↓
UI 设计师（Figma）
 ↓
Android 端（Android Studio）
iOS 端（Xcode）
 ↓
测试（Android Studio AVD + 真机）

九、常见问题

9.1 Axure 启动慢

关掉"自动保存"
减少页面数量
升级 SSD

9.2 PowerDesigner 反向工程（从数据库生成 PDM）

File → Reverse Engineer → Database：

选择 ODBC 数据源或自定义 JDBC
选表 → 生成 PDM
注意：需要先在 Windows 装好 ODBC 驱动

9.3 VSCode 插件装不上

Extensions → Search → Install 失败通常因为插件市场被墙。对策：

1
2


# 离线安装
code --install-extension /path/to/extension.vsix

或配置国内镜像：编辑 argv.json 替换 marketplace。

9.4 Notepad++ 大文件卡

Settings → Preferences → Editing → 取消 Enable large file detection（超过 100MB 自动关掉语法高亮）。

9.5 Android Studio Gradle 同步慢

~/.gradle/init.gradle：

1
2
3
4
5
6
7


allprojects {
 repositories {
 maven { url 'https://maven.aliyun.com/repository/public' }
 maven { url 'https://maven.aliyun.com/repository/google' }
 maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
 }
}

十、下一步

想看 IDEA 深度：[2014-04-15 IntelliJ IDEA 全攻略]
想看版本控制：[2014-11-15 Git 与版本控制]
想看数据库建模输出：[2016-11-15 数据库客户端实战]

本文写于 2014 年，回看当时：Axure 7 是产品经理标配，Figma 直到 2016 年才发布；PowerDesigner 至今仍是金融/电信/制造行业的"老牌"；VSCode 2015 年发布后 4 年击败 Sublime 创下编辑器神话——这些工具的演化史就是一部 Web 开发演进史。