Tools
Discover essential tools and utilities that enhance your VitePress development workflow.
Development Tools
Code Editors
Visual Studio Code
The most popular editor for VitePress development with excellent Vue and Markdown support.
Recommended Extensions:
- Vetur or Volar - Vue.js language support
- Markdown All in One - Enhanced Markdown editing
- ESLint - Code linting and formatting
- Prettier - Code formatting
- Auto Rename Tag - Automatically rename paired HTML tags
- Bracket Pair Colorizer - Colorize matching brackets
VS Code Settings:
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"files.associations": {
"*.md": "markdown"
},
"markdown.preview.breaks": true
}WebStorm/IntelliJ IDEA
Professional IDE with built-in Vue and Markdown support.
Key Features:
- Intelligent code completion
- Built-in version control
- Advanced refactoring tools
- Integrated terminal and debugger
Command Line Tools
Node.js Version Managers
nvm (Node Version Manager)
# Install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
# Install and use Node.js 18
nvm install 18
nvm use 18
nvm alias default 18fnm (Fast Node Manager)
# Install fnm
curl -fsSL https://fnm.vercel.app/install | bash
# Install and use Node.js 18
fnm install 18
fnm use 18
fnm default 18Package Managers
npm (Default)
# Install dependencies
npm install
# Run scripts
npm run dev
npm run buildyarn
# Install yarn
npm install -g yarn
# Install dependencies
yarn install
# Run scripts
yarn dev
yarn buildpnpm (Fast and efficient)
# Install pnpm
npm install -g pnpm
# Install dependencies
pnpm install
# Run scripts
pnpm dev
pnpm buildContent Creation Tools
Markdown Editors
Typora
Beautiful WYSIWYG Markdown editor with live preview.
Features:
- Real-time preview
- Math equation support
- Diagram support (Mermaid, Flowchart)
- Export to multiple formats
Mark Text
Real-time preview Markdown editor with a clean interface.
Features:
- Live preview
- Focus mode
- Typewriter mode
- Export options
Obsidian
Knowledge management tool with powerful linking features.
Features:
- Bi-directional linking
- Graph view
- Plugin ecosystem
- Vault synchronization
Image Tools
TinyPNG
Online image compression tool for optimizing images.
# CLI tool for batch compression
npm install -g tinypng-cli
# Compress images
tinypng input/*.png --key YOUR_API_KEYImageOptim (macOS)
Drag-and-drop image optimization tool.
Squoosh (Web)
Google's web-based image compression tool with advanced options.
Screenshot Tools
CleanShot X (macOS)
Professional screenshot and screen recording tool.
Greenshot (Windows/Linux)
Free screenshot tool with annotation features.
Flameshot (Linux)
Powerful screenshot tool with built-in editor.
Design Tools
UI/UX Design
Figma
Collaborative design tool for creating mockups and prototypes.
VitePress Resources:
- Component libraries
- Design systems
- Wireframe templates
Sketch (macOS)
Vector-based design tool for UI/UX design.
Adobe XD
Design and prototyping tool with collaboration features.
Icon Libraries
Lucide Icons
Beautiful, customizable SVG icons used by VitePress.
# Install for Vue
npm install lucide-vue-next
# Usage in components
<template>
<Search :size="24" />
</template>
<script setup>
import { Search } from 'lucide-vue-next'
</script>Heroicons
Beautiful hand-crafted SVG icons by the makers of Tailwind CSS.
Feather Icons
Simply beautiful open source icons.
Color Tools
Coolors
Color palette generator and color scheme explorer.
Adobe Color
Color wheel and palette creation tool.
Contrast Checker
Ensure your color combinations meet accessibility standards.
Development Utilities
Git Tools
GitHub Desktop
Visual Git client for managing repositories.
GitKraken
Cross-platform Git GUI with advanced features.
Sourcetree
Free Git client for Windows and macOS.
Terminal Enhancements
Oh My Zsh
Framework for managing Zsh configuration.
# Install Oh My Zsh
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
# Useful plugins for development
plugins=(git node npm yarn vscode)Starship
Cross-shell prompt with customizable themes.
# Install Starship
curl -sS https://starship.rs/install.sh | sh
# Add to shell config
echo 'eval "$(starship init zsh)"' >> ~/.zshrcBrowser Extensions
Vue.js Devtools
Essential for debugging Vue components in VitePress.
Lighthouse
Performance, accessibility, and SEO auditing.
Web Developer
Comprehensive web development tools.
ColorZilla
Color picker and gradient generator.
Testing Tools
Performance Testing
Lighthouse CI
Automated Lighthouse testing for CI/CD pipelines.
# Install Lighthouse CI
npm install -g @lhci/cli
# Run Lighthouse CI
lhci autorunWebPageTest
Comprehensive web performance testing tool.
GTmetrix
Website speed and performance optimization tool.
Accessibility Testing
axe DevTools
Accessibility testing browser extension.
WAVE
Web accessibility evaluation tool.
Colour Contrast Analyser
Desktop tool for checking color contrast ratios.
Link Checking
Broken Link Checker
Command-line tool for finding broken links.
# Install broken-link-checker
npm install -g broken-link-checker
# Check links
blc http://localhost:5173 -roLink Checker
Online tool for checking website links.
Deployment Tools
CI/CD Platforms
GitHub Actions
Automated workflows for building and deploying VitePress sites.
# Example workflow
name: Deploy VitePress
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 18
- run: npm ci
- run: npm run build
- uses: actions/deploy-pages@v4GitLab CI/CD
Integrated CI/CD platform for GitLab repositories.
Netlify
Continuous deployment platform with Git integration.
Vercel
Frontend deployment platform with automatic deployments.
Hosting Platforms
GitHub Pages
Free static site hosting for GitHub repositories.
Netlify
Modern web development platform with global CDN.
Vercel
Platform for frontend frameworks and static sites.
Cloudflare Pages
JAMstack platform with edge computing capabilities.
Monitoring Tools
Analytics
Google Analytics
Comprehensive web analytics platform.
// Google Analytics 4 integration
export default {
head: [
['script', {
async: true,
src: 'https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID'
}],
['script', {}, `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
`]
]
}Plausible Analytics
Privacy-focused web analytics alternative.
Fathom Analytics
Simple, privacy-focused website analytics.
Error Tracking
Sentry
Application monitoring and error tracking platform.
// Sentry integration
import * as Sentry from '@sentry/vue'
export default {
enhanceApp({ app }) {
Sentry.init({
app,
dsn: 'YOUR_SENTRY_DSN'
})
}
}LogRocket
Session replay and performance monitoring.
Uptime Monitoring
UptimeRobot
Website uptime monitoring service.
Pingdom
Website performance and uptime monitoring.
Automation Tools
Content Generation
OpenAI GPT
AI-powered content generation and editing assistance.
Grammarly
Writing assistant for grammar and style checking.
Hemingway Editor
Writing tool for improving readability and clarity.
Image Processing
Sharp
High-performance image processing library for Node.js.
// Automated image optimization
const sharp = require('sharp')
sharp('input.jpg')
.resize(800, 600)
.webp({ quality: 80 })
.toFile('output.webp')ImageMagick
Command-line image manipulation tool.
# Batch resize images
mogrify -resize 800x600 *.jpg
# Convert to WebP
mogrify -format webp *.jpgBuild Automation
Gulp
Task runner for automating development workflows.
Webpack
Module bundler with extensive plugin ecosystem.
Rollup
Module bundler optimized for libraries.
Documentation Tools
API Documentation
Swagger/OpenAPI
API documentation specification and tools.
Postman
API development and documentation platform.
Insomnia
REST and GraphQL client with documentation features.
Diagramming
Mermaid
Markdown-based diagramming and charting tool.
```mermaid
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Debug]
D --> B
#### Draw.io
Free online diagramming tool.
#### Lucidchart
Professional diagramming and visualization tool.
## Recommended Tool Stack
### Beginner Setup
- **Editor**: Visual Studio Code with Vue extensions
- **Package Manager**: npm (comes with Node.js)
- **Version Control**: GitHub Desktop
- **Image Optimization**: TinyPNG online tool
- **Deployment**: Netlify with Git integration
### Intermediate Setup
- **Editor**: VS Code with advanced extensions
- **Package Manager**: yarn or pnpm
- **Terminal**: Oh My Zsh with useful plugins
- **Version Control**: Git command line + VS Code integration
- **Image Tools**: Local optimization tools
- **Testing**: Lighthouse for performance auditing
- **Deployment**: GitHub Actions + multiple platforms
### Advanced Setup
- **Editor**: WebStorm or VS Code with full extension suite
- **Package Manager**: pnpm with workspace support
- **Terminal**: Starship prompt with custom configuration
- **Version Control**: Advanced Git workflows
- **Automation**: Custom scripts and CI/CD pipelines
- **Monitoring**: Analytics, error tracking, uptime monitoring
- **Testing**: Comprehensive testing suite with automation
## Tool Configuration Examples
### ESLint Configuration
```js
// .eslintrc.js
module.exports = {
extends: [
'eslint:recommended',
'@vue/eslint-config-typescript'
],
rules: {
'vue/multi-word-component-names': 'off',
'@typescript-eslint/no-unused-vars': 'warn'
}
}Prettier Configuration
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80
}Package.json Scripts
{
"scripts": {
"dev": "vitepress dev docs",
"build": "vitepress build docs",
"preview": "vitepress preview docs",
"lint": "eslint . --ext .vue,.js,.ts,.md",
"lint:fix": "eslint . --ext .vue,.js,.ts,.md --fix",
"format": "prettier --write .",
"check-links": "blc http://localhost:5173 -ro"
}
}Getting Help
Official Resources
Community
Learning Resources
This tools guide is regularly updated with new tools and best practices. Contribute your favorite tools and configurations!