Prettier - Field Notes

April 18th, 2022

Wattzit for?

What is it?

A very opinionated JS code formatter

Not a custom formatting tool

A code formatter for JS and common frontend frameworks/tools

A plugin in VS code for use as the auto-formatter

Not a linter

How does it work?

It runs on your project files and rewrites them with its formatting

It can run on file save, on a keyboard shortcut, and in CI or commit pre-hook

How do I set it up? (VS Code)

1: Install the Prettier VS Code plugin

2: Check settings by typing “>open settings” (JSON)

Settings should look something like this:

//json
"editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
"svelte.enable-ts-plugin": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"prettier.configPath": ".prettierrc.json",
"prettier.useTabs": true,
"prettier.prettierPath": "./node_modules/prettier/index.js",
"prettier.singleQuote": true,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,

3: Make the “.prettierrc.json” with the options you want:

//json
{
  "tabWidth": 2,
  "useTabs": false
}

4: Enjoy your auto-formatting project!

//yaml
thingy: 2,
thing: 3