Visual Studio Code is free, runs on Windows, macOS and Linux, and is the editor most web development tutorials assume you are using. Out of the box it is already good. The trouble starts when beginners install thirty extensions from a “must-have” list, slow the editor down and end up with three tools fighting over how to format the same file.
This guide to a lean VS Code setup takes the opposite approach. First, learn the features that are already built in. Then add a small set of well-known extensions, each for a clear reason. Finally, change a handful of settings. Everything here is checked against the official VS Code documentation and the extensions’ Marketplace pages.
Learn these built-in features first
Many popular extensions from a few years ago are no longer needed, because VS Code now does the job itself.
| Feature | What it does | How to use it |
|---|---|---|
| Emmet | Expands short abbreviations into HTML and CSS | Type ul>li*3 in an HTML file and press Tab |
| Auto closing tags | Adds the closing tag when you type > | On by default in HTML files |
| Linked editing | Renames the closing tag when you edit the opening tag | Set editor.linkedEditing to true |
| IntelliSense | Suggestions for HTML, CSS and JavaScript, including CSS properties and values | Appears as you type; Ctrl + Space to trigger |
| Colour picker | Pick and convert colours in CSS | Hover over a colour value |
| Integrated terminal | Run Git, Node.js, PHP or Python without leaving the editor | Ctrl + ` |
| Source Control | Stage, commit, view diffs and resolve merge conflicts | The branch icon in the Activity Bar |
| Settings Sync | Keeps settings and extensions the same on all your machines | Sign in from the Accounts menu and turn on Settings Sync |
Tip: Extensions like “Auto Rename Tag” were very popular before linked editing existed. For most HTML work, the built-in setting is enough.
Shortcuts worth learning in week one
The keys below are for Windows and Linux; on a Mac, use Cmd in place of Ctrl for most of them. You can see and change every shortcut under File › Preferences › Keyboard Shortcuts.
| Shortcut | Action |
|---|---|
| Ctrl + Shift + P | Command Palette: search for any command |
| Ctrl + P | Quick Open: jump to a file by typing part of its name |
| Ctrl + D | Select the next occurrence of the current word (multi-cursor editing) |
| Alt + click | Add another cursor |
| Ctrl + Shift + L | Select all occurrences of the current selection |
| Alt + Up / Down | Move the current line up or down |
| Ctrl + / | Toggle a line comment |
| Shift + Alt + F | Format the document (Windows) |
| F2 | Rename a symbol everywhere it is used (JavaScript, TypeScript, Python with the extension) |
Multi-cursor editing alone saves a surprising amount of time. Select a class name with Ctrl + D a few times and change every copy at once.
A short list of trusted extensions
Install extensions from the Extensions view (Ctrl + Shift + X). Before installing anything, check the publisher, the number of installs and when it was last updated. Each extension has an ID such as publisher.name; searching by ID avoids look-alike copies.
| Extension (ID) | Publisher | Why install it |
|---|---|---|
Live Preview (ms-vscode.live-server) | Microsoft | Runs a local server and previews your HTML pages, reloading as you edit. Better than opening files directly, because fetch() and modules need a server. |
Prettier – Code formatter (esbenp.prettier-vscode) | Prettier | Formats HTML, CSS, JavaScript, JSON and more in a consistent style, so you stop arguing about spaces and quotes. |
ESLint (dbaeumer.vscode-eslint) | Microsoft | Shows JavaScript problems as you type. Needs ESLint and a config file in your project, so add it when your JavaScript grows beyond small exercises. |
Error Lens (usernamehw.errorlens) | usernamehw | Shows error and warning messages inline at the end of the line, so you notice them immediately. |
Code Spell Checker (streetsidesoftware.code-spell-checker) | Street Side Software | Catches typos in text and code. Useful for UI copy, class names and comments. |
Python (ms-python.python) | Microsoft | Only if you write Python: running, debugging, IntelliSense and choosing an interpreter. |
PHP Intelephense (bmewburn.vscode-intelephense-client) | Ben Mewburn | Only if you write PHP: completion, go to definition and error checking for PHP files. |
That is it for most beginners. Add something only when you notice a specific problem it solves. Recent versions of VS Code also include an integrated browser that can open local HTML pages inside the editor, and Live Preview can be set to use it. Try it if you prefer to keep everything in one window.
Watch out: Extensions run code on your computer. Only install extensions from publishers you recognise, avoid ones with very few installs or no recent updates, and remove extensions you no longer use.
Settings that make a difference
Open the settings file with the Command Palette: Preferences: Open User Settings (JSON). Here is a sensible starting point for web work. Each line is explained below.
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2,
"editor.linkedEditing": true,
"editor.wordWrap": "on",
"editor.minimap.enabled": false,
"editor.fontSize": 15,
"files.autoSave": "onFocusChange",
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"[python]": {
"editor.tabSize": 4
}
}editor.formatOnSavewith aeditor.defaultFormatter: code is tidied every time you save. Choose one formatter so tools do not compete.editor.tabSize: two spaces is common in front-end projects; Python’s convention is four, set here only for Python files.editor.linkedEditing: rename opening and closing HTML tags together.editor.wordWrap: long lines of text wrap instead of scrolling sideways, handy for HTML content.files.autoSave:"onFocusChange"saves when you click into another window, such as the browser. Other values are"off","afterDelay"and"onWindowChange".files.trimTrailingWhitespaceandfiles.insertFinalNewline: small clean-ups that keep Git diffs tidy.
Tip: The [python] block shows how to override settings for one language. Python formatting is not built in: if you want it, install a dedicated Python formatter extension and set its ID as editor.defaultFormatter inside that block.
For a team project, put shared settings in a .vscode/settings.json file inside the project. Everyone who opens the folder then gets the same formatting rules, and you can commit the file with Git. See our Git basics guide.
Use Profiles to keep things separate
VS Code Profiles let you keep different sets of extensions and settings and switch between them. For example, a “Web” profile with Prettier and Live Preview, and a “Python” profile with the Python extension. Each profile loads only the extensions it needs, which keeps the editor fast. Create one from the Manage (gear) menu › Profiles.
A quick workflow for a static site
- Create a folder, for example
chennai-bakery, and open it with File › Open Folder. Always open the folder, not a single file, so search, Git and Live Preview work properly. - Create
index.html, type!and press Tab. Emmet writes the HTML skeleton. - Create
css/style.cssand link it. Use Emmet in CSS too:m10becomesmargin: 10px;. - Open the preview from the editor’s preview button (Live Preview) and place it beside your code.
- Open the terminal with Ctrl + ` and run
git init. Commit after each finished section. - Before you finish, open the Problems panel (Ctrl + Shift + M) and fix what it lists.
If you are new to HTML, follow along with HTML Editors and Your First Page, then practise layouts from our CSS track. The same editor works for every track on this site: JavaScript, PHP, Python and React with Vite, where the integrated terminal runs the development server.
Common problems and fixes
| Problem | Likely cause | Fix |
|---|---|---|
| Format on save does nothing | No default formatter set for that language | Run Format Document once; VS Code asks you to choose a formatter |
| Code jumps around differently on each save | Two formatters or extensions competing | Set one editor.defaultFormatter and disable the other |
| Emmet does not expand | File is not recognised as HTML, or the language mode is wrong | Check the language in the status bar (bottom right) |
fetch() fails when opening the HTML file directly | Page is opened with file:// | Use Live Preview or another local server |
| Editor feels slow | Too many extensions | Disable unused extensions or use a separate profile |
Final VS Code setup checklist
- You open project folders, not single files.
- You know the Command Palette, Quick Open and multi-cursor shortcuts.
- One formatter is set as default, and format on save is on.
- Linked editing is on for HTML.
- You have a small set of extensions from known publishers, and nothing you do not use.
- Shared project settings live in
.vscode/settings.json. - Settings Sync is on if you use more than one computer.
A good VS Code setup is one you stop noticing. Once yours is ready, spend your energy on the skills in the front-end developer roadmap or your first week of Python.
Frequently asked questions
Is VS Code free for commercial work?
Yes. Visual Studio Code is free to download and use, including for work projects. Most extensions on the Marketplace are free too.
Do I still need the Live Server extension?
You need some local server for pages that use fetch or JavaScript modules. Microsoft’s Live Preview extension does this and reloads as you edit. For plain HTML and CSS, the built-in integrated browser in recent versions can also preview pages.
Why does Prettier not format my file on save?
Usually because Prettier is not set as the default formatter for that language, or format on save is off. Set editor.defaultFormatter to esbenp.prettier-vscode and editor.formatOnSave to true.
How many extensions should I install?
As few as possible. Start with the built-in features and add an extension only when it solves a specific problem. Fewer extensions mean a faster editor and fewer conflicts.
How do I keep the same VS Code setup on two laptops?
Turn on Settings Sync from the Accounts menu and sign in. Your settings, keyboard shortcuts, extensions and profiles are synchronised across machines.
