Tutorial: set up VS Code like a total pro

Freshly installed VS Code works fine, but with a few tweaks it becomes a tool that feels custom-built for you. Let's set it up in ten minutes.

Step 1: install essential extensions

Open the extensions tab (the squares icon in the sidebar, or Ctrl/Cmd + Shift + X) and install:

• Prettier: automatically formats your code so it always looks tidy.
• ESLint: warns you about errors and bad practices as you type.
• Live Server: opens your HTML in the browser with auto-reload every time you save.

Step 2: turn on format-on-save

Open settings (Ctrl/Cmd + ,), search for "format on save" and enable it. Or add this directly to your settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

From now on, every time you save a file, Prettier will tidy it up for you. No more arguing with your team about tabs vs. spaces.

Step 3: turn on auto-save (for those who forget to save)

{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

With this, VS Code saves your files automatically one second after you stop typing. Less "why isn't my change showing up?" and more peaceful coding.

Step 4: learn two shortcuts that will change your life

• Ctrl/Cmd + P: search for and open any file in the project by name.
• Ctrl/Cmd + Shift + F: search for text across every file in the project, not just the current one.

What did you just learn?

• Which extensions to install first (Prettier, ESLint, Live Server).
• How to enable auto-format and auto-save.
• Two keyboard shortcuts you'll use every day, forever.