Configure VS code to only format changed lines

I use code formatters and linters as much as possible when developing. I love the feedback, and I especially love when saving a file if it can auto format.

I used to have my VS Code set up to format the entire file, but I’ve recently updated my setup to only format the changes I’ve made. I really like this change so I wanted to share.

When I talk about auto formatting on save, let me give you an example. In CSS if I were to write;

.class-one, .class-two, .class-three { color: pink; }

On save, my VS Code will change that to;

.class-one,
.class-two,
.class-three {
  color: pink;
}

This is great because it enforces a consistent style, without me having to remember to fix specific issues with whitespace. Allowing me to concentrate on the specifics of the code I want to change.

Issues with formatting the entire file

There are two main issues I’ve come across with formatting an entire file at once.

It can make for a massive set of changes. You might have changed one small line but if something has changed across hundreds of other lines then your version control diff is going to look massive.

I usually get around this by having a separate body of work to format the code. Once that work is complete, then make the small change.

The second issue is when you actually don’t want a part of the file to get formatted. Whilst rare, this came up recently when I was editing something on this very site!

We use Jekyll and SASS. There is a convention with Jekyll and SASS that you have to have some frontmatter at the top of the file. The problem is the formatter, seeing only SASS, will look at the frontmatter, not know what to do and smush the lines together. Once smushed (the technical term), Jekyll no longer knows this as a file it should care about.

I was editing a small line of SASS in the middle of the file, and the auto formatter was breaking something at the very start of the file.

This won’t do.

There may have been something I could have done with the specific SASS formatter, to see if there was a way I could say “Ignore frontmatter” (this has been an ongoing issue) but that seemed too specific and the wider issue is that my formatter was making changes to lines of code I’m not currently thinking about.

Updating VS Code to only format changes

In your settings (on a Mac I press CMD + ,, but you can also find it in your toolbar), search for “format on save” and you’ll find a couple of options, including “Editor: Format on save mode”.

The default is “file”, which means if format on save is on, format the entire file you’re saving.

The other two options are “modifications” and “modificationsIfAvailable”. Both will only save modifications you’ve made.

The difference is that because under the hood they need to check version control to know what changes are different, if you’re working on a project without version control it won’t know what to do. “modificationsIfAvailable” will fall back to formatting the entire file, “modifications” will just not do anything in this case.

If you’re the type of person who prefers to edit settings.json directly.

"editor.formatOnSaveMode": "modifications",

I’ve created a short video to show this setting more visually.