Prettier. How to set up in the right way

Prettier will help uniformize code when working in a team and make it look nice with auto-formatting.

Installing Prettier#

Install the latest version of Prettier:

npm i -D prettier

Prettier features. Why do we need it?#

With Prettier we get the benefits:

• The programmer focuses on writing code rather than formatting it.
• The team writes uniformly formatted code.
• Prettier knows how to work with many popular languages.
• You can put Prettier on the pre-commit hook to have the code formatted just before committing to Github/Gitlab.

The differences between Prettier and Linters#

Linters (Stylelint, Eslint) perform static code analysis and report warnings and errors about the code quality.

Prettier only does formatting.

Prettier configuration#

Since Prettier has its own sets of configurations for code formatting, there are often cases where a particular rule is unsuitable for the team or the developer.

In that case, you can change the configuration.

There is a file .prettierrc.json for this (you can use other formats as well, more details here)

My .prettierrc.json looks like this:

{
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  // For Nunjucks templates.
  "overrides": [
    {
      "files": ".njk",
      "options": { "parser": "html" }
    }
  ]
}

It must be said that the set of rules in the configuration is quite limited, and this was done by the developers consciously.

Ignoring 3rd party libraries#

We don't need to format the 3rd party libraries and compiled code for production. You can use the file .prettierignore to set up ignoring.

An example of my .prettierignore file:

node_modules/
vendor/
dist/

Ignore files#

To ignore files, write prettier-ignore at the beginning of the file:

HTML:

<!-- prettier-ignore -->

CSS:

/* prettier-ignore */

JS:

// prettier-ignore

JSX:

{/* prettier-ignore */}

Markdown:

<!-- prettier-ignore -->

Disable autoformatting of some file types in VSCode#

I usually correct Prettier's behavior in Vscode by disabling autoformatting for some file types.

Twig — I subjectively don't like Prettier's formatting style in Twig templates, so I turn it off.

Yaml — autoformatting more than once led to the situation that *.yml files do not pass validation in Drupal because Prettier "corrected" the length of the string. And as you know, in Yaml indentation is crucial.

The VSCode configuration looks like this:

{
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typecript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[pcss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[twig]": {
    "editor.formatOnSave": false
  },
  "[yml]": {
    "editor.formatOnSave": false
  },
  "[yaml]": {
    "editor.formatOnSave": false
  }
}

Outro#

Bundlers like Vite turn on Prettier by default when you install an application like Vue, and you don't have to worry about configuring it anymore.

In fact, you should set up Prettier once and forget about formatting code by hand forever.

References:

• Prettier Docs