找回密码
 立即注册
首页 业界区 业界 如何快速无缝的从 vscode 转向AI编辑器 cursor、kiro、t ...

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

胁冉右 2025-9-26 11:39:40
如果你之前经常使用 vscode 的话,这篇文章会帮助你开始使用 AI 编辑器 kiro、cursor、trae 等,因为后者的配置和插件等都和 vscode 是共通的。甚至 kiro、cursor 等都是基于开源 vscode 的变种开发而来。
如果你是第一次使用类似 vscode 的编辑器,这篇文章也会帮到你,更快了解如何去安装插件和修改配置。
以下教程都是以 kiro 为例,其他编辑器类似
插件安装

1.png

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

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

这里建议直接第二种方式,更快速。
如果你之前有使用 vscode 的话,直接打开 vscode 的配置文件,复制过来即可。首次使用的话,可以参考我的配置
  1. {
  2.   "workbench.colorTheme": "Atom One Dark",
  3.   "workbench.startupEditor": "none",
  4.   "workbench.iconTheme": "material-icon-theme",
  5.   "material-icon-theme.activeIconPack": "vue",
  6.   "git.autofetch": true,
  7.   "git.enableSmartCommit": true,
  8.   "git.confirmSync": false,
  9.   "git.ignoreMissingGitWarning": true,
  10.   "git.openRepositoryInParentFolders": "never",
  11.   "editor.tabSize": 2,
  12.   "editor.fontFamily": "FiraCode Nerd Font, Consolas, 'Courier New', monospace",
  13.   "editor.fontSize": 12,
  14.   "editor.formatOnSaveMode": "modificationsIfAvailable",
  15.   "editor.defaultFormatter": "esbenp.prettier-vscode",
  16.   "javascript.format.semicolons": "remove",
  17.   // 定义如何处理可选分号。
  18.   //  - ignore: 不要插入或删除任何分号。
  19.   //  - insert: 在语句末尾插入分号。
  20.   //  - remove: 删除不必要的分号。
  21.   "javascript.updateImportsOnFileMove.enabled": "always",
  22.   "typescript.updateImportsOnFileMove.enabled": "always",
  23.   "[javascript]": {
  24.     "editor.defaultFormatter": "esbenp.prettier-vscode"
  25.   },
  26.   "[css]": {
  27.     "editor.defaultFormatter": "vscode.css-language-features"
  28.     // "editor.defaultFormatter": "esbenp.prettier-vscode"
  29.   },
  30.   "[scss]": {
  31.     "editor.defaultFormatter": "vscode.css-language-features"
  32.   },
  33.   "[typescriptreact]": {
  34.     "editor.defaultFormatter": "esbenp.prettier-vscode"
  35.   },
  36.   "[typescript]": {
  37.     "editor.defaultFormatter": "esbenp.prettier-vscode"
  38.   },
  39.   "[jsonc]": {
  40.     "editor.defaultFormatter": "esbenp.prettier-vscode"
  41.   },
  42.   "[vue]": {
  43.     "editor.defaultFormatter": "esbenp.prettier-vscode"
  44.   },
  45.   "[json]": {
  46.     "editor.defaultFormatter": "vscode.json-language-features"
  47.   },
  48.   "security.workspace.trust.untrustedFiles": "open",
  49.   "[html]": {
  50.     "editor.defaultFormatter": "vscode.html-language-features"
  51.   },
  52.   "[less]": {
  53.     "editor.defaultFormatter": "esbenp.prettier-vscode"
  54.   },
  55.   "[markdown]": {
  56.     "editor.quickSuggestions": {
  57.       "comments": "on",
  58.       "strings": "on",
  59.       "other": "on"
  60.     },
  61.     "diffEditor.ignoreTrimWhitespace": false
  62.   },
  63.   "prettier.bracketSameLine": true,
  64.   "prettier.jsxSingleQuote": true,
  65.   "prettier.semi": false,
  66.   "prettier.singleQuote": true,
  67.   "prettier.trailingComma": "none",
  68.   "prettier.printWidth": 160,
  69.   "html.format.wrapLineLength": 500,
  70.   "html.format.wrapAttributes": "preserve-aligned",
  71.   "files.associations": {
  72.     "manifest.json": "jsonc",
  73.     "pages.json": "jsonc"
  74.   },
  75.   "explorer.confirmDelete": false,
  76.   "diffEditor.ignoreTrimWhitespace": false,
  77.   "stylelint.packageManager": "pnpm",
  78.   "terminal.integrated.env.windows": {},
  79.   "extensions.ignoreRecommendations": true,
  80.   "kiroAgent.agentModelSelection": "CLAUDE_SONNET_4_20250514_V1_0",
  81.   "kiroAgent.trustedCommands": [
  82.     "pnpm type-check",
  83.     "pnpm build",
  84.     "pnpm lint",
  85.     "find . -name "*.d.ts" -not -path "./node_modules/*" -not -path "./types/*"",
  86.     "pnpm dev",
  87.     "npm run build",
  88.     "npm run dev",
  89.     "pnpm run build",
  90.     "pnpm run dev"
  91.   ],
  92. }
复制代码
其中部分配置是需要插件支持的,比如主题 Atom One Dark,比如格式化插件 prettier 等
其他

两种模式

3.png

kiro 有两种模式(图中 1 处):vibe 和 spec。
vibe 模式基本和 cursor 差不多,变下达指令边修改,遇到问题可以中止,提出并让他修复
spec 模式是一种全新的模式,它是从需求分析开始,帮你对需求进行整理分析,生成需求文档,然后再设计产品,最后还有任务计划文档,最后再开始执行。spec 模式尝试一种更拟人化的开发模式,对于全栈开发应该有很大的帮助
kiro 对话的快捷键如图中 1 处
命令执行

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

如上图中 2 处,在设置里搜索 kiroAgent.trustedCommands 后,可以直接添加命令的信任列表
如上图中 1 处,点击 Run 直接执行,点击 Trust 后出现下图,需要继续点击,手动选择是信任 此命令的完全形式还是同类型的,点击后才会开始执行。
5.png


来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

相关推荐

您需要登录后才可以回帖 登录 | 立即注册