Skip to content

VS Code Extensions

Essential Visual Studio Code extensions for VitePress development and documentation writing.

VitePress Specific Extensions

VitePress Snippets

  • Publisher: VitePress Team
  • Features:
    • Code snippets for VitePress configuration
    • Frontmatter templates
    • Component snippets
    • Theme configuration helpers
  • Installation: Search "VitePress Snippets" in VS Code marketplace

VitePress Helper

  • Publisher: Community Developer
  • Features:
    • Live preview integration
    • File structure navigation
    • Quick commands for common tasks
    • Build and deployment shortcuts

Markdown Extensions

Markdown All in One

  • Publisher: Yu Zhang
  • Features:
    • Keyboard shortcuts for formatting
    • Table of contents generation
    • List editing
    • Math formula support
    • Auto preview
  • Key Features for VitePress:
    • TOC generation compatible with VitePress
    • Link checking and validation
    • Markdown linting

Markdown Preview Enhanced

  • Publisher: Yiyi Wang
  • Features:
    • Enhanced preview with custom CSS
    • Mermaid diagram support
    • Math rendering
    • Code chunk execution
    • Export to various formats

markdownlint

  • Publisher: David Anson
  • Features:
    • Markdown syntax checking
    • Style consistency enforcement
    • Customizable rules
    • Auto-fix capabilities
  • Configuration for VitePress:
    json
    {
      "markdownlint.config": {
        "MD033": false,
        "MD041": false
      }
    }

Vue.js Extensions

Vetur

  • Publisher: Pine Wu
  • Features:
    • Vue.js syntax highlighting
    • IntelliSense for Vue components
    • Error checking
    • Formatting support
  • Note: Being replaced by Volar for Vue 3

Volar

  • Publisher: Johnson Chu
  • Features:
    • Vue 3 and TypeScript support
    • Better performance than Vetur
    • Composition API support
    • Template type checking
  • Recommended for VitePress: Better Vue 3 integration

Vue VSCode Snippets

  • Publisher: Sarah Drasner
  • Features:
    • Vue.js code snippets
    • Component templates
    • Lifecycle method snippets
    • Composition API snippets

Development Tools

Auto Rename Tag

  • Publisher: Jun Han
  • Features:
    • Automatically rename paired HTML/XML tags
    • Works with Vue templates
    • Saves time when editing components

Bracket Pair Colorizer 2

  • Publisher: CoenraadS
  • Features:
    • Color-coded bracket pairs
    • Better code readability
    • Customizable colors
  • Note: Built into VS Code as of version 1.60

Indent Rainbow

  • Publisher: oderwat
  • Features:
    • Colorizes indentation levels
    • Helps with YAML frontmatter
    • Improves code readability

Path Intellisense

  • Publisher: Christian Kohler
  • Features:
    • Autocomplete for file paths
    • Useful for image and asset links
    • Supports relative and absolute paths

Git Integration

GitLens

  • Publisher: GitKraken
  • Features:
    • Enhanced Git capabilities
    • Blame annotations
    • Repository insights
    • Commit history visualization
  • Useful for Documentation:
    • Track content changes
    • Collaborate with team members
    • Review documentation history

Git History

  • Publisher: Don Jayamanne
  • Features:
    • View git log and file history
    • Compare file versions
    • Search commit history
    • Branch visualization

Code Quality

ESLint

  • Publisher: Microsoft
  • Features:
    • JavaScript/TypeScript linting
    • Code quality enforcement
    • Auto-fix capabilities
    • Customizable rules
  • VitePress Configuration:
    json
    {
      "eslint.validate": [
        "javascript",
        "typescript",
        "vue"
      ]
    }

Prettier

  • Publisher: Prettier
  • Features:
    • Code formatting
    • Consistent style enforcement
    • Multiple language support
    • Integration with other tools
  • Configuration:
    json
    {
      "prettier.configPath": ".prettierrc",
      "editor.formatOnSave": true
    }

Theme and Appearance

Material Theme

  • Publisher: Mattia Astorino
  • Features:
    • Beautiful color schemes
    • Icon themes
    • Consistent design
    • Multiple variants

One Dark Pro

  • Publisher: binaryify
  • Features:
    • Popular dark theme
    • Good contrast
    • Easy on the eyes
    • Syntax highlighting optimization

Material Icon Theme

  • Publisher: Philipp Kief
  • Features:
    • Material Design icons
    • File type recognition
    • Folder icons
    • Customizable colors

Productivity Extensions

Live Server

  • Publisher: Ritwick Dey
  • Features:
    • Local development server
    • Live reload
    • Port customization
    • HTTPS support
  • Note: VitePress has built-in dev server, but useful for static HTML testing

REST Client

  • Publisher: Huachao Mao
  • Features:
    • Test API endpoints
    • Useful for API documentation
    • Request/response testing
    • Environment variables

Thunder Client

  • Publisher: Ranga Vadhineni
  • Features:
    • Lightweight REST API client
    • Alternative to Postman
    • Built into VS Code
    • Collection management

Documentation Specific

Docs Authoring Pack

  • Publisher: Microsoft
  • Features:
    • Documentation authoring tools
    • Markdown shortcuts
    • Link validation
    • Image optimization

Word Count

  • Publisher: ms-vscode
  • Features:
    • Real-time word count
    • Character count
    • Reading time estimation
    • Selection statistics

Spell Right

  • Publisher: ban.tanger
  • Features:
    • Spell checking
    • Multiple language support
    • Custom dictionaries
    • Technical term recognition

Workspace Configuration

Settings Sync

  • Publisher: Shan Khan
  • Features:
    • Sync VS Code settings
    • Extension synchronization
    • Cross-device consistency
    • GitHub Gist integration
  • Note: Built into VS Code as of version 1.48

Project Manager

  • Publisher: Alessandro Fragnani
  • Features:
    • Manage multiple projects
    • Quick project switching
    • Workspace organization
    • Git integration

Custom Workspace Settings

Create a .vscode/settings.json file in your VitePress project:

json
{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.associations": {
    "*.md": "markdown"
  },
  "markdown.preview.breaks": true,
  "markdown.preview.linkify": true,
  "markdownlint.config": {
    "MD033": false,
    "MD041": false,
    "MD013": {
      "line_length": 100
    }
  },
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
  },
  "vetur.validation.template": false,
  "vetur.validation.script": false,
  "vetur.validation.style": false
}

Create an extensions.json file for your team:

json
{
  "recommendations": [
    "yzhang.markdown-all-in-one",
    "davidanson.vscode-markdownlint",
    "vue.volar",
    "esbenp.prettier-vscode",
    "ms-vscode.vscode-eslint",
    "eamodio.gitlens",
    "ms-vscode.live-server",
    "pkief.material-icon-theme",
    "christian-kohler.path-intellisense",
    "formulahendry.auto-rename-tag"
  ]
}

Keyboard Shortcuts

Useful keyboard shortcuts for VitePress development:

Markdown Editing

  • Ctrl+B / Cmd+B: Bold text
  • Ctrl+I / Cmd+I: Italic text
  • Ctrl+Shift+V / Cmd+Shift+V: Preview markdown
  • Ctrl+K V / Cmd+K V: Open preview to side
  • Ctrl+P / Cmd+P: Quick file open
  • Ctrl+Shift+P / Cmd+Shift+P: Command palette
  • Ctrl+G / Cmd+G: Go to line
  • Ctrl+T / Cmd+T: Go to symbol

Editing

  • Alt+Up/Down: Move line up/down
  • Shift+Alt+Up/Down: Copy line up/down
  • Ctrl+/ / Cmd+/: Toggle comment
  • Ctrl+D / Cmd+D: Select next occurrence

Debugging VitePress

Debug Configuration

Create .vscode/launch.json:

json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug VitePress",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/vitepress/bin/vitepress.js",
      "args": ["dev"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

Task Configuration

Create .vscode/tasks.json:

json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "VitePress Dev",
      "type": "shell",
      "command": "npm",
      "args": ["run", "dev"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      }
    },
    {
      "label": "VitePress Build",
      "type": "shell",
      "command": "npm",
      "args": ["run", "build"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      }
    }
  ]
}

Tips and Best Practices

Extension Management

  • Regularly update extensions
  • Disable unused extensions
  • Use workspace-specific settings
  • Create extension packs for teams

Performance Optimization

  • Limit the number of active extensions
  • Use workspace folders for large projects
  • Configure file watchers appropriately
  • Optimize search and indexing settings

Collaboration

  • Share workspace settings with team
  • Use consistent formatting rules
  • Document extension requirements
  • Maintain extension compatibility

This extension guide is regularly updated with new and improved extensions for VitePress development. Check the VS Code marketplace for the latest versions and new releases.

VitePress Development Guide