Disabling All Auto Formatting on Save in VS Code: A Comprehensive Guide

Understanding the Root Cause and Impact of the Issue

In collaborative development environments, developers often need to edit others' code files, especially making small changes to large files. However, Visual Studio Code's default "format on save" feature automatically formats the entire file upon saving, including removing trailing whitespace, which leads to numerous irrelevant changes in git commits and hampers code review efficiency. This problem is exacerbated when using extensions like Prettier or ESLint, as multiple formatting tools may interact and cause conflicts.

Common Configuration Attempts and Their Limitations

Users typically try to disable formatting by modifying the .vscode/settings.json file. For example, setting "editor.formatOnSave": false or using "prettier.disableLanguages". However, these methods may fail due to several reasons:

• Priority conflicts between extensions, such as ESLint overriding Prettier settings.
• Language-specific formatting configurations not being fully disabled, e.g., "javascript.format.enable": false only affects the built-in formatter and not extensions.
• Issues with setting file locations, where project settings might be overridden by user settings.

A typical configuration example to disable multiple formatting features is as follows:

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

These settings might still be ineffective in some cases, especially when multiple extensions are active simultaneously.

Optimal Solution: Rebinding the Save Shortcut

Based on the best answer, the most effective method is to bind the normal save shortcut (e.g., Ctrl + S or Cmd + S) to the "save without formatting" command. This avoids formatting interference while maintaining save functionality. The steps are as follows:

1. Open VS Code and press Ctrl + Shift + P (or Cmd + Shift + P on macOS) to open the command palette.
2. In the search bar, type Save without Formatting and select the command.
3. Right-click on the command and choose "Configure Keyboard Shortcut".
4. In the pop-up interface, press the desired shortcut key, such as Ctrl + S, and VS Code will rebind it to save without formatting.

This approach can also be manually implemented by editing the keybindings.json file, for example by adding the following line:

{
  "key": "ctrl+s",
  "command": "workbench.action.files.saveWithoutFormatting",
  "when": "editorTextFocus"
}

This method thoroughly resolves the formatting issue and ensures clean code submissions.

Additional Configuration Insights and Analysis

Beyond rebinding shortcuts, other supplementary solutions can be considered:

• Consistently configure "editor.formatOnSave": false in user settings to avoid project setting breakdowns. This can be done via the command Preferences: Open Settings (JSON).
• If using ESLint, ensure that "source.fixAll.eslint" in "editor.codeActionsOnSave" is set to false to prevent automatic formatting fixes on save.
• For projects with multiple formatting tools, consider using .prettierignore or .eslintignore to selectively disable formatting.

By combining these methods, developers can better control VS Code's formatting behavior, suitable for collaborative development and code management.

Conclusion and Practical Recommendations

In practice, avoiding unintended formatting changes is crucial for maintaining code clarity. Rebinding the save shortcut to save without formatting offers a simple yet effective solution. It is recommended that developers perform this configuration at the start of a project and use version control tools to manage setting files for team consistency. For complex projects, consider using command-line tools to execute formatting, avoiding editor automation interference. This approach enhances productivity and ensures high-quality code reviews.