Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
271 changes: 271 additions & 0 deletions onboarding/code-editor-extensions-and-plugins/cursor.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,271 @@
# Cursor Extensions

Welcome to the Linux Foundation development team! This guide provides recommended extensions for the Cursor code editor.

## 🚀 Getting Started

1. **Review this entire document** to understand our recommended extensions and plugins
2. **Install the extensions relevant** to your development workflow
3. **Bookmark this page** for quick reference when setting up new development environments 😀

---

## 🎯 Cursor Extensions

### General Extensions

#### GitLens

- **Purpose**: Enhanced Git capabilities and code history visualization
- **Extension ID**: `eamodio.gitlens`

**What you'll use GitLens for:**

- View detailed Git blame information inline with code
- Explore file and line history with rich visualizations
- Navigate through repository and branch history
- Compare changes across commits and branches
- Understand code evolution and contributor insights

#### Prettier - Code formatter

- **Purpose**: Automatic code formatting for consistent style
- **Extension ID**: `esbenp.prettier-vscode`

**What you'll use Prettier for:**

- Automatically format code on save according to team standards
- Ensure consistent code style across all team members
- Integration with our ESLint configuration for comprehensive code quality

#### ESLint

- **Purpose**: JavaScript and TypeScript linting for code quality
- **Extension ID**: `dbaeumer.vscode-eslint`

**What you'll use ESLint for:**

- Real-time code quality checking and error detection
- Enforce team coding standards and best practices
- Automatic fixing of common issues and style violations
- Custom rule configuration for project-specific requirements

#### Auto Rename Tag

- **Purpose**: Automatically rename paired HTML/XML tags
- **Extension ID**: `formulahendry.auto-rename-tag`

**What you'll use Auto Rename Tag for:**

- Simultaneously rename opening and closing HTML/XML tags
- Prevent mismatched tags when refactoring markup
- Maintain tag consistency in React components

#### Auto Close Tag

- **Purpose**: Automatically close HTML/XML tags
- **Extension ID**: formulahendry.auto-close-tag

**What you'll use Auto Close Tag for**:

- Automatically add closing tags when typing opening tags
- Support for custom HTML elements and React components
- Reduce typing and prevent unclosed tag errors
- Speed up markup development workflows

#### Docker

- **Purpose**: Docker container management and development
- **Extension ID**: `ms-azuretools.vscode-docker`

**What you'll use Docker for:**

- Build, manage, and deploy Docker containers
- IntelliSense for Dockerfile and docker-compose files
- Container and image management from within the editor
- Integration with remote development containers

#### Path Intellisense

- **Extension ID**: christian-kohler.path-intellisense
- **Purpose**: Autocomplete for file paths in import statements

**What you'll use Path Intellisense for**:

- Intelligent autocompletion for file and folder paths
- Reduce typos in import statements and file references
- Navigate project structure more efficiently
- Support for relative and absolute path completion

#### CodeRabbit

- **Extension ID**: coderabbitai.coderabbit
- **Purpose**: AI-powered code review and analysis

**What you'll use CodeRabbit for**:

- Real-time code review suggestions and improvements
- Automated code quality analysis and recommendations
- Security vulnerability detection in your code
- Performance optimization suggestions
- Code style and best practice enforcement

### Workflow Specific Extensions

#### Angular Language Service

- **Purpose**: Enhanced Angular development with IntelliSense and diagnostics
- **Extension ID**: `Angular.ng-template`

**What you'll use Angular Language Service for:**

- IntelliSense and autocompletion in Angular templates
- Real-time error detection in component templates
- Navigation between templates and component code
- Type checking for Angular expressions and directives
- Quick fixes and refactoring support for Angular projects

#### Angular Schematics

- **Purpose**: Generate Angular code and project structures using schematics
- **Extension ID**: `cyrilletuzi.angular-schematics`

**What you'll use Angular Schematics for:**

- Generate components, services, modules, and other Angular artifacts
- Scaffold new Angular applications and libraries
- Apply code transformations and migrations
- Maintain consistent project structure across team
- Integrate with Angular CLI workflows

#### Pretty TypeScript Errors

- **Purpose**: Improved TypeScript error messages with better formatting
- **Extension ID**: `yoavbls.pretty-ts-errors`

**What you'll use Pretty TypeScript Errors for:**

- Display TypeScript errors with improved readability and formatting
- Better understanding of complex type errors and suggestions
- Reduced cognitive load when debugging TypeScript issues
- Enhanced developer experience with clearer error messages

#### Tailwind CSS IntelliSense

- **Purpose**: Intelligent autocomplete and linting for Tailwind CSS
- **Extension ID**: `bradlc.vscode-tailwindcss`

**What you'll use Tailwind CSS IntelliSense for:**

- Autocomplete for Tailwind CSS class names
- Hover previews showing the actual CSS properties
- Linting and validation of Tailwind classes
- Color previews and syntax highlighting
- Support for custom Tailwind configurations

#### Claude Code for VSCode

- **Purpose**: AI-powered coding assistance integrated directly in your editor
- **Extension ID**: `Anthropic.claude-dev`

**What you'll use Claude Code for VSCode for:**

- AI-powered code completion and suggestions
- Intelligent code refactoring and optimization
- Natural language code generation and explanations
- Debugging assistance and error resolution
- Code review and improvement recommendations

#### Go

- **Purpose**: Official Go language support with comprehensive tooling
- **Extension ID**: `golang.go`

**What you'll use Go for:**

- Syntax highlighting and code completion for Go
- Integrated debugging with delve debugger
- Automatic code formatting with gofmt on save
- Test discovery and execution within the editor
- Import management and dependency resolution
- Integration with Go tools (go mod, go build, go test)

#### REST Client

- **Purpose**: Test REST APIs directly from within the editor
- **Extension ID**: `humao.rest-client`

**What you'll use REST Client for:**

- Send HTTP requests and view responses without leaving the editor
- Save and organize API requests in .http files
- Environment variable support for different deployment stages
- Authentication support (Bearer tokens, Basic auth)
- Response formatting and syntax highlighting

#### Thunder Client

- **Purpose**: Lightweight REST API testing client
- **Extension ID**: `rangav.vscode-thunder-client`

**What you'll use Thunder Client for:**

- GUI-based API testing with collections and environments
- Import/export Postman collections
- Scriptless testing with pre-request and test scripts
- Response history and request organization
- Team collaboration with shared collections

#### PostgreSQL

- **Purpose**: PostgreSQL syntax highlighting and query execution
- **Extension ID**: `ms-ossdata.vscode-postgresql`

**What you'll use PostgreSQL for:**

- Syntax highlighting for PostgreSQL-specific SQL
- IntelliSense for PostgreSQL functions and keywords
- Query execution and result visualization
- Connection management for PostgreSQL databases
- Schema browsing and table structure viewing

#### YAML

- **Purpose**: YAML language support with validation and formatting
- **Extension ID**: `redhat.vscode-yaml`

**What you'll use YAML for:**

- Syntax highlighting and validation for YAML files
- Schema validation for Kubernetes, Docker Compose, and CI/CD files
- Auto-completion based on YAML schemas
- Formatting and indentation correction
- Error detection and quick fixes

#### Kubernetes

- **Purpose**: Kubernetes cluster management and YAML editing
- **Extension ID**: `ms-kubernetes-tools.vscode-kubernetes-tools`

**What you'll use Kubernetes for:**

- Deploy and manage Kubernetes applications
- Browse cluster resources and view logs
- IntelliSense for Kubernetes YAML manifests
- Port forwarding and terminal access to pods
- Helm chart development and deployment

#### Vue Language Features

- **Extension ID**: Vue.volar
- **Purpose**: Official Vue.js language server with TypeScript support

**What you'll use Vue Language Features for**:

- Advanced TypeScript support in Vue components
- Better performance and accuracy than legacy Vue extensions
- Composition API and script setup syntax support
- Template type checking and validation
- Integration with Vue 3 features and modern Vue development

---
Loading