---
title: "VS Code"
description: "Connect Visual Studio Code to WSL, install the extensions this stack needs, and format with ESLint instead of Prettier."
canonical_url: "https://vinicunca.dev/windows-dev/guide/vscode"
---
# VS Code

> Connect Visual Studio Code to WSL, install the extensions this stack needs, and format with ESLint instead of Prettier.

VS Code's UI stays on Windows. The [WSL extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) runs a small server inside Ubuntu so the integrated terminal, language tools and file watchers use your Linux Git, Node and pnpm.

## Install VS Code

From PowerShell (administrator not required):

```powershell
winget install --id Microsoft.VisualStudioCode -e
```

Or download the [stable installer](https://code.visualstudio.com/). Use Stable, not Insiders, unless you already know you want the daily build (`code-insiders`).

## WSL extension

In VS Code, install **WSL** (`ms-vscode-remote.remote-wsl`). It used to be named **Remote - WSL**; the marketplace ID did not change.

Then, from a WSL terminal in your project:

```bash
cd ~/code/my-project
code .
```

The first launch downloads the VS Code Server into the distribution. The status bar (bottom left) should read **WSL: Ubuntu**. After that, `code` is on your Linux `PATH`.

> [!NOTE]
> 
> Extensions that talk to language tools (ESLint, Vue, UnoCSS) must be installed **in the WSL window**, under **WSL: Ubuntu – Installed**. UI-only extensions (themes, icons) can stay on Windows. [Managing extensions](https://code.visualstudio.com/docs/remote/wsl#_managing-extensions) explains the split.

You can also open a folder from VS Code with **WSL: Connect to WSL** in the Command Palette (`F1`).

## Default terminal profile

Set zsh as the integrated terminal **only after you are connected to WSL**. A Windows-local window has no zsh profile.

### Confirm you are in WSL

The status bar shows **WSL: Ubuntu**. If it does not, run `code .` from Ubuntu first.

### Select the default profile

`Ctrl` + `Shift` + `P` → **Terminal: Select Default Profile** → **zsh**.

![Command Palette filtered to Terminal: Select Default Profile](https://vinicunca.dev/images/command-palette.jpg)

![zsh selected as the WSL terminal profile](https://vinicunca.dev/images/zsh-profile.jpg)

New terminals in this remote window now start zsh with your Oh My Zsh / fnm / pnpm setup.

## ESLint, not Prettier

Vinicunca projects lint **and** format with [`@vinicunca/eslint-config`](https://vinicunca.dev/eslint/getting-started). Do not install the Prettier extension; it fights ESLint Stylistic on save.

Install [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) in the WSL window, then put this in the **workspace** `.vscode/settings.json` (or your WSL user `settings.json`):

```jsonc [.vscode/settings.json]
{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  }
}
```

The full `eslint.rules.customizations` and `eslint.validate` lists live on the [ESLint getting started](https://vinicunca.dev/eslint/getting-started#vs-code) page — copy them so stylistic rules still auto-fix without noisy squiggles.

## Recommended extensions

Install these **in WSL** (Extensions view → search → **Install in WSL: Ubuntu**, or `code --install-extension <id>` from an Ubuntu terminal while a WSL window is open):

| Extension | ID | Why |
| --- | --- | --- |
| [WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) | `ms-vscode-remote.remote-wsl` | Remote window (install on Windows) |
| [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) | `dbaeumer.vscode-eslint` | Lint and format on save |
| [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) | `Vue.volar` | Vue 3 and `.vue` SFCs |
| [UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) | `antfu.unocss` | Class autocomplete and highlights |
| [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) | `usernamehw.errorlens` | Diagnostics inline |
| [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) | `eamodio.gitlens` | Blame and history |
| [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) | `EditorConfig.EditorConfig` | Honors `.editorconfig` |

```bash
code --install-extension dbaeumer.vscode-eslint
code --install-extension Vue.volar
code --install-extension antfu.unocss
code --install-extension usernamehw.errorlens
code --install-extension eamodio.gitlens
code --install-extension EditorConfig.EditorConfig
```

Skip Prettier, Live Server, Git History and leftover "extension packs". Vite / Nuxt already provide the dev server; GitLens covers history; ESLint covers formatting.

> [!TIP]
> See: /windows-dev/extras
> 
> You're done with the setup steps. Extras covers [commit message conventions](https://vinicunca.dev/windows-dev/extras/git-commits) and [troubleshooting](https://vinicunca.dev/windows-dev/extras/troubleshooting).

---

- [Developing in WSL](https://code.visualstudio.com/docs/remote/wsl)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.