VUP

English

简体中文

English

简体中文

Appearance

VSCode Plugins ​

VSCode is the recommended editor for VUP projects. This guide introduces the essential plugins and configurations for optimal development experience.

Essential Plugins ​

Prettier - Code formatter ​

  • Plugin ID: esbenp.prettier-vscode
  • Description: Code formatter that supports multiple languages
  • Features: Auto-format on save, consistent code style

ESLint - JavaScript and TypeScript linter ​

  • Plugin ID: dbaeumer.vscode-eslint
  • Description: Integrates ESLint into VSCode
  • Features: Real-time error detection, auto-fix on save

TypeScript and JavaScript Language Features ​

  • Plugin ID: ms-vscode.vscode-typescript-next
  • Description: Enhanced TypeScript support
  • Features: Advanced type checking, IntelliSense

JSON Language Features ​

  • Plugin ID: ms-vscode.vscode-json
  • Description: JSON file support
  • Features: Syntax highlighting, validation

Tailwind CSS IntelliSense ​

  • Plugin ID: bradlc.vscode-tailwindcss
  • Description: Tailwind CSS autocomplete and IntelliSense
  • Features: Class name suggestions, hover previews

Vue Language Features (Volar) ​

  • Plugin ID: vue.volar
  • Description: Vue 3 language service
  • Features: Template syntax highlighting, component IntelliSense

Version Lens ​

  • Plugin ID: pflannery.vscode-versionlens
  • Description: Shows version information for dependencies
  • Features: Version comparison, update suggestions

Installation ​

Method 1: Install via VSCode ​

  1. Open VSCode
  2. Go to Extensions (Ctrl+Shift+X)
  3. Search for each plugin ID
  4. Click Install

Method 2: Install via Command Line ​

bash
# Install all recommended plugins
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension ms-vscode.vscode-typescript-next
code --install-extension ms-vscode.vscode-json
code --install-extension bradlc.vscode-tailwindcss
code --install-extension vue.volar
code --install-extension pflannery.vscode-versionlens

Method 3: Workspace Recommendations ​

VUP projects include .vscode/extensions.json with recommended plugins. VSCode will automatically suggest installing these plugins when you open the project.

Configuration ​

Editor Settings ​

VUP projects include pre-configured VSCode settings in .vscode/settings.json:

json
{
  "editor.codeActionsOnSave": {
    "source.organizeImports": "never",
    "source.removeUnusedImports": "never",
    "source.fixAll.eslint": "never"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSaveMode": "file",
  "editor.tabSize": 2,
  "files.eol": "\n",
  "typescript.preferences.importModuleSpecifier": "relative",
  "scss.lint.unknownAtRules": "ignore",
  "eslint.enable": true,
  "eslint.validate": ["javascript", "typescript", "vue"],
  "eslint.workingDirectories": [".", "apps/*"],
  "typescript.preferences.includePackageJsonAutoImports": "auto",
  "typescript.suggest.autoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.preferences.organizeImports": {
    "enabled": false
  }
}

Key Settings Explained ​

  • formatOnSave: Automatically format code when saving
  • defaultFormatter: Use Prettier as the default formatter
  • tabSize: Use 2 spaces for indentation
  • files.eol: Use LF line endings
  • eslint.workingDirectories: Configure ESLint for monorepo structure

Usage Tips ​

Code Formatting ​

  • Auto-format: Code is automatically formatted when saving
  • Manual format: Use Shift+Alt+F to format manually
  • Format selection: Select text and use Shift+Alt+F

ESLint Integration ​

  • Error highlighting: ESLint errors are highlighted in real-time
  • Quick fixes: Use Ctrl+. to see available fixes
  • Auto-fix: Some issues can be automatically fixed

TypeScript Support ​

  • IntelliSense: Get intelligent code completion
  • Type checking: Real-time type error detection
  • Go to definition: Ctrl+Click to navigate to definitions
  • Find references: Shift+F12 to find all references

Vue Development ​

  • Template syntax: Full support for Vue template syntax
  • Component props: IntelliSense for component props
  • Event handling: Auto-completion for event handlers
  • Scoped styles: Support for scoped CSS

Tailwind CSS ​

  • Class suggestions: Get suggestions for Tailwind classes
  • Hover preview: See styles when hovering over classes
  • Color preview: Visual color previews in CSS

Troubleshooting ​

Common Issues ​

ESLint not working ​

  • Ensure the ESLint plugin is installed
  • Check that .eslintrc.js exists in the project
  • Restart VSCode after installing the plugin

Prettier not formatting ​

  • Check that Prettier is set as the default formatter
  • Ensure .prettierrc exists in the project
  • Verify the file type is supported

TypeScript errors ​

  • Make sure TypeScript is installed in the project
  • Check that tsconfig.json is properly configured
  • Restart the TypeScript language service

Vue files not recognized ​

  • Install the Volar plugin
  • Disable the built-in Vetur plugin if installed
  • Check that the file has .vue extension

Performance Optimization ​

  • Disable unused plugins: Only install plugins you actually use
  • Exclude large directories: Add node_modules to .vscode/settings.json
  • Use workspace settings: Configure settings per project

Copyright © 2025 VUP-CLI