如果你之前經常使用 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 後出現下圖，需要繼續點擊，手動選擇是信任 此命令的完全形式還是同類型的，點擊後才會開始執行。