What is the difference between formatOnSave and codeActionsOnSave?

Question

Yes, I am aware of this existing question with a near-identical title: Difference between codeActionsOnSave and formatOnSave in VS Code - but its title is misleading, the question is actually focused on an issue with ESLint and Prettier.

What is the difference between formatOnSave and codeActionsOnSave?

They appear to overlap, but neither setting is marked as deprecated. Is one newer than the other? Is one preferred over the other? Are they actually documented anywhere? What happens if I use a mixture of the two? All I can find on this is outdated Stack Overflow answers referring to obscure details gleaned from old release notes.

Answer 1

codeActionsOnSave setting lets you configure a set of Code Actions that are run when a file is saved. For example, for JavaScript, TypeScript, and other extensions that contribute an organize imports Code Action, you can enable organize imports on save by setting:

"editor.codeActionsOnSave": {
     "source.organizeImports": true
}

You can also enable or disable which Code Actions are run on save per language using a language specific setting. The following settings enable organize imports on save for TypeScript files only:

"[typescript]": {
    "editor.codeActionsOnSave": {
        "source.organizeImports": true
    }
},

"[typescriptreact]": {
    "editor.codeActionsOnSave": {
        "source.organizeImports": true
    }
}