Using prettier to format code

The purpose of prettier is to parse away the original code style, and to reprint it according to a set of rules.

To install prettier, we can run: npm install --save-dev --save-exact prettier

In the package.json for this portfolio template project, we find:

{
  "devDependencies": {
    "@shopify/prettier-plugin-liquid": "1.4.0",
    "prettier": "3.1.1"
  }
}

This means that we will use Shopify’s syntax for Liquid code formatting, incorporating the features and rules provided by the “@shopify/prettier-plugin-liquid”, while the core Prettier package version 3.1.1 will handle the overall code formatting for other supported languages and features.

To use prettier, we can run it with npx: npx prettier . --write This formats our code and applies our formatting rules.

In a CI pipeline, we can enforce formatting by checking code style without modifying the code: npx prettier . --check

You can read more about prettier on their website: Prettier vs. Linting

Prettier vs. Linters How does it compare to ESLint/TSLint/stylelint, etc.? Linters have two categories of rules:

Formatting rules: eg: max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style…

Prettier alleviates the need for this whole category of rules! Prettier is going to reprint the entire program from scratch in a consistent way, so it’s not possible for the programmer to make a mistake there anymore :)

Code-quality rules: eg no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors…

Prettier does nothing to help with those kind of rules. They are also the most important ones provided by linters as they are likely to catch real bugs with your code!

In other words, use Prettier for formatting and linters for catching bugs!