Difference between codeActionsOnSave and formatOnSave in VS Code

Question

Newer versions of VS code include a new codeActionsOnSave options. It is recommanded to setup Eslint for example. However I don't understand the difference with previously existing formatOnSave option, nor their relationship with the defaultFormater option, plugins like Prettier and ESLint, and VS Code default behavior.

"Fix" seems more complete, but disabling "format" will not always format my code on save. I also tend to have conflicts between Eslint and Prettier formatting...

Basically it is unclear to me how to set a proper VS Code formatting configuration, that respects project settings (TypeScript, Eslint, Prettier etc. that can be activated/deactivated depending on the project), due to a lack of understanding about the VS Code settings.

Answer 1

I'm trying to get my VS Code to run ESLint and Prettier together properly as well.

Then VSCode 1.44 (March 2020) would highlight another difference between codeActionsOnSave and formatOnSave:

Explicit ordering for editor.codeActionsOnSave

You can now set editor.codeActionsOnSave to an array of code actions to execute in order. You can use this to guarantee that a specific code action is always run before or after another one that may conflict with it

The following editor.codeActionsOnSave will always run Organize Imports followed by Fix All once organize imports finishes:

"editor.codeActionsOnSave": [
    "source.organizeImports",
    "source.fixAll"
]

---

But the main difference between codeActionsOnSave and formatOnSave remains that:

• the latter (formatOnSave) only formats code,
• while the former (codeActionsOnSave) can run one or several commands on the code, commands which might not be related to formatting.