Configure VSCode Projects to Force Formatting

I like to set VSCode workspace settings to format on save and commit those setting to the repo. This enables me to:

Never need to waste brain power on formatting
Never have commits that are just formatting
Never have arguments about formatting with colleagues
Never waste time with linters complaining about formatting

I simply gave up having my own opinions on formatting, trust Prettier’s opinions and waste less time.

Setup

Install the VsCode extension esbenp.prettier-vscode. This is the only manual that every coder has to do, the rest is done once and commited to the repo.

npm i --save-dev prettier

Needed to run as a npm script
Keeps the version used consistent
This also makes it possible to use plugins to support more files

Create settings file for the project ./.vscode/settings.json:

settings.json

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "[html][js][css][ts][jsx][tsx]": {
        // VSCode's default tab size does not match prettier.
        "editor.tabSize": 2
    }
}

settings.json

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "[html][js][css][ts][jsx][tsx]": {
        // VSCode's default tab size does not match prettier.
        "editor.tabSize": 2
    }
}

Format all files once with npx prettier ./src/ -w
Add any generated files to a .prettierignore
- .git and node_modules should be ignored by default

Enjoy

Enjoy clean commits, more time to bikeshed on things that are not formatting.