Commit VS Code config to the repo

A teammate opens the repo in an editor that formats on save with its own defaults. They save, and the diff comes back as two hundred lines of whitespace: their formatter, indentation, and import order all disagree with the project’s, burying the actual change. The fix isn’t everyone disabling personal settings; it’s a few files the repo commits so the editor follows the project’s rules.

So far you’ve worked in the browser’s TS Playground; from the next lesson on, you’ll write and run .ts files locally. This lesson sets up VS Code and the team-shared config it reads, so that work opens against a known editor.

Why VS Code

This course uses VS Code: it has the broadest extension support, and the stack’s official LSP s target it first, including Biome, Tailwind, and TypeScript. It’s also free, cross-platform, and a one-click install. Three alternatives are worth naming, each with the one reason to pass it over:

• Cursor is built around AI-first workflows; this course teaches durable engineering instead, because advice on directing AI dates faster than the course can ship.
• Zed is fast, but its LSP support for this stack lags.
• Neovim rewards deep keyboard fluency that costs most devs more time than it returns.

Download VS Code

code.visualstudio.com

Official installers for macOS, Windows, and Linux.

The minimum-viable extension set

Themes, icon packs, and vim modes are your own business. What follows is the set the repo needs every teammate to share: six extensions, each earning its place.

Biome

biomejs.biome is the lint-and-format LSP for JS, TS, and JSON. It installs the project’s formatter, so saving a file runs that formatter, not the editor’s default.

Tailwind CSS IntelliSense

bradlc.vscode-tailwindcss gives class-name autocomplete, a hover preview of the generated CSS, and design-system linting. It pays off from the React unit onward.

EditorConfig for VS Code

EditorConfig.EditorConfig reads .editorconfig, so teammates on IntelliJ, Neovim, or any other editor honor the same indent, line-ending, and final-newline rules.

GitLens

eamodio.gitlens shows inline blame under the cursor, plus file history and side-by-side compare. Review starts with “who wrote this and why,” and GitLens puts that one click away.

Error Lens

usernamehw.errorlens pulls TypeScript and Biome diagnostics inline, beside the line that triggered them, so you catch what’s wrong on save instead of hovering for it.

Pretty TypeScript Errors

yoavbls.pretty-ts-errors reshapes long structural type errors into something you can read in one pass. It earns its weight the first time a Drizzle or Zod inferred type expands into a wall of brackets.

Install each from its marketplace link, or run code --install-extension <id> in a terminal. The extensions.json file in the next section makes it a one-click prompt on every clone, the last time you install them by hand.

GitLens is the one whose payoff isn’t obvious from a setting, so the tour below is worth watching.

Watch video

GitKraken’s 9-minute tour of GitLens, covering inline blame, CodeLens, and visual file history. You can ignore the Pro upsell near the end.

The three repo-owned files

Three files live in the repo so every teammate’s editor behaves the same way: .editorconfig at the root for any editor that honors the spec, .vscode/extensions.json to prompt VS Code to install what the project needs, and .vscode/settings.json for the workspace-only overrides that pin the formatter, the on-save actions, and the TypeScript SDK. Personal preferences such as theme, font, and keybindings never go here. Create them in order:

1. .editorconfig at the repo root. Six rules that every modern editor honors, so the basics never depend on whose machine you’re on.

   .editorconfig

   root = true
   
   [*]
   indent_style = space
   indent_size = 2
   end_of_line = lf
   charset = utf-8
   insert_final_newline = true
   trim_trailing_whitespace = true

   Pinning end_of_line = lf keeps a Windows teammate from introducing CRLF. The IntelliJ family and Neovim honor these natively; VS Code does through the EditorConfig extension. Biome reads .editorconfig for indent and line endings too, so you keep one source of truth with nothing to sync once biome.json arrives later in the course.

2. .vscode/extensions.json with the recommendation list. The marketplace IDs of the six extensions from the previous section, in the same order.

   .vscode/extensions.json

   {
     "recommendations": [
       "biomejs.biome",
       "bradlc.vscode-tailwindcss",
       "EditorConfig.EditorConfig",
       "eamodio.gitlens",
       "usernamehw.errorlens",
       "yoavbls.pretty-ts-errors"
     ]
   }

   When a teammate clones the repo and opens the folder, VS Code prompts them to install any of the six they’re missing. It asks every time, so “I forgot to install Biome” is hard to leave unfixed.

3. .vscode/settings.json with the workspace overrides. The settings the project needs, scoped to this workspace only. Nothing personal goes here.

   .vscode/settings.json

   {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "biomejs.biome",
     "[css]": {
       "editor.defaultFormatter": "biomejs.biome"
     },
     "editor.codeActionsOnSave": {
       "source.fixAll.biome": "explicit",
       "source.organizeImports.biome": "explicit"
     },
     "typescript.tsdk": "node_modules/typescript/lib"
   }

   editor.formatOnSave and editor.defaultFormatter route every save through Biome instead of each teammate’s personal default. The [css] override is for the Tailwind v4 code that arrives later; it does nothing yet, but pinning it now settles it for good.

   editor.codeActionsOnSave runs two Biome actions on save: source.fixAll.biome applies safe auto-fixes, and source.organizeImports.biome sorts and dedupes imports. Both take the "explicit" string, mandatory since VS Code 1.83; the older true and false stopped working, so any tutorial still showing them is out of date.

   typescript.tsdk points the editor at the project’s own tsc in node_modules. Opening a TS project shows a “Use Workspace Version” toast asking whether to switch from the editor’s bundled TypeScript to the one the project pins; this answers it in advance, so the editor and your build use the same compiler. The path doesn’t exist until you install the dependency in a later lesson, but pinning it now is harmless and the editor picks it up the moment it lands.

Tip

Workspace vs User. Personal preferences, like theme, font, and keybindings, belong in User settings, never in .vscode/settings.json (Cmd/Ctrl + ,, then the User tab). The workspace file is a team artifact: it ships in the repo, goes through code review, and applies to every teammate. The User file lives in your profile, where nobody else sees it.

External resources

The canonical source on each topic this lesson touched.

Biome — VS Code extension docs

biomejs.dev

Reference for every Biome-related setting key the editor accepts, including the canonical source.fixAll.biome action ID.

EditorConfig.org

editorconfig.org

The spec, the property list, and the editor support matrix for the .editorconfig file.

VS Code workspace settings

code.visualstudio.com

Microsoft's reference on the User-vs-Workspace boundary if you want the canonical source.