EditorConfig & VS Code Settings

Ensure consistent editor behavior across your team with EditorConfig, VS Code workspace settings, and recommended extensions.

Recipe

Quick-reference recipe card — copy-paste ready.

# Create the three config files
touch .editorconfig
mkdir -p .vscode
touch .vscode/settings.json
touch .vscode/extensions.json

When to reach for this: Any project with multiple contributors, especially when team members use different editors or VS Code configurations.

Working Example

# .editorconfig
root = true
 
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
 
[*.md]
trim_trailing_whitespace = false
 
[Makefile]
indent_style = tab

// .vscode/settings.json
{
  // Formatting
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
 
  // Language-specific formatters
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
 
  // ESLint
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
 
  // Files
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.exclude": {
    "**/.next": true,
    "**/node_modules": true,
    "**/out": true
  },
 
  // TypeScript
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.suggest.autoImports": true,
  "typescript.tsdk": "node_modules/typescript/lib"
}

// .vscode/extensions.json
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss",
    "formulahendry.auto-rename-tag",
    "yoavbls.pretty-ts-errors",
    "streetsidesoftware.code-spell-checker"
  ]
}

What this demonstrates:

.editorconfig ensures basic editor settings (indent, line endings) work across all editors
.vscode/settings.json configures format-on-save, ESLint integration, and TypeScript preferences
.vscode/extensions.json prompts team members to install recommended extensions

Deep Dive

How It Works

EditorConfig is a standard supported by most editors (VS Code, IntelliJ, Vim, etc.) without plugins (VS Code needs the EditorConfig.EditorConfig extension)
.vscode/settings.json in the project root acts as workspace settings, overriding user settings for this project
.vscode/extensions.json triggers a "recommended extensions" prompt when team members open the project
Format-on-save runs the configured formatter whenever you save a file
source.fixAll.eslint runs ESLint auto-fix on save, fixing linting issues alongside formatting

Variations

For Biome instead of Prettier + ESLint:

// .vscode/settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

// .vscode/extensions.json
{
  "recommendations": [
    "biomejs.biome",
    "bradlc.vscode-tailwindcss"
  ]
}

Disabling format-on-save for specific languages:

{
  "[markdown]": {
    "editor.formatOnSave": false
  }
}

EditorConfig options reference:

Option	Values	What It Does
`indent_style`	`space` or `tab`	Indentation type
`indent_size`	number	Spaces per indent level
`end_of_line`	`lf` or `crlf`	Line ending style
`charset`	`utf-8`	File encoding
`trim_trailing_whitespace`	`true` or `false`	Remove trailing spaces on save
`insert_final_newline`	`true` or `false`	Ensure file ends with newline

TypeScript Notes

// VS Code settings that improve TypeScript DX:
// - "typescript.preferences.importModuleSpecifier": "non-relative"
//   → Uses path aliases (@/components) instead of ../../../
//
// - "typescript.suggest.autoImports": true
//   → Auto-import suggestions as you type
//
// - "typescript.tsdk": "node_modules/typescript/lib"
//   → Uses the project's TypeScript version, not VS Code's built-in

Gotchas

Things that will bite you. Each gotcha includes what goes wrong, why it happens, and the fix.

EditorConfig vs Prettier conflicts — EditorConfig sets indent_size = 4 but Prettier uses tabWidth: 2. Prettier wins for formatted files, but new files created by the editor use EditorConfig's value. Fix: Keep EditorConfig and Prettier settings in sync.
.vscode/ in .gitignore — Some templates add .vscode/ to .gitignore. Fix: Commit .vscode/settings.json and .vscode/extensions.json for team consistency. Add .vscode/*.code-workspace and .vscode/launch.json to .gitignore instead (those are personal).
Format-on-save not working — Multiple formatters are installed and VS Code does not know which one to use. Fix: Set "editor.defaultFormatter" both globally and per language. VS Code prompts you to choose when ambiguous.
ESLint fix-on-save conflicts with format-on-save — Both run on save and can produce competing changes. Fix: Use eslint-config-prettier to disable ESLint formatting rules, so ESLint only fixes code quality issues on save.

Alternatives

Other ways to solve the same problem — and when each is the better choice.

Alternative	Use When	Don't Use When
Only `.editorconfig`	Team uses mixed editors (VS Code, IntelliJ, Vim)	You want format-on-save and extension recommendations
Only `.vscode/settings.json`	Everyone uses VS Code	Team members use other editors
`devcontainers`	You want a fully reproducible dev environment including extensions	Overhead of container setup is too high

FAQs

What is the difference between EditorConfig and Prettier?

EditorConfig sets basic editor behavior (indent style, line endings, trailing whitespace) across all editors.
Prettier is a code formatter that reprints entire files with consistent style.
EditorConfig affects new keystrokes; Prettier reformats existing code.
Use both, and keep their settings in sync.

Should I commit .vscode/settings.json to the repo?

Yes. Workspace settings ensure consistent editor behavior for the team.
Commit settings.json and extensions.json.
Add personal files like launch.json and *.code-workspace to .gitignore.

What does source.fixAll.eslint do on save?

It runs ESLint auto-fix on every file save.
Combined with format-on-save, it fixes both code quality issues and formatting.
Use eslint-config-prettier to prevent the two from conflicting.

Gotcha: What happens if EditorConfig and Prettier use different indent sizes?

Prettier wins for files it formats (it ignores EditorConfig).
But new files created by the editor use EditorConfig's value before Prettier runs.
Keep indent_size in .editorconfig and tabWidth in .prettierrc identical.

How do I disable format-on-save for markdown files?

{
  "[markdown]": {
    "editor.formatOnSave": false
  }
}

What VS Code extensions should I recommend for a Next.js project?

esbenp.prettier-vscode -- Prettier formatter
dbaeumer.vscode-eslint -- ESLint integration
bradlc.vscode-tailwindcss -- Tailwind IntelliSense
yoavbls.pretty-ts-errors -- Readable TypeScript errors

How does .vscode/extensions.json work?

When team members open the project, VS Code prompts them to install recommended extensions.
It does not force installation, only suggests.
List extensions by their marketplace ID in the recommendations array.

What does typescript.tsdk do in VS Code settings?

{ "typescript.tsdk": "node_modules/typescript/lib" }

It tells VS Code to use the project's TypeScript version instead of its built-in version.
This ensures type checking matches what tsc produces in CI.

Gotcha: Why does format-on-save conflict with ESLint fix-on-save?

Both run on save and can produce competing changes.
Prettier formats the file, then ESLint tries to re-format it differently.
Use eslint-config-prettier to disable ESLint formatting rules so ESLint only fixes code quality issues.

Does EditorConfig work in editors other than VS Code?

Yes. EditorConfig is supported by IntelliJ, Vim, Sublime Text, and most modern editors.
VS Code requires the EditorConfig.EditorConfig extension.
This makes it ideal for teams with mixed editor preferences.

How do I configure TypeScript auto-import preferences in VS Code?

{
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.suggest.autoImports": true
}

"non-relative" uses path aliases (@/components) instead of ../../../.
autoImports enables suggestions as you type.

What EditorConfig options are most important?

Option	Recommended
`indent_style`	`space`
`indent_size`	`2`
`end_of_line`	`lf`
`insert_final_newline`	`true`
`trim_trailing_whitespace`	`true`

Prettier Setup — format-on-save needs Prettier configured
ESLint Setup for Next.js — ESLint fix-on-save configuration
ESLint + Prettier Integration — avoid conflicts with format-on-save
Husky & lint-staged — catches what format-on-save misses