环境准备

环境准备#

为 Windows 启用符号链接策略#

现在网络上有太多 AI 编程助手可用, 而本教程提供给你的模板对它们中很多都进行了配置.

为了简化我对项目的配置, 我使用了符号链接文件: 它能将一个文件的内容映射到其他位置, 如我在 .cursor/rules 里调整了编写规则, .kilocode/rules 里的编写规则也会被调整.

但 Windows 默认不允许非管理员创建符号链接——让我们来打开它!

我们按 Win+R 打开运行窗口, 输入 gpedit.msc 并回车来打开本地组策略编辑器:

../../../../_images/%E8%BF%90%E8%A1%8C%E7%AA%97%E5%8F%A3.png

依次展开计算机配置 ‣ Windows 设置 ‣ 安全设置 ‣ 本地策略 ‣ 用户权限分配, 点击用户权限分配, 在右侧找到创建符号链接:

../../../../_images/%E5%88%9B%E5%BB%BA%E7%AC%A6%E5%8F%B7%E9%93%BE%E6%8E%A5.png

双击它, 选择添加用户或组(U)... ‣ 高级(A)... ‣ 立即查找(N), 在查找结果中选择你的 Windows 用户名, 点击确定, 然后再依次确定两次来关闭窗口并应用更改:

../../../../_images/%E7%94%A8%E6%88%B7%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C.png

安装 Git#

请通过 Git 官网 下载 Git 安装包

../../../../_images/git%E5%AE%98%E7%BD%91.png

下载好安装包后, 双击安装包然后一直点击 Next 安装即可.

安装 NodeJS#

请通过 NodeJS 官网下载 NodeJS 安装包:

../../../../_images/nodejs%E5%AE%98%E7%BD%91.png

下载好安装包后, 双击安装包然后一步步点击 Next 安装即可, 除了第二步需要勾选 I accept the terms in the License Agreement、正式开始安装时需要确认外, 不需要额外操作.

如果你已经安装过, 双击安装会显示下图, 则你可以直接进行下一步:

../../../../_images/nodejs%E5%B7%B2%E7%BB%8F%E5%AE%89%E8%A3%85%E8%BF%87.png

安装 pnpm#

在安装好 NodeJS 后, 我们在 Windows 开始菜单 搜索 powershell, 右键以管理员身份运行它:

../../../../_images/%E4%BB%A5%E7%AE%A1%E7%90%86%E5%91%98%E8%BA%AB%E4%BB%BD%E8%BF%90%E8%A1%8Cpowershell.png

注意打开时窗口显示的东西, 我们在窗口执行完一条命令时, 它还会再次显示:

../../../../_images/%E6%89%93%E5%BC%80powershell.png

在这个窗口执行命令的方法是输入命令然后回车.

我们首先输入以下命令, 来确认 NodeJS 安装成功且版本号大于等于 24:

node -v

然后我们对以下命令一条条地先输入再回车, 来改变执行策略、配置国内镜像源和安装 pnpm:

改变 powershell 执行策略#
set-executionpolicy remotesigned
配置 npm 国内镜像源#
npm config set registry https://registry.npmmirror.com/
安装 pnpm#
npm install -g pnpm
配置 pnpm 国内镜像源#
pnpm config set registry https://registry.npmmirror.com/
../../../../_images/%E5%AE%89%E8%A3%85pnpm.png

安装和配置 VSCode#

提示

如果已经安装了谷歌基于 VSCode 改动的 Antigravity, 你可以通过Ctrl-Shift-P 打开命令菜单, 输入 profiles new profile 切出配置文件窗口, 然后跳到导入配置文件一步配置; 但它界面差异比较大, 可能有的步骤做起来和我在这里写的不一样.

安装#

请通过 VSCode 官网 下载 VSCode 安装包:

../../../../_images/vscode%E5%AE%98%E7%BD%91.png

下载好安装包后, 双击安装包, 勾选我同意此协议, 然后一步步点击下一步安装即可.

导入配置文件#

让我们右键 VSCode 以管理员身份运行它. (以后也要记得以管理员身份运行它.)

接下来, 请下载 VSCode 配置文件. 其中有我由网上已有配置文件改动来的, 酒馆助手编写教程所需的所有 VSCode 配置, 我们将会导入它来配置 VSCode 自动保存文件、保存时格式化文件、安装扩展等许多功能.

要导入配置文件, 我们首先从左下角齿轮 ‣ Profiles 打开配置文件页面:

../../../../_images/%E6%89%93%E5%BC%80%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E9%A1%B5%E9%9D%A2.png

然后点击 New Profiles 旁的下三角 ‣ Import Profile..., 再点击 Select File... 来选择配置文件以导入:

../../../../_images/%E5%AF%BC%E5%85%A5%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6.png

在选择配置文件后, 我们点击 Create 来导入它, 在弹出的窗口中选择 Trust Publishers & Install 然后等待 VSCode 导入完成.

../../../../_images/%E7%A1%AE%E8%AE%A4%E5%AF%BC%E5%85%A5%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6.png

在导入完成后, 我们选择 sillytavern 配置文件, 勾选默认使用该配置文件, 再启用它.

../../../../_images/%E9%BB%98%E8%AE%A4%E4%BD%BF%E7%94%A8%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6.png

此时, VSCode 左下角的齿轮将会显示 SI 字样; 以后遇到齿轮没有显示 SI 字样时, 也请注意通过左下角齿轮 ‣ Profiles 进行切换.

切换中文#

在导入完成后, 我们从侧边栏点击 Extensions 再搜索 Chinese 来安装中文插件.

../../../../_images/%E5%AE%89%E8%A3%85%E4%B8%AD%E6%96%87%E6%8F%92%E4%BB%B6.png

当然也许你已经安装中文插件, 则中文插件右下角会显示齿轮 而不是 Install, 就不用再点击安装了.

../../../../_images/%E5%B7%B2%E7%BB%8F%E5%AE%89%E8%A3%85%E4%B8%AD%E6%96%87%E6%8F%92%E4%BB%B6.png

安装完毕后, 我们通过Ctrl-Shift-P 打开命令菜单, 输入 configure display language 并回车, 然后选择 中文(简体) (zh-cn) 来切换成中文.

打开模板文件夹#

实时编写前端界面或脚本依赖于我做好的项目模板, 我们打开 StageDog/tavern_helper_template, 点击 Code ‣ Download ZIP 来下载它:

../../../../_images/%E4%B8%8B%E8%BD%BD%E6%A8%A1%E6%9D%BF%E6%96%87%E4%BB%B6.png

提示

如果你有代码和 Git 版本管理经验, 也可以 fork 本仓库或从网页右上角的 Use this template 按钮来创建一个新仓库, 并按照仓库 README 说明进行配置.
这将为你带来仓库 README 说明中所说的很多方便功能.

下载完成后, 我们以管理员身份运行 bandizip 选择智能解压它 (别的解压软件我没试过, 可能会有问题), 按自己的意愿重命名文件夹, 然后通过 VSCode 左上角的文件 ‣ 打开文件夹...来打开它:

../../../../_images/%E6%89%93%E5%BC%80%E6%96%87%E4%BB%B6%E5%A4%B9.png

如果你没有使用 bandizip, 请至少以管理员身份运行解压软件来解压文件, 但即便这样也可能解压存在问题. 具体地, 我们从 VSCode 里点击左侧 .mcp.json 文件, 如果只显示了一行文字, 其中包含 cursor/mcp.json, 那就是有问题的.

介绍 VSCode 界面#

VSCode 界面的总体情况如下所示. 如果哪一部分没有显示, 你可以点击右上角的三个按钮来展开显示它.

../../../../_images/vscode%E7%95%8C%E9%9D%A2%E4%BB%8B%E7%BB%8D.png

安装代码依赖#

根据 VSCode 界面, 我们展开终端, 然后输入以下命令来安装代码依赖:

pnpm install
../../../../_images/%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96%E5%AE%8C%E6%88%90.png

在安装完成后, 我们将会在项目根目录看到名为 node_modules 的文件夹, 这个文件夹中就是我们刚刚通过 pnpm install 安装的第三方库.

安装字体#

为了让代码更易阅读, 建议你寻找中英文的等宽字体安装并自行配置给 VSCode.

安装 AI 编程助手#

VSCode 自带的编程助手并不好用, 接下来我们来安装 Claude Code 插件作为编程助手: 在 VSCode 侧边栏的扩展中搜索 Claude Code 即可找到安装.

安装好后, VSCode 左边侧边栏会多出 选项:

../../../../_images/%E6%89%93%E5%BC%80claudecode.png

你可以下载 CC Mate、CC Switch 之类的工具来为 Claude Code 配置自定义 API, 配置好后重启 VSCode 即可使用. 网上有很多这类教程, 这里不再展开.

其他 AI 编程助手#

你也可以尝试其他 AI 编程助手. 它们有的以 VSCode 插件的形式发布, 你可以在 VSCode 侧边栏的扩展中搜索安装, 有的是单独的命令行软件.

本教程所提供的模板除了项目本身的配置外, 也为 VSCode 一些编程助手设置了:

  • 规则: 相当于添加了一个全局世界书, 里面我为项目结构、酒馆助手、前端界面、脚本、MVU 等进行了说明

  • MCP: 为编程助手添加额外工具, 例如允许编程助手直接查看酒馆网页

因此, 如果你需要使用其他编程助手, 除了编程助手本身的配置外还需要按照以下说明对它们也配置规则和 MCP.

Claude Code (推荐)

Anthropic 的编程助手, 也可以接入自定义 API, 方法自行搜索.
你还可以执行一句 npx claude-plugins skills install @anthropics/claude-code/frontend-design 为 Claude Code 全局添加官方提供的前端设计提示词.
规则: 已经配置在了 CLAUDE.md 中, AI 会自动读取
MCP: 已经配置在了 .mcp.json 中, AI 会自动读取

Codex (推荐)

OpenAI 的编程助手, 也可以接入自定义 API, 方法自行搜索.
规则: 已经配置在了 AGENTS.md 中, AI 会自动读取
MCP: 从 codex 界面的设置按钮里打开 mcp 配置文件, 填入以下内容:

Windows#
[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "pnpx",
    "chrome-devtools-mcp@latest",
    "--autoConnect",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000
MacOS、Linux#
[mcp_servers.chrome-devtools]
command = "pnpx"
args = ["chrome-devtools-mcp@latest", "--autoConnect"]
startup_timeout_ms = 20_000
Augment

很强, 但越来越难白嫖了
规则: 已经配置在了 .augment/rules 中, AI 会自动读取
MCP: 按照 .cursor/mcp.json 自行配置

Cline

无中文, 支持自定义 API
规则: 已经配置在了 .clinerules 中, AI 会自动读取
MCP: 按照 .cursor/mcp.json 自行配置

RooCode

有中文, 改自 Cline, 支持自定义 API, 比 Cline 省 token
规则: 已经配置在了 .roo/rules 中, AI 会自动读取
MCP: 已经配置在了 .roo/mcp.json 中, AI 会自动读取

Kilo Code

有中文, 改自 RooCode, 支持自定义 API, 据说更好
规则: 已经配置在了 .kilocode/rules 中, AI 会自动读取
MCP: 已经配置在了 .kilocode/mcp.json 中, AI 会自动读取

Gemini CLI

谷歌的编程助手, emmm你真的要拿 gemini 做前端界面吗? 配置可以参考司马咩咩的用 GEMINI CLI 写卡教程
规则: 已经配置在了 GEMINI.md 中, AI 会自动读取
MCP: 按照 .cursor/mcp.json 自行配置到 .gemini/settings.json 里

其他编程助手

规则: 按照 .cursor/rules 自行配置
MCP: 按照 .cursor/mcp.json 自行配置