如何快速无缝的从 vscode 转向AI编辑器 cursor、kiro、trae 等

    正在检查是否收录...

如果你之前经常使用 vscode 的话,这篇文章会帮助你开始使用 AI 编辑器 kiro、cursor、trae 等,因为后者的配置和插件等都和 vscode 是共通的。甚至 kiro、cursor 等都是基于开源 vscode 的变种开发而来。

如果你是第一次使用类似 vscode 的编辑器,这篇文章也会帮到你,更快了解如何去安装插件和修改配置。

以下教程都是以 kiro 为例,其他编辑器类似

插件安装

如何快速无缝的从 vscode 转向AI编辑器 cursor、kiro、trae 等

如图,1 即插件商店入口,在 2 所在的位置输入插件名称即可搜索。第一次使用这类编辑器的同学,可以安装中文插件 3,搜索 Chinese 后选择安装。如果你和我一样主攻前端的话,上图中是我建议的插件,直接搜索安装即可。

配置修改

修改配置两种方式,一种是可视化界面修改,如图 1 处,一种是直接修改配置文件(json 文件),如图 2,使用快捷键 shift + command + p 打开

如何快速无缝的从 vscode 转向AI编辑器 cursor、kiro、trae 等

这里建议直接第二种方式,更快速。

如果你之前有使用 vscode 的话,直接打开 vscode 的配置文件,复制过来即可。首次使用的话,可以参考我的配置

{ "workbench.colorTheme": "Atom One Dark", "workbench.startupEditor": "none", "workbench.iconTheme": "material-icon-theme", "material-icon-theme.activeIconPack": "vue", "git.autofetch": true, "git.enableSmartCommit": true, "git.confirmSync": false, "git.ignoreMissingGitWarning": true, "git.openRepositoryInParentFolders": "never", "editor.tabSize": 2, "editor.fontFamily": "FiraCode Nerd Font, Consolas, 'Courier New', monospace", "editor.fontSize": 12, "editor.formatOnSaveMode": "modificationsIfAvailable", "editor.defaultFormatter": "esbenp.prettier-vscode", "javascript.format.semicolons": "remove", // 定义如何处理可选分号。 // - ignore: 不要插入或删除任何分号。 // - insert: 在语句末尾插入分号。 // - remove: 删除不必要的分号。 "javascript.updateImportsOnFileMove.enabled": "always", "typescript.updateImportsOnFileMove.enabled": "always", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "vscode.css-language-features" // "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[scss]": { "editor.defaultFormatter": "vscode.css-language-features" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "vscode.json-language-features" }, "security.workspace.trust.untrustedFiles": "open", "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[markdown]": { "editor.quickSuggestions": { "comments": "on", "strings": "on", "other": "on" }, "diffEditor.ignoreTrimWhitespace": false }, "prettier.bracketSameLine": true, "prettier.jsxSingleQuote": true, "prettier.semi": false, "prettier.singleQuote": true, "prettier.trailingComma": "none", "prettier.printWidth": 160, "html.format.wrapLineLength": 500, "html.format.wrapAttributes": "preserve-aligned", "files.associations": { "manifest.json": "jsonc", "pages.json": "jsonc" }, "explorer.confirmDelete": false, "diffEditor.ignoreTrimWhitespace": false, "stylelint.packageManager": "pnpm", "terminal.integrated.env.windows": {}, "extensions.ignoreRecommendations": true, "kiroAgent.agentModelSelection": "CLAUDE_SONNET_4_20250514_V1_0", "kiroAgent.trustedCommands": [ "pnpm type-check", "pnpm build", "pnpm lint", "find . -name \"*.d.ts\" -not -path \"./node_modules/*\" -not -path \"./types/*\"", "pnpm dev", "npm run build", "npm run dev", "pnpm run build", "pnpm run dev" ], } 

其中部分配置是需要插件支持的,比如主题 Atom One Dark,比如格式化插件 prettier

其他

两种模式

如何快速无缝的从 vscode 转向AI编辑器 cursor、kiro、trae 等

kiro 有两种模式(图中 1 处):vibe 和 spec。

vibe 模式基本和 cursor 差不多,变下达指令边修改,遇到问题可以中止,提出并让他修复

spec 模式是一种全新的模式,它是从需求分析开始,帮你对需求进行整理分析,生成需求文档,然后再设计产品,最后还有任务计划文档,最后再开始执行。spec 模式尝试一种更拟人化的开发模式,对于全栈开发应该有很大的帮助

kiro 对话的快捷键如图中 1 处

命令执行

首次使用 kiro,遇到命令执行,它会等待你的授权,需要手动允许。不过你也可以把类似的命令加入信任列表,之后它就会自动执行了。

如何快速无缝的从 vscode 转向AI编辑器 cursor、kiro、trae 等

如上图中 2 处,在设置里搜索 kiroAgent.trustedCommands 后,可以直接添加命令的信任列表

如上图中 1 处,点击 Run 直接执行,点击 Trust 后出现下图,需要继续点击,手动选择是信任 此命令的完全形式还是同类型的,点击后才会开始执行。

如何快速无缝的从 vscode 转向AI编辑器 cursor、kiro、trae 等

评论

昵称
邮箱
主页