Disable Auto Formatting on Save in VSCode

When working with code in Visual Studio Code, auto-formatting on save can be problematic—especially when you need to make minimal changes to files without triggering widespread formatting modifications. This article provides comprehensive solutions to disable all auto-formatting behaviors in VSCode.

Problem Statement

Auto-formatting on save can interfere with code review processes by making it difficult to identify actual changes. Common issues include:

• Entire files being reformatted when only minor edits are needed
• Trailing whitespace removal that creates unnecessary diffs
• Conflicts between multiple formatters or extensions
• Workspace settings overriding user preferences

Primary Solutions

Disable Format on Save Globally

The most direct approach is to disable format-on-save in your user settings:

1. Open the Command Palette (Ctrl+Shift+P on Windows/Linux, Cmd+Shift+P on Mac)
2. Search for "Preferences: Open User Settings (JSON)"
3. Add or modify the following setting:

{
  "editor.formatOnSave": false
}

WARNING

Ensure you're editing User Settings rather than Workspace Settings, as workspace settings can override your user preferences.

Disable Language-Specific Formatting

For more granular control, you can disable formatting for specific file types while keeping it enabled for others:

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.formatOnSave": false
  },
  "[json]": {
    "editor.formatOnSave": false
  }
}

Disable Additional Formatting Behaviors

Beyond the main format-on-save setting, several other options can trigger formatting:

{
  "editor.trimAutoWhitespace": false,
  "files.trimTrailingWhitespace": false,
  "files.trimFinalNewlines": false,
  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": false
  }
}

Extension-Specific Solutions

Prettier Configuration

If using Prettier, ensure it's properly disabled:

{
  "prettier.disableLanguages": ["javascript", "typescript", "json", "html", "css"],
  "[javascript]": {
    "editor.defaultFormatter": null
  }
}

Other Formatters

For other formatters like JS-CSS-HTML Formatter or ESLint:

1. Check extension-specific settings
2. Disable format-on-save within the extension's configuration
3. Consider removing conflicting formatters if not needed

Configuring formatter extensions

Many formatting extensions have their own settings that override VSCode's native options. Check each extension's documentation for specific disable instructions.

Keyboard Shortcut Solutions

Save Without Formatting

VSCode includes a built-in "Save without Formatting" command:

• Windows/Linux: Ctrl+K, S
• Mac: Cmd+K, S

Rebind Save Shortcut

For a permanent solution, rebind your save shortcut:

1. Open Keyboard Shortcuts (Ctrl+Shift+P → "Preferences: Open Keyboard Shortcuts")
2. Search for "Save without Formatting"
3. Click the edit icon and set your preferred shortcut (e.g., Ctrl+S)
4. Optionally, rebind the regular "Save" command to a different shortcut

keybindings.json

// Add to your keybindings.json file
{
  "key": "ctrl+s",
  "command": "workbench.action.files.saveWithoutFormatting",
  "when": "editorTextFocus"
}

Troubleshooting Common Issues

Conflicting Settings

If formatting persists after disabling the main setting:

1. Check for workspace-specific settings in .vscode/settings.json
2. Verify that no extensions are adding their own formatting rules
3. Look for language-specific settings that might override global settings

Extension Conflicts

Some extensions automatically format code regardless of VSCode settings:

1. Disable suspicious extensions one by one to identify the culprit
2. Check extension settings for format-on-save options
3. Consider using only one formatter extension to avoid conflicts

EditorConfig Interference

The EditorConfig extension may enforce formatting rules:

1. Check for .editorconfig files in your project
2. Disable or configure the EditorConfig extension if needed

Quick Workarounds

For temporary solutions when editing others' code:

1. Use "Save without Formatting" (Ctrl+K, S)
2. Change the document language to "Plain Text" (loses syntax highlighting)
3. Use format toggle extensions to temporarily disable formatting

Best Practices

1. Consistent Settings: Standardize formatting settings across your team
2. Version Control: Exclude formatting-only changes in separate commits
3. Documentation: Document your team's formatting preferences and VSCode settings
4. Selective Formatting: Use format-on-save selectively rather than universally

TIP

For team projects, consider committing a .vscode/settings.json file with agreed-upon formatting rules to ensure consistency across all developers.

By implementing these solutions, you can regain control over when and how your code is formatted, making your development workflow more intentional and your version control history more meaningful.