VS Code / Cursor Setup

My daily VS Code / Cursor setup — extensions, editor preferences, and settings I actually use while building full-stack apps.

1. Install the extensions

Open the Extensions panel in VS Code / Cursor
Search and install each extension below one by one
Material Icon Theme — file icons
Vue - Official (Volar) — Vue support
Tailwind CSS IntelliSense — Tailwind autocomplete
ES7+ React snippets — React snippets
Prettier — code formatter
ESLint — linting
GitLens + Git Graph — git history & blame
Error Lens — inline error highlighting
Thunder Client — API testing inside the editor
Live Server — instant local preview
WakaTime — automatic coding time tracking

2. Editor preferences

Open Command Palette by pressing the keyboard shortcut
Cmd + ⇧ + P (Mac) / Ctrl + ⇧ + P (Windows)
Type "Preferences: Open User Settings" and press Enter ⏎
Set font size to 15 and tab size to 5
Enable Format on Save
Enable smooth cursor caret animation and smooth cursor blinking
Enable auto-save after delay
Use Material Icon Theme for file icons

3. VS Code Settings

Open Command Palette by pressing the keyboard shortcut
Cmd + ⇧ + P (Mac) / Ctrl + ⇧ + P (Windows)
Enter the text in prompt and press Enter ⏎
Preferences: Open Settings (JSON)
Copy the settings.json from the below window

settings.json

{
    "editor.fontSize": 15,
    "editor.tabSize": 5,
    "files.autoSave": "afterDelay",
    "workbench.iconTheme": "material-icon-theme",
    "editor.formatOnSave": true,
    "editor.formatOnSaveMode": "modifications",
    "editor.cursorSmoothCaretAnimation": "on",
    "editor.cursorBlinking": "smooth",
    "explorer.confirmDelete": false,
    "explorer.confirmPasteNative": false,
    "diffEditor.ignoreTrimWhitespace": false,
    "javascript.updateImportsOnFileMove.enabled": "never",
    "github.copilot.nextEditSuggestions.enabled": true,
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
      "editor.defaultFormatter": "Vue.volar"
    }
  }