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

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

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

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

插件安装

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

配置修改

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

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

如果你之前有使用 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 等

其他

两种模式

kiro 有两种模式（图中 1 处）：vibe 和 spec。

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

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

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

命令执行

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

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

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