211 lines
5.3 KiB
Markdown
211 lines
5.3 KiB
Markdown
---
|
|
title: VSCode Extensions and MCP Configuration for Ember Projects
|
|
impact: HIGH
|
|
impactDescription: Improves editor consistency and AI-assisted debugging setup
|
|
tags: tooling, vscode, mcp, glint, developer-experience
|
|
---
|
|
|
|
## VSCode Extensions and MCP Configuration for Ember Projects
|
|
|
|
Set up recommended VSCode extensions and Model Context Protocol (MCP) servers for optimal Ember development experience.
|
|
|
|
**Incorrect (no extension recommendations):**
|
|
|
|
```json
|
|
{
|
|
"recommendations": []
|
|
}
|
|
```
|
|
|
|
**Correct (recommended extensions for Ember):**
|
|
|
|
```json
|
|
{
|
|
"recommendations": [
|
|
"emberjs.vscode-ember",
|
|
"vunguyentuan.vscode-glint",
|
|
"esbenp.prettier-vscode",
|
|
"dbaeumer.vscode-eslint"
|
|
]
|
|
}
|
|
```
|
|
|
|
## Recommended VSCode Extensions
|
|
|
|
Create a `.vscode/extensions.json` file in your project root to recommend extensions to all team members:
|
|
|
|
```json
|
|
{
|
|
"recommendations": [
|
|
"emberjs.vscode-ember",
|
|
"vunguyentuan.vscode-glint",
|
|
"esbenp.prettier-vscode",
|
|
"dbaeumer.vscode-eslint"
|
|
]
|
|
}
|
|
```
|
|
|
|
### Core Ember Extensions
|
|
|
|
**ember-extension-pack** (or individual extensions):
|
|
|
|
- `emberjs.vscode-ember` - Ember.js language support
|
|
- Syntax highlighting for `.hbs`, `.gjs`, `.gts` files
|
|
- IntelliSense for Ember-specific patterns
|
|
- Code snippets for common Ember patterns
|
|
|
|
**Glint 2 Extension** (for TypeScript projects):
|
|
|
|
- `vunguyentuan.vscode-glint` - Type checking for Glimmer templates
|
|
- Real-time type errors in `.gts`/`.gjs` files
|
|
- Template-aware autocomplete
|
|
- Hover information for template helpers and components
|
|
|
|
Install instructions:
|
|
|
|
```bash
|
|
# Via command palette
|
|
# Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
|
|
# Type: "Extensions: Install Extensions"
|
|
# Search for "Ember" or "Glint"
|
|
```
|
|
|
|
## MCP (Model Context Protocol) Server Configuration
|
|
|
|
Configure MCP servers in `.vscode/settings.json` to integrate AI coding assistants with Ember-specific context:
|
|
|
|
```json
|
|
{
|
|
"github.copilot.enable": {
|
|
"*": true,
|
|
"yaml": false,
|
|
"plaintext": false,
|
|
"markdown": false
|
|
},
|
|
"mcp.servers": {
|
|
"ember-mcp": {
|
|
"command": "npx",
|
|
"args": ["@ember/mcp-server"],
|
|
"description": "Ember.js MCP Server - Provides Ember-specific context"
|
|
},
|
|
"chrome-devtools": {
|
|
"command": "npx",
|
|
"args": ["@modelcontextprotocol/server-chrome-devtools"],
|
|
"description": "Chrome DevTools MCP Server - Browser debugging integration"
|
|
},
|
|
"playwright": {
|
|
"command": "npx",
|
|
"args": ["@playwright/mcp-server"],
|
|
"description": "Playwright MCP Server - Browser automation and testing"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### MCP Server Benefits
|
|
|
|
**Ember MCP Server** (`@ember/mcp-server`):
|
|
|
|
- Ember API documentation lookup
|
|
- Component and helper discovery
|
|
- Addon documentation integration
|
|
- Routing and data layer context
|
|
|
|
**Chrome DevTools MCP** (`@modelcontextprotocol/server-chrome-devtools`):
|
|
|
|
- Live browser inspection
|
|
- Console debugging assistance
|
|
- Network request analysis
|
|
- Performance profiling integration
|
|
|
|
**Playwright MCP** (optional, `@playwright/mcp-server`):
|
|
|
|
- Test generation assistance
|
|
- Browser automation context
|
|
- E2E testing patterns
|
|
- Debugging test failures
|
|
|
|
## Complete VSCode Settings Example
|
|
|
|
```json
|
|
{
|
|
"editor.formatOnSave": true,
|
|
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
|
"editor.codeActionsOnSave": {
|
|
"source.fixAll.eslint": "explicit"
|
|
},
|
|
|
|
"[glimmer-js]": {
|
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
},
|
|
"[glimmer-ts]": {
|
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
},
|
|
|
|
"files.associations": {
|
|
"*.gjs": "glimmer-js",
|
|
"*.gts": "glimmer-ts"
|
|
},
|
|
|
|
"glint.enabled": true,
|
|
"glint.configPath": "./tsconfig.json",
|
|
|
|
"github.copilot.enable": {
|
|
"*": true
|
|
},
|
|
|
|
"mcp.servers": {
|
|
"ember-mcp": {
|
|
"command": "npx",
|
|
"args": ["@ember/mcp-server"],
|
|
"description": "Ember.js MCP Server"
|
|
},
|
|
"chrome-devtools": {
|
|
"command": "npx",
|
|
"args": ["@modelcontextprotocol/server-chrome-devtools"],
|
|
"description": "Chrome DevTools MCP Server"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## TypeScript Configuration (when using Glint)
|
|
|
|
Ensure your `tsconfig.json` has Glint configuration:
|
|
|
|
```json
|
|
{
|
|
"compilerOptions": {
|
|
// ... standard TS options
|
|
},
|
|
"glint": {
|
|
"environment": ["ember-loose", "ember-template-imports"]
|
|
}
|
|
}
|
|
```
|
|
|
|
## Installation Steps
|
|
|
|
1. **Install extensions** (prompted automatically when opening project with `.vscode/extensions.json`)
|
|
2. **Install Glint** (if using TypeScript):
|
|
```bash
|
|
npm install --save-dev @glint/core @glint/environment-ember-loose @glint/environment-ember-template-imports
|
|
```
|
|
3. **Configure MCP servers** in `.vscode/settings.json`
|
|
4. **Reload VSCode** to activate all extensions and MCP integrations
|
|
|
|
## Benefits
|
|
|
|
- **Consistent team setup**: All developers get same extensions
|
|
- **Type safety**: Glint provides template type checking
|
|
- **AI assistance**: MCP servers give AI tools Ember-specific context
|
|
- **Better DX**: Autocomplete, debugging, and testing integration
|
|
- **Reduced onboarding**: New team members get productive faster
|
|
|
|
## References
|
|
|
|
- [VSCode Ember Extension](https://marketplace.visualstudio.com/items?itemName=emberjs.vscode-ember)
|
|
- [Glint Documentation](https://typed-ember.gitbook.io/glint/)
|
|
- [MCP Protocol Specification](https://modelcontextprotocol.io/)
|
|
- [Ember Primitives VSCode Setup Example](https://github.com/universal-ember/ember-primitives/tree/main/.vscode)
|