VS Code Format on Save Not Working

Introduction

Format on save automatically cleans up your code when you save a file. It's a productivity booster that keeps your code consistently formatted. When it stops working, you have to manually format or deal with inconsistent code style. This guide covers the most common reasons format on save fails.

Symptoms

• Code is not formatted when you save
• Formatter runs but code still looks wrong
• Only some file types get formatted
• Format on save works sometimes but not always
• Error messages appear on save
• Formatting conflicts with linting rules

Understanding Format on Save

VS Code uses a formatter extension (like Prettier, Black, or built-in formatters) to format your code. Format on save triggers this formatter whenever you save. The process involves:

1. 1.Save command triggered
2. 2.VS Code calls the formatter
3. 3.Formatter modifies the document
4. 4.VS Code saves the formatted document

Step-by-Step Fixes

Step 1: Enable Format on Save

The basic setting must be enabled:

// settings.json
"editor.formatOnSave": true

Check if it's overridden in workspace settings:

// .vscode/settings.json - Ensure this is true
"editor.formatOnSave": true

Step 2: Select a Default Formatter

VS Code needs to know which formatter to use:

// settings.json
"editor.defaultFormatter": "esbenp.prettier-vscode"

For language-specific formatters:

// settings.json
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter"
},
"[go]": {
    "editor.defaultFormatter": "golang.go"
},
"[rust]": {
    "editor.defaultFormatter": "rust-lang.rust-analyzer"
}

Step 3: Verify Formatter Extension is Installed

Check your installed formatters:

1. 1.Open Extensions (Ctrl+Shift+X)
2. 2.Search for "formatter" or "prettier"
3. 3.Ensure a formatter extension is installed and enabled

Common formatter extensions: - Prettier: esbenp.prettier-vscode - Black: ms-python.black-formatter - Go: golang.go (built-in formatter) - Rust Analyzer: rust-lang.rust-analyzer - C/C++: ms-vscode.cpptools

Step 4: Check Formatter Extension Status

The formatter must be active:

Run this command: `` Developer: Show Running Extensions

Find your formatter extension. If it shows errors or isn't listed:

1. 1.Disable and re-enable the extension
2. 2.Check the Output panel for the extension
3. 3.Restart VS Code

Step 5: Check for Multiple Formatters

Multiple formatter extensions can conflict:

// settings.json - Explicitly set one formatter per language
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

If you have multiple formatters installed, VS Code may not know which to use. Check:

1. 1.Open Extensions
2. 2.List all formatter-type extensions
3. 3.Disable extras you don't need
4. 4.Configure the remaining one explicitly

Step 6: Configure Prettier Settings

If using Prettier, check its configuration:

// settings.json
"prettier.requireConfig": true,
"prettier.useEditorConfig": true,
"prettier.configPath": ""

Check for Prettier config file in your project:

// .prettierrc
{
    "semi": true,
    "singleQuote": false,
    "tabWidth": 4,
    "printWidth": 80
}

Or use EditorConfig:

```ini # .editorconfig root = true

[*] indent_style = space indent_size = 4 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true max_line_length = 80 ```

Step 7: Fix Formatter Execution Errors

If the formatter fails, check its output:

1. 1.Open Output panel: Ctrl+Shift+U
2. 2.Select your formatter from the dropdown (e.g., "Prettier")
3. 3.Look for error messages

Common errors:

Prettier can't parse file: `` Error: Cannot parse file - Syntax error

Fix syntax errors in your code first.

Formatter not found: `` Error: prettier not found in PATH

Install the formatter CLI:

```bash # For Prettier npm install -g prettier # Or locally npm install prettier --save-dev

# For Python Black pip install black ```

Config file not found: `` Error: Cannot find module './.prettierrc'

Create the config file or set prettier.requireConfig: false.

Step 8: Handle Language-Specific Issues

JavaScript/TypeScript:

// settings.json
"[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Python:

// settings.json
"[python]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "ms-python.black-formatter"
},
"python.formatting.provider": "none",  // Use the extension instead
"black-formatter.args": ["--line-length=88"]

Go:

// settings.json
"[go]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "golang.go"
},
"go.formatTool": "gofmt"  // Options: gofmt, goimports, goreturns

Rust:

// settings.json
"[rust]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "rust-lang.rust-analyzer"
},
"rust-analyzer.rustfmt.extraArgs": ["--edition=2021"]

Step 9: Handle Format on Save Mode

Control when formatting happens:

// settings.json
"editor.formatOnSaveMode": "file"

Options: - "file": Format the entire file - "modifications": Format only modified lines - "modificationsIfAvailable": Format modifications if supported, otherwise full file

Step 10: Fix ESLint/Prettier Conflicts

ESLint and Prettier often conflict:

// settings.json
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
]

Install eslint-config-prettier to disable conflicting ESLint rules:

npm install eslint-config-prettier --save-dev

In .eslintrc:

{
    "extends": ["prettier"]
}

Step 11: Handle Organize Imports

Organize imports on save can conflict with formatting:

// settings.json
"editor.codeActionsOnSave": {
    "source.organizeImports": "explicit",
    "source.fixAll": "explicit"
},
"editor.formatOnSave": true

1. 1.Order of operations:
2. 2.Code actions run (organize imports, fix lint errors)
3. 3.Formatter runs
4. 4.File is saved

Step 12: Check for File Exclusions

Some files may be excluded from formatting:

// settings.json - Check these
"editor.formatOnSave": true,
"files.exclude": {}

There's no built-in format exclusion, but some formatters have their own:

// settings.json - Prettier ignore
"prettier.ignorePath": ".prettierignore"

Create .prettierignore:

node_modules
dist
build
*.min.js

Step 13: Handle Large Files

Large files may timeout formatting:

// settings.json
"files.maxMemoryForLargeFilesMB": 4096,
"editor.formatOnSaveTimeout": 3000

Step 14: Test Formatter Manually

Test the formatter works:

Format Document

Or Shift+Alt+F (Windows/Linux) / Shift+Option+F (Mac)

If manual formatting works but format on save doesn't, check settings order.

Verification

Test format on save:

1. 1.Create a test file with messy formatting
2. 2.Save the file (Ctrl+S)
3. 3.Check if formatting changed
4. 4.Check Output panel for formatter messages

Example test:

// Messy code - should be formatted on save
function test(  x,y  ){
return   {x,y}  ;
}

After format on save should become:

function test(x, y) {
    return { x, y };
}

Related Issues

• VS Code Auto Save Not Working
• VS Code ESLint Not Working
• VS Code Prettier Not Working