本指南面向 TypeScript 和 JavaScript 开发者，介绍如何在 Kiro 中提升前后端项目的开发效率。内容涵盖 Node.js/TypeScript 环境准备、ESLint/Prettier 等扩展推荐、通过对话完成项目配置与代码重构的提示词示例，以及用 steering 文件传递 React 组件规范、状态管理约定和 TypeScript 类型实践。此外还介绍了测试生成、ESLint 自动修复等 hooks 自动化示例，以及 AWS Labs Frontend MCP Server 的集成方法。

Kiro 为 TypeScript 和 JavaScript 项目提供强大的 AI 辅助能力，帮助你更高效地编写、调试和维护代码。

环境准备

开始 TypeScript/JavaScript 开发前，请确认以下依赖已就绪：

• Node.js：安装最新 LTS 版本
• TypeScript：全局安装或作为项目 devDependency
• 包管理器：npm（随 Node.js 一起安装）或你偏好的 pnpm/yarn/bun
• Git：版本控制

推荐扩展

Kiro 兼容 Open VSX 扩展市场，以下扩展可显著提升 TypeScript/JavaScript 开发体验：

扩展	说明
ESLint	实时代码质量反馈与 JS/TS linting
Prettier	自动代码格式化，统一项目风格
Auto Rename Tag	编辑 HTML/JSX 标签时自动重命名配对标签
JavaScript (ES6) snippets	现代 JavaScript/TypeScript 常用代码片段

让 Kiro 帮你搭建开发环境

项目配置与结构

Kiro 可以帮你创建和维护 TypeScript/JavaScript 项目的配置文件：

"Create a tsconfig.json for a React TypeScript project using ES6 modules"
"Update my ESLint config to enforce React best practices"
"Set up a monorepo structure for my frontend and backend TypeScript code"

代码分析与重构

Kiro 可以检查代码质量、辅助重构，还能为现有 JavaScript 代码推断 TypeScript 类型：

"Analyze this function for potential bugs"
"Refactor this code to use async/await instead of promises"
"Convert this JavaScript file to TypeScript with proper types"

调试辅助

遇到报错时，直接描述问题或粘贴错误信息：

"Explain this TypeScript error: TS2339: Property 'value' does not exist on type 'never'"
"Help me debug this React useEffect infinite loop"

Steering 文件配置

Steering 允许你把项目上下文和规范传递给 Kiro。Kiro 可自动生成三个基础文件：

1. product.md — 产品目标与核心功能
2. tech.md — 技术栈与开发规范
3. structure.md — 项目目录结构说明

创建自定义 steering 文件

1. 在侧边栏打开 Kiro 视图
2. 在 "Agent Steering" 区域点击 + 按钮
3. 输入文件名（描述性标题）
4. 按 Markdown 格式填写内容

自定义 steering 文件存储在 .kiro/steering/ 目录，Kiro 会在每次交互时自动读取。

TypeScript/JavaScript 通用规范 steering 示例

创建 js-conventions.md：

# TypeScript/JavaScript Conventions

## Naming Conventions
- Use camelCase for variables and functions
- Use PascalCase for classes and React components
- Use UPPER_SNAKE_CASE for constants

## File Structure
- One component per file
- Group related components in folders
- Use index.ts files for exports

## TypeScript Practices
- Prefer interfaces over types for public APIs
- Use explicit return types for exported functions
- Avoid using 'any' type

React 专项 steering 示例

创建 react-patterns.md：

# React Development Guidelines

## Component Structure
- Use functional components with hooks
- Separate business logic from UI components
- Follow the container/presentational pattern

## State Management
- Use React Context for global state
- Prefer useState for local component state
- Use useReducer for complex state logic

## Performance Optimization
- Memoize expensive calculations with useMemo
- Prevent unnecessary re-renders with React.memo
- Use useCallback for event handlers passed to child components

Agent Hooks 自动化

Kiro 的 agent hooks 可以自动化常见 TypeScript/JavaScript 开发任务：

自动生成测试

保存文件时自动生成 Jest 测试：

"Create a hook that generates Jest tests when I save a new component"

TypeScript 类型检查

后台自动运行类型检查：

"Set up a hook to run TypeScript type checking when I save files"

依赖版本检查

检查 npm 包是否过期：

"Create a hook that checks for outdated npm packages"

ESLint 自动修复

When a JavaScript or TypeScript file is saved:
1. Run ESLint with auto-fix on the file
2. Report any remaining issues that couldn't be fixed automatically
3. Suggest fixes for complex issues

组件文档自动生成

When a React component file is saved:
1. Extract the component's props interface
2. Update or create a documentation comment above the component
3. Generate usage examples based on the props
4. Update the component's README.md if it exists

MCP 服务器集成

Kiro 支持 Model Context Protocol (MCP) 服务器，为 TypeScript/JavaScript 开发提供额外工具能力。完整配置说明参见 MCP 文档。

AWS Labs Frontend MCP Server

为现代 Web 应用开发提供专项工具，包含 React 应用的最佳实践文档和调试指导：

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

示例用法：

"Get essential knowledge for React development"
"Help me troubleshoot this React component issue"
"Show me best practices for modern React applications"

更多 MCP 服务器可参考 AWS MCP Servers 和 Awesome MCP Servers。

内置文档引用（#docs）

Kiro 提供 #docs 快捷指令，可在对话中直接引用官方文档：

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

示例用法：

"#TypeScript How do I create a generic function?"
"#React What's the best way to handle form state?"
"#URL https://react.dev/reference/react/useState"

快捷调试方式

操作	快捷键	说明
Inline Chat	Cmd/Ctrl + I	针对当前代码提问或请求修复
Add to Chat	Cmd/Ctrl + L	将整个文件加入对话，进行全文分析
Quick Fix	悬停错误 → Quick fix → Ask Kiro	自动把报错代码加入对话并开始调试

参考资源

• TypeScript 官方文档
• JavaScript MDN Web Docs
• Node.js 文档

常见问题

Q：Kiro 能把我的 JavaScript 项目迁移到 TypeScript 吗？

可以。用 Cmd/Ctrl + L 把文件加入对话，然后输入 "Convert this JavaScript file to TypeScript with proper types"。对于大型项目，建议分文件逐步迁移，Kiro 会根据运行时使用方式推断合适的类型。

Q：steering 文件里应该写 ESLint 规则吗？

不建议。ESLint 规则由 .eslintrc 文件定义并自动执行，无需写进 steering 文件。steering 文件应聚焦于 Kiro 无法从配置文件中感知的内容：组件设计原则、状态管理策略、文件组织约定等。

Q：#docs 引用和直接问 Kiro 有什么区别？

#docs 会将指定框架的官方文档内容直接注入对话上下文，确保 Kiro 基于最新文档回答，而不是依赖训练数据中可能过时的知识。对于 API 细节或新版本特性，优先使用 #docs。