Vscode: Format on Save Mode : Modifications causes invalid indentation

[adnaanbheda]

• VSCode Version: v1.49.1
• OS Version: Windows 10 2004

Steps to Reproduce:

1. Change Format On Save Mode to modifications
2. Edit some code and save the file

Does this issue occur when all extensions are disabled?: Yes/No
Yes

[oclockvn]

in my case, the html block is moved to the left side

[jrieken]

/needsMoreInfo

Please update this issue after reading https://github.com/Microsoft/vscode/wiki/Submitting-Bugs-and-Suggestions#writing-good-bug-reports-and-feature-requests. Thanks.

[vscode-triage-bot]

Thanks for creating this issue! We figured it's missing some basic information or in some other way doesn't follow our issue reporting guidelines. Please take the time to review these and update the issue.

Happy Coding!

[tcelestino]

@jrieken, this is happens when editor.formatOnSaveMode is set as modifications. I've changed the settings to file format on save has worked again

[jrieken]

And what formatter extension do you use? and what language is this?

[tcelestino]

@jrieken I'm using Prettier. The language: Javascript (and Typescript).

My settings:

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

[vscode-triage-bot]

This issue is caused by an extension, please file it with the repository (or contact) the extension has linked in its overview in VS Code or the marketplace for VS Code. See also our issue reporting guidelines.

Happy Coding!

[jrieken]

Thanks for clarifying. Please file this issue against the prettier extensions, since its the extension that determines that changes, including indentation

[cp79shark]

@tcelestino I found it's because I'm using an old version of Prettier in my project (1.19.1). Updating to the latest 2.1.2 fixed the same issue with that setting.

[localjo]

I had a similar issue when using the new "modifications" option for Format On Save Mode with Prettier as the formatter. Modified lines were formatted incorrectly, specifically, I was seeing lines being indented way too far when modifying the inside of a block. They would be pushed to the right of the opening bracket.

If I would edit the contents of a block like this:

if (someCondition === true) {
  console.log('Condition is true!');
}

It would get formatted something like this:

if (someCondition === true) {
                              console.log('Condition is still true!');
                            }

It appears that the root of the issue for me was that older versions of Prettier would handle indentation incorrectly with rangeStart and rangeEnd. In most cases, the recommended fix is to upgrade Prettier in the project to the latest with something like npm install [email protected] --save-exact --save-dev or npm install prettier@latest --save-dev. In my case, I decided to use a global installation of [email protected] and set the Prettier Path setting in the Prettier plugin to the global Prettier path and that solved the problem.

TL;DR The VS Code "modifications" option for Format On Save Mode doesn't work with older versions of Prettier.