如何使用 Kiro（TypeScript/JavaScript）

Kiro 为 TypeScript 和 JavaScript 项目提供强大的 AI 辅助开发功能，帮助您更高效地编写、调试和维护代码。 How to Use Kiro (TypeScript/JavaScript)

前置条件

在开始使用 Kiro 进行 TypeScript 和 JavaScript 开发之前，请确保您已安装：

Node.js：为您的平台安装最新版本
TypeScript：全局安装或在项目中本地安装
包管理器：npm（随 Node.js 一起提供）或您首选的包管理器
Git：用于版本控制和协作

建议的扩展

为了增强您使用 Kiro 进行 TypeScript 和 JavaScript 开发的体验，请考虑安装这些有用的扩展：

ESLint - 为 JavaScript/TypeScript 提供实时代码质量反馈和检查
Prettier - Code Formatter - 自动代码格式化，确保项目代码风格一致
Auto Rename Tag - 编辑时自动重命名配对的 HTML/JSX 标签
JavaScript (ES6) code snippets - 为现代 JavaScript 和 TypeScript 开发提供有用的代码片段

使用您的环境

项目配置和结构

Kiro 可以帮助您设置和维护 TypeScript 和 JavaScript 项目的配置文件，以及按照 Kiro 的最佳实践组织您的项目。

例如，您可以询问 Kiro：

"为使用 ES6 模块的 React TypeScript 项目创建 tsconfig.json"
"更新我的 ESLint 配置以强制执行 React 最佳实践"
"为我的前端和后端 TypeScript 代码设置 monorepo 结构"

代码分析和重构

Kiro 可以分析您的 TypeScript 和 JavaScript 代码，识别问题并建议改进：

代码质量分析：让 Kiro 审查您的代码，查找潜在的错误、性能问题或风格问题。
重构辅助：获得提取函数、重命名变量或重构代码的帮助。
类型推断：Kiro 可以基于您的 JavaScript 代码建议 TypeScript 类型。

示例提示：

"分析这个函数的潜在错误"
"重构这段代码，使用 async/await 替代 promises"
"将这个 JavaScript 文件转换为带有正确类型的 TypeScript"

调试辅助

当您在 TypeScript 或 JavaScript 代码中遇到错误时：

错误解释：Kiro 可以用简单的语言解释复杂的错误信息
解决方案建议：Kiro 可以为常见错误建议可操作的修复方案
运行时调试：Kiro 可以帮助设置调试配置

示例：

"解释这个 TypeScript 错误：TS2339: Property 'value' does not exist on type 'never'"
"帮我调试这个 React useEffect 无限循环问题"

引导（Steering）

引导功能允许您为 Kiro 提供项目特定的上下文和指导原则。Kiro 可以生成您可以完善的引导文件：

产品简介 (product.md) - 包含产品信息、目的和关键特性
技术栈 (tech.md) - 详细说明技术、框架和开发指南
项目结构 (structure.md) - 提供项目组织方式的信息

对于 TypeScript 和 JavaScript 项目，您可以创建额外的自定义引导文件来提供更具体的指导。

创建自定义引导文件

使用以下说明向您的项目添加新的引导文档。

添加新的引导文档：

导航到侧边栏中的 Kiro 视图。
在 Agent Steering 部分，选择 + 按钮创建新的引导文件。
为您的文件输入一个描述性标题的名称。
按照 markdown 约定添加您的自定义引导内容。

自定义引导文件存储在 .kiro/steering/ 目录中，并在交互过程中被 Kiro 自动识别。

代码风格和约定

您可以为您的项目定义自定义命名约定、文件结构或实践。

您可以创建一个 js-conventions.md 引导文件来定义您团队的编码标准：

markdown

# TypeScript/JavaScript 约定

## 命名约定
- 变量和函数使用 camelCase
- 类和 React 组件使用 PascalCase
- 常量使用 UPPER_SNAKE_CASE

## 文件结构
- 每个文件一个组件
- 在文件夹中分组相关组件
- 使用 index.ts 文件进行导出

## TypeScript 实践
- 公共 API 优先使用 interfaces 而非 types
- 导出函数使用显式返回类型
- 避免使用 'any' 类型

框架特定指南

对于 React 项目，您可以创建一个 react-patterns.md 引导文件：

markdown

# React 开发指南

## 组件结构
- 使用带有 hooks 的函数组件
- 将业务逻辑与 UI 组件分离
- 遵循容器/展示组件模式

## 状态管理
- 使用 React Context 管理全局状态
- 本地组件状态优先使用 useState
- 复杂状态逻辑使用 useReducer

## 性能优化
- 使用 useMemo 缓存昂贵的计算
- 使用 React.memo 防止不必要的重新渲染
- 为传递给子组件的事件处理器使用 useCallback

这些引导文件帮助 Kiro 生成遵循您团队特定约定和最佳实践的代码。

Agent Hooks

Kiro 的 Agent Hooks 可以自动化常见的 TypeScript 和 JavaScript 开发任务：

导航到 Kiro 面板中的 Agent Hooks 部分
点击 + 按钮创建新的 hook
用自然语言定义 hook 工作流程

以下是一些 hook 示例：

测试生成 Hook

您可以在保存 TypeScript 或 JavaScript 文件时自动生成测试：

"创建一个 hook，当我保存新组件时生成 Jest 测试"

类型检查 Hook

您可以在后台运行 TypeScript 类型检查：

"设置一个 hook，在我保存文件时运行 TypeScript 类型检查"

依赖更新 Hook

您可以保持依赖项的最新状态：

"创建一个 hook 来检查过时的 npm 包"

ESLint 自动修复 Hook

当保存 JavaScript 或 TypeScript 文件时：

对文件运行 ESLint 自动修复
报告任何无法自动修复的剩余问题
为复杂问题建议修复方案

组件文档 Hook

当保存 React 组件文件时：

提取组件的 props 接口
在组件上方更新或创建文档注释
基于 props 生成使用示例
如果存在，更新组件的 README.md

MCP 服务器

Kiro 对模型上下文协议（MCP）服务器的支持通过提供专业化工具和功能来增强您的 TypeScript 和 JavaScript 开发体验。有关设置和使用 MCP 的完整指南，请参阅 MCP 文档。

Frontend MCP 服务器

AWS Labs Frontend MCP 服务器为现代 Web 应用程序开发提供专业化工具，为 React 应用程序提供全面的文档和指导：

json

{
  "mcpServers": {
    "frontend": {
      "command": "uvx",
      "args": ["awslabs.frontend-mcp-server@latest"],
      "env": {
        "FASTMCP_LOG_LEVEL": "ERROR"
      }
    }
  }
}

使用示例：

"获取 React 开发的基本知识"
"帮我解决这个 React 组件问题"
"展示现代 React 应用程序的最佳实践"

在 AWS MCP Servers 和 Awesome MCP Servers 集合中探索更多 MCP 服务器。

使用 #docs 访问文档

Kiro 通过 #docs 引用系统提供对 JavaScript、TypeScript 和流行框架文档的内置访问。这允许您快速将相关文档带入与 Kiro 的对话中。只需在聊天中输入 #docs 并从可用的文档源中选择，例如：

#Node.js - Node.js 运行时文档
#TypeScript - TypeScript 语言文档
#React - React 库文档
#Svelte - Svelte 框架文档
#Express - Express.js 框架文档
#Vue.js - Vue.js 框架文档
#Alpine.js - Alpine.js 框架文档

使用示例：

"#TypeScript 如何创建泛型函数？"
"#React 处理表单状态的最佳方式是什么？"

您也可以使用 #URL 引用特定的文档 URL：

"#URL https://react.dev/reference/react/useState"

调试问题

当您遇到问题时，Kiro 可以帮助诊断和修复：

内联聊天：
- 输入 Cmd/Ctrl + I 打开内联聊天。
- 用自然语言让 Kiro 帮助调试您的代码。
添加到聊天：
- 输入 Cmd/Ctrl + L 将当前文件添加到聊天中。
- 用自然语言让 Kiro 帮助调试您的代码。
快速修复：
- 悬停在错误或警告上，然后选择 Quick fix 和 Ask Kiro。
- Kiro 将自动将代码添加到聊天中并开始调试。

如何使用 Kiro（TypeScript/JavaScript） ​

前置条件 ​

建议的扩展 ​

使用您的环境 ​

项目配置和结构 ​

代码分析和重构 ​

调试辅助 ​

引导（Steering） ​

创建自定义引导文件 ​

代码风格和约定 ​

框架特定指南 ​

Agent Hooks ​

测试生成 Hook ​

类型检查 Hook ​

依赖更新 Hook ​

ESLint 自动修复 Hook ​

组件文档 Hook ​

MCP 服务器 ​

Frontend MCP 服务器 ​

使用 #docs 访问文档 ​

调试问题 ​

资源 ​