环境准备

环境准备#

安装 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 安装成功且版本号大于等于 22:

node -v
../../../../_images/%E7%A1%AE%E8%AE%A4nodejs%E7%89%88%E6%9C%AC%E5%8F%B7.png

然后我们对以下命令一条条地先输入再回车, 来改变执行策略、配置国内镜像源和安装 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

安装和配置 Cursor#

安装#

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

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

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

初次打开 Cursor#

首次运行时, Cursor 将要求你登录一个账号, 请自行注册并登录 Cursor 账号.

../../../../_images/%E5%88%9D%E6%AC%A1%E6%89%93%E5%BC%80cursor.png

然后一直点击继续, 勾选 I'm fine with Cursor learning from my code or I'll turn it off in Settings (是的, 神人软件先强制你同意数据共享, 如果不愿意再之后自己去设置里取消.), 最后选择 AI 回复语言为中文, 即可进入 Cursor 主界面.

../../../../_images/%E9%80%89%E6%8B%A9ai%E5%9B%9E%E5%A4%8D%E8%AF%AD%E8%A8%80.png

设置侧边栏#

进入主界面后, 通过 Ctrl-Shift+P 打开命令菜单, 输入 open vscode settings 以找到 Open VSCode Settings, 从而打开 VSCode 设置面板, 搜索 orientation, 然后将搜索到的选项从 horizontal 改为 vertical:

../../../../_images/%E8%AE%BE%E7%BD%AE%E4%BE%A7%E8%BE%B9%E6%A0%8F.png

在设置后, 将会弹窗提示我们重启 Cursor, 点击 Restart 即可.

导入配置文件#

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

要导入配置文件, 我们首先从左下角齿轮 ‣ 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 然后等待 Cursor 导入完成.

../../../../_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

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

切换中文#

在导入完成后, 我们从侧边栏点击 Extensions 再搜索 Chinese 来安装中文插件. 安装完毕后再重启 Cursor, 则会发现 Cursor 变成了中文.

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

打开模板文件夹#

实时编写前端界面或脚本依赖于我做好的项目模板, 我们打开 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 版本管理经验, 也可以从网页右上角的 Use this template 按钮来创建一个新仓库. 这将为你带来仓库说明中所说的方便功能.

下载完成后, 我们解压它, 按自己的意愿重命名文件夹, 然后通过 Cursor 左上角的文件 ‣ 打开文件夹...来打开它:

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

介绍 Cursor 界面#

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

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

禁用 Cursor 的数据共享#

根据上图的简单介绍, 我们应该从 右上角齿轮 来调整 Cursor 的特殊设置.

在此我们先关闭 Cursor 强制我们开启的数据共享:

../../../../_images/%E5%85%B3%E9%97%AD%E6%95%B0%E6%8D%AE%E5%85%B1%E4%BA%AB.png

其他 AI 编程助手#

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

Augment

据说很强, 但越来越难白嫖了

Cline

支持自定义 API

RooCode

支持自定义 API, 比 Cline 省 token

Claude Code

据说很好用, 你可以用 Claude Code Router 接入自定义 API, 然而它是全英文且是终端用户图形界面, 门槛较高.

安装字体#

为了让代码更易阅读, 建议你安装以下代码字体:

  • JetBrains Mono

  • MesloLGS NF

  • 等距更纱黑体 SC