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
}
Recommended Extensions Pack
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 textCtrl+I
/Cmd+I
: Italic textCtrl+Shift+V
/Cmd+Shift+V
: Preview markdownCtrl+K V
/Cmd+K V
: Open preview to side
Navigation
Ctrl+P
/Cmd+P
: Quick file openCtrl+Shift+P
/Cmd+Shift+P
: Command paletteCtrl+G
/Cmd+G
: Go to lineCtrl+T
/Cmd+T
: Go to symbol
Editing
Alt+Up/Down
: Move line up/downShift+Alt+Up/Down
: Copy line up/downCtrl+/
/Cmd+/
: Toggle commentCtrl+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.