Prettier

The readability of code is very important for any project, especially one that we write as a team. A well-formatted code is one that sticks to the right rules and is used by all people in the project, which is why code formatters were created. Such a tool formats the code for us and sticks to the rules that we are able to define ourselves together with the team. It is hard to imagine writing an application without a code formatter, so in this article I will introduce the most popular code formatter which is Prettier.

Prettier not just for JavaScript

Currently, Prettier supports not only JavaScript, but also: JSX, Angular, Vue, Flow, TypeScript, CSS, LESS, SCSS, HTML, Ember, JSON, GraphQL, Markdown, YAML.

Prettier vs. ESLint

ESLint is a static code analysis tool that finds code errors or bad practices and is able to fix some of these errors itself, while Prettier is used for code formatting. In short, we use Prettier to simplify code formatting and ESLint to catch errors. Therefore, it is worth using both tools. It is also worth mentioning that ESLint only works with JavaScript.

Prettier rules

Using Prettier, we are able to define the appropriate rules for our project ourselves, to do this we need to configure Prettier in the .prettierrc file by adding new rules, e.g.:

{
  "printWidth": 80, // określa długość linii
  "tabWidth": 2, // określa liczbę spacji na poziomie wcięcia
  "singleQuote": true // używa pojedynczych cudzysłowów
  "semi": true // dodaje średnik na końcu linii
  "useTabs": true // wcięcia linii są stosowane za pomocą tabulatorami zamiast spacji
}

Installing Prettier

To add Prettier to our project, use the package manager to run the following commands:

yarn add --dev --exact prettier

Or if you use the Visual studio code editor, just add a new extension called "Prettier - Code formatter".

Summary

Thanks to the development of tools like Prettier, we no longer need to manually format code, which saves us some time and allows us to focus more on coding. It's also worth looking into a tool like husky, which allows us to integrate with Git hooks, allowing us to automate Prettier and ESLint.