The best VS Code extensions for web development are the few that fill real gaps: ESLint for catching JavaScript errors, Prettier for formatting, Live Server for auto-reloading pages, REST Client for sending HTTP requests and reading response headers, and Remote - SSH for editing files on a server. HTML, CSS, Emmet and Git support are already built in.
Most "top 28 extensions" lists pad themselves with plugins for features VS Code shipped years ago. This guide goes the other way: set up the editor properly, install a short list of extensions that earn their place, skip the ones you do not need, and then connect an AI assistant and MCP tools that can check a live website for you.
What VS Code is (and how it differs from Visual Studio)
Visual Studio Code is a free, cross-platform code editor from Microsoft. Its source is developed in the open as Code - OSS under the MIT license; the build Microsoft distributes ships under Microsoft's own license and connects to the Visual Studio Marketplace. Visual Studio, despite the name, is a separate full IDE focused on .NET, C# and C++.
| VS Code | Visual Studio | |
|---|---|---|
| Type | Extensible code editor | Full integrated development environment |
| Platforms | Windows, macOS, Linux | Windows (Visual Studio for Mac was retired in 2024) |
| Price | Free | Community edition free with license limits; Professional and Enterprise are paid |
| Typical use | Web development, scripting, config files, remote servers | .NET applications, Windows desktop apps, large C++ projects |
If you build websites, VS Code is the one you want.
How to set up VS Code for web development
1. Install the editor and the command-line launcher
Download it from the official VS Code download page or use a package manager:
# Windows
winget install -e --id Microsoft.VisualStudioCode
# macOS
brew install --cask visual-studio-code
# Debian / Ubuntu, after downloading the .deb
sudo apt install ./code_*.debOn Windows, tick "Add to PATH" in the installer. On macOS, open the Command Palette (Cmd+Shift+P) and run Shell Command: Install 'code' command in PATH. After that, code . opens the current folder as a project.
2. Install Node.js and Git
VS Code understands JavaScript out of the box, but it does not run it outside the browser. Install Node.js from nodejs.org, then confirm in the integrated terminal (Ctrl+`):
node -v
npm -v
git --versionThe Source Control view (Ctrl+Shift+G) uses the Git installed on your system, so on Windows install it from git-scm.com first.
3. Put sensible defaults in settings.json
Open the Command Palette and run Preferences: Open User Settings (JSON):
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2,
"editor.linkedEditing": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true
}For team projects, put shared settings in .vscode/settings.json and commit it, so everyone formats code the same way.
The best VS Code extensions for web development
Install from the Extensions view (Ctrl+Shift+X) or by ID from the terminal. Check the publisher and install count before you click Install; the Marketplace has look-alike copies of popular extensions.
| Extension | ID | What it does |
|---|---|---|
| ESLint | dbaeumer.vscode-eslint | Shows lint errors inline as you type |
| Prettier - Code formatter | esbenp.prettier-vscode | Consistent formatting for HTML, CSS, JS, JSON, Markdown |
| Live Server | ritwickdey.LiveServer | Local dev server with auto-reload on save |
| Live Preview | ms-vscode.live-server | Microsoft's in-editor page preview |
| REST Client | humao.rest-client | Sends HTTP requests from .http files, shows status, headers and body |
| Remote - SSH | ms-vscode-remote.remote-ssh | Opens folders and terminals on a remote server |
| EditorConfig | EditorConfig.EditorConfig | Applies a project's .editorconfig rules |
| GitLens | eamodio.gitlens | Blame annotations and richer Git history |
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension humao.rest-client
code --list-extensionsOne caveat about ESLint: the extension only displays results. ESLint itself is installed per project with npm and configured by the project's own config file.
What are the best VS Code extensions for HTML development?
Fewer than you think. Emmet is built in: in an .html file, type ! and accept the suggestion with Enter or Tab to get an HTML5 skeleton, or type ul>li*3 for a three-item list. Closing tags are inserted automatically, and "editor.linkedEditing": true renames the matching tag when you edit its partner. What HTML work actually needs from the Marketplace is a way to preview the page: Live Server if you want a real browser with auto-reload, Live Preview if you want the preview inside the editor. Opening the file directly from disk works for static markup but not for pages that call fetch(), because file:// URLs follow different security rules than a real HTTP server.
Extensions you no longer need
- Bracket Pair Colorizer — bracket pair colorization is built in and enabled by default.
- Auto Rename Tag — covered by
editor.linkedEditing. - Settings Sync — the editor has built-in Settings Sync, turned on from the Accounts icon.
- Auto Close Tag for HTML — closing tags are inserted natively.
Every extension runs code on your machine with your permissions, so a short list is also a security measure.
Check HTTP headers from the editor with REST Client
REST Client turns a plain text file into a repeatable set of HTTP checks. Create checks.http:
@host = https://example.com
### Home page
GET {{host}}/ HTTP/1.1
### Headers only
HEAD {{host}}/ HTTP/1.1
### Does http redirect to https?
GET http://example.com/ HTTP/1.1Click Send Request above any block and the response opens in a side tab with the status line, every header and the body. After a server config change this is the fastest way to confirm that Strict-Transport-Security, Cache-Control and Content-Security-Policy are actually sent. The ### lines separate requests, and the @host variable lets you switch between staging and production with one edit. For what each header means, see our guide to HTTP request and response headers. Commit the file and it doubles as a regression checklist.
Edit files on a server with Remote - SSH
Remote - SSH opens a server folder as if it were local; the file tree, search, terminal and most extensions run on the remote side. Define the host in ~/.ssh/config:
Host mysite
HostName 203.0.113.10
User deploy
IdentityFile ~/.ssh/id_ed25519Then run Remote-SSH: Connect to Host... from the Command Palette, pick mysite and open a folder such as /var/www/site. On first connect the editor installs its server component under ~/.vscode-server, which can be noticeable on a very small VPS. Use key-based login rather than passwords — our SSH key authentication guide walks through it. And treat live edits as emergency fixes only: anything not in Git will be overwritten by the next deploy.
Connect an AI assistant and MCP servers
GitHub Copilot is the integrated option and needs a GitHub account. To use another model with your own API key — DeepSeek, for example — install an extension that supports custom providers, such as Cline (saoudrizwan.claude-dev) or Continue (Continue.continue), choose the provider in its settings and paste the key. DeepSeek's API is OpenAI-compatible, so an "OpenAI Compatible" provider pointed at https://api.deepseek.com also works; see the DeepSeek API docs. Our article on getting and storing an API key covers why keys never belong in source code. If code must not leave your machine, run a model locally with Ollama and select Ollama as the provider.
MCP (Model Context Protocol) goes further: it gives the assistant tools rather than just a chat box. In VS Code, servers are declared in .vscode/mcp.json or added with the MCP: Add Server command:
{
"servers": {
"enterno": {
"type": "http",
"url": "<server URL from enterno.io/mcp>"
}
}
}Enterno.io runs an MCP server with HTTP, DNS, SSL and WHOIS tools, so the assistant can check a live site on request. The endpoint and authentication details are on the MCP server page, and step-by-step client setup is in how to give Claude and Cursor website diagnostic tools. Keep access keys out of any mcp.json you commit; VS Code can prompt for secrets through the inputs section.
How to check your site after editing it in VS Code
REST Client shows the response as your machine sees it, which can differ from what visitors and crawlers get because of local DNS caching, a hosts file entry or a corporate proxy. After deploying, check from outside:
- HTTP headers and availability check — status code, redirects and security headers as an external client receives them.
- SSL certificate check — after changing web server config or reissuing a certificate.
- Enterno.io MCP server — so the assistant in your editor can run these checks itself.
FAQ
What are the 10 best VS Code extensions?
There is no universal ten. For web work, ESLint, Prettier, Live Server, REST Client and Remote - SSH cover most needs; add EditorConfig, GitLens or Live Preview only if you will use them. Language-specific extensions (PHP, Python, Go) depend on your stack.
Do I need Node.js to write HTML and CSS in VS Code?
No. HTML, CSS and browser JavaScript run in the browser. Node.js is needed for running JavaScript outside the browser, npm packages, build tools and linters.
How do I run JavaScript in VS Code?
For browser code, include the script in an HTML page, open it with Live Server and read console.log output in the browser's DevTools (F12). For Node.js code, run node app.js in the terminal or press F5 to start it under the built-in debugger.
Is VS Code free for commercial use?
Yes. The editor is free for any use, including commercial work. Some extensions and AI services are paid separately.
Is Remote - SSH safe for production servers?
The connection is ordinary SSH. The risks are operational: password logins instead of keys, and changes that never make it into version control. Use keys and a non-root user.
