Saltar al contenido principal

VS Code Setup for DILVE Help Project

This guide will help team members set up VS Code with the same configuration, extensions, and shortcuts.

🚀 Quick Setup (Automatic)​

When you open this project in VS Code, you'll see a notification:

"This workspace has extension recommendations"

Click "Install All" to automatically install the recommended extensions.

📦 Manual Extension Installation​

If you missed the notification, install extensions manually:

Method 1: Via Command Palette​

  1. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
  2. Type: Extensions: Show Recommended Extensions
  3. Click "Install" on each extension

Method 2: Via Extensions Panel​

  1. Click the Extensions icon (left sidebar) or press Ctrl+Shift+X
  2. Type @recommended in the search box
  3. Install all listed extensions

Required Extensions:​

  • Prettier (esbenp.prettier-vscode) - Code formatter
  • ESLint (dbaeumer.vscode-eslint) - JavaScript linter
  • Markdown All in One (yzhang.markdown-all-in-one) - Markdown editing
  • MDX (unifiedjs.vscode-mdx) - MDX file support
  • npm IntelliSense (christian-kohler.npm-intellisense) - Auto-complete npm modules
  • Path IntelliSense (christian-kohler.path-intellisense) - Auto-complete file paths
  • GitHub Copilot (github.copilot) - AI code suggestions (requires subscription)
  • Spanish Language Pack (ms-ceintl.vscode-language-pack-es) - Spanish UI

⚙️ Settings (Already Configured)​

The .vscode/settings.json file contains shared workspace settings that apply automatically:

  • ✅ Format on Save: Enabled
  • ✅ Auto-fix ESLint errors: On save
  • ✅ Prettier as default formatter
  • ✅ Trim trailing whitespace: Automatic
  • ✅ Insert final newline: Automatic

These settings apply only to this project and won't affect your other VS Code projects.

Editing​

ShortcutAction
Ctrl+DSelect next occurrence of word
Alt+Up/DownMove line up/down
Shift+Alt+Up/DownCopy line up/down
Ctrl+/Toggle line comment
Shift+Alt+FFormat document
ShortcutAction
Ctrl+PQuick open file
Ctrl+Shift+FSearch in files
Ctrl+BToggle sidebar
Ctrl+ `Toggle terminal
Ctrl+\Split editor

Git​

ShortcutAction
Ctrl+Shift+GOpen Source Control
Ctrl+EnterCommit (in commit message box)

Markdown Specific​

ShortcutAction
Ctrl+BToggle bold
Ctrl+IToggle italic
Ctrl+Shift+VOpen markdown preview
Ctrl+K VOpen preview side-by-side

🏃 Running the Project​

Start Development Server​

npm run start

Or use the Run Task feature:

  1. Press Ctrl+Shift+P
  2. Type: Tasks: Run Task
  3. Select "npm: start"

Build Production Site​

npm run build

Other Tasks​

View available tasks in .vscode/tasks.json or by pressing Ctrl+Shift+P → Tasks: Run Task

🎨 Customizing Your Personal Settings​

To customize settings for all your projects (not just this one):

  1. Press Ctrl+, (or File → Preferences → Settings)
  2. Change settings in the User tab (not Workspace tab)

Common personal preferences:

  • Theme: File → Preferences → Color Theme
  • Font Size: Search "font size" in settings
  • Auto Save: Search "auto save" in settings

🔄 Syncing Your Personal Settings (Optional)​

To sync your personal VS Code settings across computers:

  1. Click the gear icon (bottom left) → "Turn on Settings Sync"
  2. Sign in with Microsoft or GitHub account
  3. Choose what to sync: Settings, Keybindings, Extensions, etc.

Note: This syncs YOUR personal settings, not the team's workspace settings.

📁 Project Structure Reference​

dilvehelp/
├── .vscode/              # VS Code workspace config (shared via Git)
│   ├── settings.json    # Editor settings for this project
│   ├── extensions.json  # Recommended extensions
│   └── tasks.json       # Build/run tasks
├── docs/                # Documentation source files
├── src/                 # Components and custom code
├── static/              # Static assets
├── package.json         # Project dependencies
└── docusaurus.config.ts # Docusaurus configuration

🆘 Troubleshooting​

Extensions not installing​

  • Check your internet connection
  • Restart VS Code
  • Try installing manually: Extensions panel → Search by name → Install

Format on Save not working​

  1. Make sure Prettier extension is installed
  2. Check bottom-right of VS Code: Should show "Prettier" as formatter
  3. If not, right-click in a file → "Format Document With..." → Choose Prettier

ESLint not showing errors​

  1. Make sure ESLint extension is installed
  2. Run: npm install to ensure dependencies are installed
  3. Restart VS Code

Tasks not appearing​

  • Make sure you've run npm install first
  • Check .vscode/tasks.json exists
  • Try: Ctrl+Shift+P → Tasks: Run Task

🤝 Getting Help​

Last Updated: January 25, 2026

Última actualización en por Jesus Peraita