【Kiro】语言支持-JS

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

先决条件

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

• Node.js：安装适合您平台的最新版本

• TypeScript：在项目中全局或本地安装

• 包管理器：npm（Node.js 附带）或您喜欢的包管理器

• Git：用于版本控制和协作

建议的扩展

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

• ESLint - JavaScript/TypeScript 的实时代码质量反馈和 linting

• Prettier - 代码格式化程序- 自动代码格式化，以确保整个项目的风格一致

• 自动重命名标签- 编辑时自动重命名配对的 HTML/JSX 标签

• JavaScript（ES6）代码片段- 为现代 JavaScript 和 TypeScript 开发提供有用的代码片段

与您的环境协作

项目配置和结构

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

例如，你可以问 Kiro：

"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 可以分析您的 TypeScript 和 JavaScript 代码以识别问题并提出改进建议：

• 代码质量分析：要求 Kiro 检查您的代码是否存在潜在的错误、性能问题或风格问题。

• 重构帮助：获取提取函数、重命名变量或重构代码的帮助。

• 类型推断：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"

调试协助

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

• 错误解释：Kiro 可以用简单的语言解释隐秘的错误信息

• 解决方案建议：Kiro 可以针对常见错误提出可行的修复建议

• 运行时调试：Kiro 可以帮助设置调试配置

例子：

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

引导配置

Steering(引导配置)允许您向 Kiro 提供项目特定的背景信息和指南。Kiro 可以生成您可以进行优化的指导文件：

1. 产品简介（product.md）- 包含有关产品、其用途和主要功能的信息

2. 技术栈（tech.md）- 详细介绍技术、框架和开发指南

3. 项目结构（structure.md）- 提供有关项目组织方式的信息

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

创建自定义指导文件

使用以下说明将新的指导文件添加到您的项目中。

添加新的指导文件

1. 导航到侧边栏中的Kiro视图。

2. 在代理指导部分，选择+按钮来创建一个新的指导文件。

3. 输入文件的名称以及描述性标题。

4. 按照 markdown 约定添加您的自定义指导内容。

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

代码风格和约定

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

您可以创建一个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 项目，您可以创建一个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

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

代理钩子

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

1. 导航到Kiro 面板中的Agent Hooks部分

2. 单击+按钮创建一个新的钩子

3. 用自然语言定义钩子工作流程

以下是一些钩子示例：

测试生成钩子

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

"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"

依赖更新钩子

您可以保持依赖项为最新：

"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 支持模型上下文协议 (MCP) 服务器，通过提供专用工具和功能增强您的 TypeScript 和 JavaScript 开发体验。有关设置和使用 MCP 的完整指南，请参阅MCP 文档。

前端 MCP 服务器

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

json

{
  "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"

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

使用#docs访问文档

Kiro 通过参考系统内置了 JavaScript、TypeScript 和热门框架的文档访问功能#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 #URL：

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

调试问题

当您遇到问题时，Kiro 可以帮助诊断并解决问题：

1. 在线聊天：

   • 输入Cmd/Ctrl + I以打开在线聊天。

   • 要求 Kiro 帮助使用自然语言调试您的代码。

2. 添加到聊天：

   • 键入Cmd/Ctrl + L以将当前文件添加到聊天中。

   • 要求 Kiro 帮助使用自然语言调试您的代码。

3. 快速修复：

   • 将鼠标悬停在错误或警告上，然后选择Quick fix和Ask Kiro。

   • Kiro 会自动将代码添加到聊天中并开始调试。

资源

• TypeScript 文档

• JavaScript MDN Web 文档

• Node.js 文档