|
127 | 127 |
|
128 | 128 | ## Code Navigation and Investigation |
129 | 129 |
|
130 | | -### Using Go LSP Tools (STRONGLY RECOMMENDED) |
| 130 | +### Using LSP Tools (STRONGLY RECOMMENDED) |
131 | 131 |
|
132 | | -**IMPORTANT**: Always use Go LSP tools for code navigation and understanding. These tools provide accurate, real-time analysis of the codebase and should be your first choice for code investigation. |
| 132 | +**IMPORTANT**: Always use LSP tools for code navigation and understanding. These tools provide accurate, real-time analysis of the codebase and should be your first choice for code investigation. |
| 133 | + |
| 134 | +#### Go LSP Tools (for backend code) |
133 | 135 |
|
134 | 136 | 1. **Find function definitions** (USE THIS FREQUENTLY): |
135 | 137 | - `mcp__go-language-server__definition symbolName` |
|
145 | 147 | - `mcp__go-language-server__hover filePath line column` |
146 | 148 | - Get type information and documentation at specific positions |
147 | 149 |
|
| 150 | +#### TypeScript LSP Tools (for frontend code in site/) |
| 151 | + |
| 152 | +1. **Find component/function definitions** (USE THIS FREQUENTLY): |
| 153 | + - `mcp__typescript-language-server__definition symbolName` |
| 154 | + - Example: `mcp__typescript-language-server__definition LoginPage` |
| 155 | + - Quickly navigate to React components, hooks, and utility functions |
| 156 | + |
| 157 | +2. **Find symbol references** (ESSENTIAL FOR UNDERSTANDING IMPACT): |
| 158 | + - `mcp__typescript-language-server__references symbolName` |
| 159 | + - Locate all usages of components, types, or functions |
| 160 | + - Critical for refactoring React components and understanding prop usage |
| 161 | + |
| 162 | +3. **Get type information**: |
| 163 | + - `mcp__typescript-language-server__hover filePath line column` |
| 164 | + - Get TypeScript type information and JSDoc documentation |
| 165 | + |
| 166 | +4. **Rename symbols safely**: |
| 167 | + - `mcp__typescript-language-server__rename_symbol filePath line column newName` |
| 168 | + - Rename components, props, or functions across the entire codebase |
| 169 | + |
| 170 | +5. **Check for TypeScript errors**: |
| 171 | + - `mcp__typescript-language-server__diagnostics filePath` |
| 172 | + - Get compilation errors and warnings for a specific file |
| 173 | + |
148 | 174 | ### Investigation Strategy (LSP-First Approach) |
149 | 175 |
|
| 176 | +#### Backend Investigation (Go) |
| 177 | + |
150 | 178 | 1. **Start with route registration** in `coderd/coderd.go` to understand API endpoints |
151 | | -2. **Use LSP `definition` lookup** to trace from route handlers to actual implementations |
152 | | -3. **Use LSP `references`** to understand how functions are called throughout the codebase |
| 179 | +2. **Use Go LSP `definition` lookup** to trace from route handlers to actual implementations |
| 180 | +3. **Use Go LSP `references`** to understand how functions are called throughout the codebase |
153 | 181 | 4. **Follow the middleware chain** using LSP tools to understand request processing flow |
154 | 182 | 5. **Check test files** for expected behavior and error patterns |
155 | 183 |
|
| 184 | +#### Frontend Investigation (TypeScript/React) |
| 185 | + |
| 186 | +1. **Start with route definitions** in `site/src/App.tsx` or router configuration |
| 187 | +2. **Use TypeScript LSP `definition`** to navigate to React components and hooks |
| 188 | +3. **Use TypeScript LSP `references`** to find all component usages and prop drilling |
| 189 | +4. **Follow the component hierarchy** using LSP tools to understand data flow |
| 190 | +5. **Check for TypeScript errors** with `diagnostics` before making changes |
| 191 | +6. **Examine test files** (`.test.tsx`) for component behavior and expected props |
| 192 | + |
156 | 193 | ## Troubleshooting Development Issues |
157 | 194 |
|
158 | 195 | ### Common Issues |
|
0 commit comments