Back to Details

typescript-lsp

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

TypeScript LSP Skill

TypeScript LSP 技能

Purpose

用途

This skill provides TypeScript Language Server Protocol integration for exploring and understanding TypeScript/JavaScript codebases.
IMPORTANT: Prefer LSP tools over Grep/Glob when working with 
*.ts
, 
*.tsx
, 
*.js
, 
*.jsx
files. LSP provides type-aware results that understand imports, exports, and symbol relationships.
Use these tools to:
  • Explore codebases - Find symbols, understand module structure, discover implementations
  • Find references - Type-aware search across the entire codebase (better than grep for symbols)
  • Understand types - Get full type signatures, generics, and documentation
  • Verify before editing - Check all usages before modifying or deleting exports
  • Navigate code - Jump to definitions, find implementations
本技能提供TypeScript语言服务器协议（LSP）集成，用于探索和理解TypeScript/JavaScript代码库。
重要提示：处理
*.ts
、
*.tsx
、
*.js
、
*.jsx
文件时，优先使用LSP工具而非Grep/Glob。LSP可提供类型感知的结果，能理解导入、导出及符号间的关系。
使用这些工具可以：
  • 探索代码库 - 查找符号、理解模块结构、发现实现细节
  • 查找引用 - 在整个代码库中进行类型感知的搜索（比grep更适合符号搜索）
  • 理解类型 - 获取完整的类型签名、泛型及文档
  • 编辑前验证 - 修改或删除导出内容前，检查所有使用场景
  • 代码导航 - 跳转到定义、查找实现

When to Use Each Tool

各工具适用场景

ToolPurpose
GlobFind files by pattern
GrepSearch text content
lsp-findSearch TypeScript symbols
lsp-hoverGet type info + TSDoc documentation
lsp-refsFind all references to a symbol
lsp-analyzeBatch analysis of file structure
工具用途
Glob按模式查找文件
Grep搜索文本内容
lsp-find搜索TypeScript符号
lsp-hover获取类型信息 + TSDoc文档
lsp-refs查找符号的所有引用
lsp-analyze文件结构的批量分析

LSP vs Grep/Glob

LSP vs Grep/Glob

TaskUse LSPUse Grep/Glob
Find all usages of a function/type✅ 
lsp-refs
❌ Misses re-exports, aliases
Search for a symbol by name✅ 
lsp-find
❌ Matches strings, comments
Get type signature + TSDoc✅ 
lsp-hover
❌ Not possible
Understand file exports✅ 
lsp-analyze --exports
❌ Doesn't resolve re-exports
Find files by pattern❌✅ 
Glob
Search non-TS files (md, json)❌✅ 
Grep
Search for text in comments/strings❌✅ 
Grep
任务使用LSP使用Grep/Glob
查找函数/类型的所有使用场景✅ 
lsp-refs
❌ 会遗漏重导出、别名
按名称搜索符号✅ 
lsp-find
❌ 会匹配字符串、注释
获取类型签名 + TSDoc✅ 
lsp-hover
❌ 无法实现
理解文件导出内容✅ 
lsp-analyze --exports
❌ 无法解析重导出
按模式查找文件❌✅ 
Glob
搜索非TS文件（md、json）❌✅ 
Grep
搜索注释/字符串中的文本❌✅ 
Grep

When to Use

使用时机

Exploring code (prefer LSP):
  • Run 
    lsp-find
    to search for symbols across the workspace
  • Run 
    lsp-symbols
    to get an overview of file structure
  • Run 
    lsp-analyze --exports
    to see what a module provides
Before editing code:
  • Run 
    lsp-references
    to find all usages of a symbol you plan to modify
  • Run 
    lsp-hover
    to verify current type signatures
Before writing code:
  • Run 
    lsp-find
    to search for similar patterns or related symbols
  • Run 
    lsp-hover
    on APIs you plan to use
探索代码（优先使用LSP）：
  • 运行
    lsp-find
    在工作区中搜索符号
  • 运行
    lsp-symbols
    获取文件结构概览
  • 运行
    lsp-analyze --exports
    查看模块提供的内容
编辑代码前：
  • 运行
    lsp-references
    查找你计划修改的符号的所有使用场景
  • 运行
    lsp-hover
    验证当前的类型签名
编写代码前：
  • 运行
    lsp-find
    搜索类似模式或相关符号
  • 运行
    lsp-hover
    查看你计划使用的API

Path Resolution

路径解析

All scripts accept three types of file paths:
  • Absolute paths: 
    /Users/name/project/src/file.ts
  • Relative paths: 
    ./src/file.ts
    or 
    ../other/file.ts
  • Package export paths: 
    my-package/src/module.ts
    (resolved via 
    Bun.resolve()
    )
Package export paths are recommended for portability and consistency with the package's exports field.
所有脚本支持三种文件路径：
  • 绝对路径：
    /Users/name/project/src/file.ts
  • 相对路径：
    ./src/file.ts
    或 
    ../other/file.ts
  • 包导出路径：
    my-package/src/module.ts
    （通过
    Bun.resolve()
    解析）
推荐使用包导出路径，以保证可移植性，并与包的exports字段保持一致。

Scripts

脚本

Individual Scripts

独立脚本

lsp-hover

lsp-hover

Get type information at a specific position.
bash
bunx @plaited/development-skills lsp-hover <file> <line> <char>
Arguments:
  • file
    : Path to TypeScript/JavaScript file
  • line
    : Line number (0-indexed)
  • char
    : Character position (0-indexed)
Example:
bash
bunx @plaited/development-skills lsp-hover src/utils/parser.ts 42 10
获取指定位置的类型信息。
bash
bunx @plaited/development-skills lsp-hover <file> <line> <char>
参数：
  • file
    ：TypeScript/JavaScript文件路径
  • line
    ：行号（从0开始计数）
  • char
    ：字符位置（从0开始计数）
示例：
bash
bunx @plaited/development-skills lsp-hover src/utils/parser.ts 42 10

lsp-symbols

lsp-symbols

List all symbols in a file.
bash
bunx @plaited/development-skills lsp-symbols <file>
Example:
bash
bunx @plaited/development-skills lsp-symbols src/utils/parser.ts
列出文件中的所有符号。
bash
bunx @plaited/development-skills lsp-symbols <file>
示例：
bash
bunx @plaited/development-skills lsp-symbols src/utils/parser.ts

lsp-references

lsp-references

Find all references to a symbol.
bash
bunx @plaited/development-skills lsp-refs <file> <line> <char>
Example:
bash
bunx @plaited/development-skills lsp-refs src/utils/parser.ts 42 10
查找符号的所有引用。
bash
bunx @plaited/development-skills lsp-refs <file> <line> <char>
示例：
bash
bunx @plaited/development-skills lsp-refs src/utils/parser.ts 42 10

lsp-find

lsp-find

Search for symbols across the workspace.
bash
bunx @plaited/development-skills lsp-find <query> [context-file]
Arguments:
  • query
    : Symbol name or partial name
  • context-file
    : Optional file to open for project context
Example:
bash
bunx @plaited/development-skills lsp-find parseConfig
bunx @plaited/development-skills lsp-find validateInput src/lib/validator.ts
在工作区中搜索符号。
bash
bunx @plaited/development-skills lsp-find <query> [context-file]
参数：
  • query
    ：符号名称或部分名称
  • context-file
    ：可选，用于提供项目上下文的文件
示例：
bash
bunx @plaited/development-skills lsp-find parseConfig
bunx @plaited/development-skills lsp-find validateInput src/lib/validator.ts

Batch Script

批量脚本

lsp-analyze

lsp-analyze

Perform multiple analyses in a single session for efficiency.
bash
bunx @plaited/development-skills lsp-analyze <file> [options]
Options:
  • --symbols, -s
    : List all symbols
  • --exports, -e
    : List only exported symbols
  • --hover <line:char>
    : Get type info (repeatable)
  • --refs <line:char>
    : Find references (repeatable)
  • --all
    : Run symbols + exports analysis
Examples:
bash
undefined
在单个会话中执行多项分析，提升效率。
bash
bunx @plaited/development-skills lsp-analyze <file> [options]
选项：
  • --symbols, -s
    ：列出所有符号
  • --exports, -e
    ：仅列出导出的符号
  • --hover <line:char>
    ：获取类型信息（可重复使用）
  • --refs <line:char>
    ：查找引用（可重复使用）
  • --all
    ：运行符号+导出分析
示例：
bash
undefined

Get file overview

获取文件概览

bunx @plaited/development-skills lsp-analyze src/utils/parser.ts --all
bunx @plaited/development-skills lsp-analyze src/utils/parser.ts --all

Check multiple positions

检查多个位置

bunx @plaited/development-skills lsp-analyze src/utils/parser.ts --hover 50:10 --hover 75:5
bunx @plaited/development-skills lsp-analyze src/utils/parser.ts --hover 50:10 --hover 75:5

Before refactoring: find all references

重构前：查找所有引用

bunx @plaited/development-skills lsp-analyze src/utils/parser.ts --refs 42:10
undefined
bunx @plaited/development-skills lsp-analyze src/utils/parser.ts --refs 42:10
undefined

Common Workflows

常见工作流

Understanding a File

理解文件内容

bash
undefined
bash
undefined

1. Get exports overview

1. 获取导出内容概览

bunx @plaited/development-skills lsp-analyze path/to/file.ts --exports
bunx @plaited/development-skills lsp-analyze path/to/file.ts --exports

2. For specific type info, hover on interesting symbols

2. 针对感兴趣的符号，使用hover获取具体类型信息

bunx @plaited/development-skills lsp-hover path/to/file.ts <line> <char>
undefined
bunx @plaited/development-skills lsp-hover path/to/file.ts <line> <char>
undefined

Before Modifying an Export

修改导出内容前

bash
undefined
bash
undefined

1. Find all references first

1. 先查找所有引用

bunx @plaited/development-skills lsp-refs path/to/file.ts <line> <char>
bunx @plaited/development-skills lsp-refs path/to/file.ts <line> <char>

2. Check what depends on it

2. 检查依赖关系

Review the output to understand impact

查看输出内容以了解修改影响

undefined
undefined

Finding Patterns

查找模式

bash
undefined
bash
undefined

Search for similar implementations

搜索类似实现

bunx @plaited/development-skills lsp-find handleRequest bunx @plaited/development-skills lsp-find parseConfig
undefined
bunx @plaited/development-skills lsp-find handleRequest bunx @plaited/development-skills lsp-find parseConfig
undefined

Pre-Implementation Verification

实现前验证

bash
undefined
bash
undefined

Before writing code that uses an API, verify its signature

编写使用某API的代码前，验证其签名

bunx @plaited/development-skills lsp-hover path/to/api.ts <line> <char>
undefined
bunx @plaited/development-skills lsp-hover path/to/api.ts <line> <char>
undefined

Output Format

输出格式

All scripts output JSON to stdout. Errors go to stderr.
Hover output:
json
{
  "contents": {
    "kind": "markdown",
    "value": "```typescript\nconst parseConfig: (options: Options) => Config\n```"
  },
  "range": { "start": {...}, "end": {...} }
}
Symbols output:
json
[
  {
    "name": "symbolName",
    "kind": 13,
    "range": { "start": {...}, "end": {...} }
  }
]
Analyze output:
json
{
  "file": "path/to/file.ts",
  "exports": [
    { "name": "exportName", "kind": "Constant", "line": 139 }
  ]
}
所有脚本均向标准输出（stdout）输出JSON格式内容，错误信息输出至标准错误（stderr）。
Hover输出示例：
json
{
  "contents": {
    "kind": "markdown",
    "value": "```typescript\nconst parseConfig: (options: Options) => Config\n```"
  },
  "range": { "start": {...}, "end": {...} }
}
Symbols输出示例：
json
[
  {
    "name": "symbolName",
    "kind": 13,
    "range": { "start": {...}, "end": {...} }
  }
]
Analyze输出示例：
json
{
  "file": "path/to/file.ts",
  "exports": [
    { "name": "exportName", "kind": "Constant", "line": 139 }
  ]
}

Performance

性能

Each script invocation:
  1. Starts TypeScript Language Server (~300-500ms)
  2. Initializes LSP connection
  3. Opens document
  4. Performs query
  5. Closes and stops
For multiple queries on the same file, use 
lsp-analyze
to batch operations in a single session.
每次脚本调用会执行以下步骤：
  1. 启动TypeScript语言服务器（约300-500ms）
  2. 初始化LSP连接
  3. 打开文档
  4. 执行查询
  5. 关闭并停止服务
若需对同一文件执行多次查询，建议使用
lsp-analyze
在单个会话中批量处理操作。

Related Skills

相关技能

  • code-documentation: TSDoc standards for documentation
  • code-documentation: TSDoc文档标准