---
title: A simple way to have a consistent code style using Prettier - Bonial
description: What’s code style, and why does it matter? How do you align the code style in your project fast and cheaply? How to never discuss style during code reviews again? I’m a Front-end Engineer at Bonial, working on migrating our main user-facing platform to the new (next.js) stack. Big fun of functional programming and TypeScript. […]
image: https://www.bonial.com/hubfs/TechBlog_feature_image.png
---

[![logo_Bonial_new](https://www.bonial.com/hs-fs/hubfs/logos/logo_Bonial_new.png?width=7076&height=2424&name=logo_Bonial_new.png "logo_Bonial_new")](https://www.bonial.com/de/)

[![Kontakt](https://no-cache.hubspot.com/cta/default/3896573/9d3f1660-20b7-40ce-bef6-55e0a7c4a58d.png)](https://cta-redirect.hubspot.com/cta/redirect/3896573/9d3f1660-20b7-40ce-bef6-55e0a7c4a58d)

[Blog](https://www.bonial.com/de/presseundblog/tag/blog)

# A simple way to have a consistent code style using Prettier

![A simple way to have a consistent code style using Prettier Tech Blog](https://www.bonial.com/hubfs/TechBlog_feature_image.png)

Teilen

![Share on Facebook](https://static.hubspot.com/final/img/common/icons/social/facebook-24x24.png) ![Share on LinkedIn](https://static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png) ![Share on Email](https://static.hubspot.com/final/img/common/icons/social/email-24x24.png)

What’s code style, and why does it matter? How do you align the code style in your project fast and cheaply? How to never discuss style during code reviews again?

*I’m a Front-end Engineer at Bonial, working on migrating our main user-facing platform to the new (next.js) stack. Big fun of functional programming and TypeScript.*

The typical software developer spends [70% to 90% of working time](https://www.quora.com/As-a-programmer-whats-the-percentage-that-you-spend-time-reading-code-and-writing-code) **reading code**, way more than writing/editing. As it’s so time-consuming, making reading more straightforward is a big deal.

One way to achieve it is to have a consistent code style among the whole codebase on a project and/or company level.

In practice, without an **agreement **and** enforcement** of code style, every software developer codes in their own manner. It can be “small” things, like the maximal length of lines, an empty line at the end of the file, etc. After a short time, the code style becomes messy – to the point that just reading a block of code might indicate the author.

**Inconsistent code style** can cause a headache during code reviews if the code style of two coders comes to “conflict.” So, any large codebase with multiple team members should look as *if only one programmer wrote it*.

Once we’re all on the same page, it’s time to implement the code style. Mostly I code in JavsScript/TypeScript, and the best option in the area is [Prettier](https://prettier.io/) – the opinionated code formatter. Opinioned means it comes with batteries included and doesn’t give you much freedom to implement any code style you could imagine. Don’t worry – you’re in good company, as Prettier is used in companies such as Dropbox, Heroku, Spotify, and [many others](https://prettier.io/en/users/).

Before you even begin installing Prettier to your codebase, ask your co-workers to discuss their preferences regarding the following things:

- Maximal length of a line (of code)
- Single or double quotes for strings
- Semi columns after each expression
- Trailing commas
- Tabs or spaces for indentation

Once you have this feedback, it’s time to create in the root of your project file .prettierrc and fill it with your team’s agreements; this could look like:

{

   “trailingComma”: “es5”,

   “tabWidth”: 4,

   “semi”: false,

   “printWidth”: 100,

   “singleQuote”: false

}

The whole list of options, along with their descriptions, can be found on this [page](https://prettier.io/docs/en/options.html).

Prettier can work as standalone, but also in conjunction with ESLint. In the article, we assume the standalone one. Let’s install it – all commands should be run in Terminal at the root of your npm project.

“`

npm install –save-dev –save-exact prettier

“`

Once it’s there, time to check your code style:

“`

npx prettier –check “components/**/*.{tsx, js}”

*“`*

*Feel free to adjust the command above to point prettier to directories you have in your project.*

Do you see any errors in your output? Don’t worry; we’ll fix them in a minute.

Time for magic!   
Type the same command but replace –check with –write.

“`

npx prettier –write “components/**/*.{tsx, js}”

“`

Check out the output of the git diff command!

I hope JavaScript (and hopefully TypeScript) were formatted according to the config you’ve set up before. You could be shocked because your code became beautiful or terrible – that depends on your taste.

Let’s go to the next step. You can derive even more value from Prettier by integrating it with your code editor. I write code inside IntelliJ IDEA using the fantastic [Prettier plugin](https://plugins.jetbrains.com/plugin/10456-prettier). It works like **magic** – formatting your code just after you’ve typed it.

 

![](https://www.bonial.com/hs-fs/hubfs/Imported_Blog_Media/DJQ7xy4I_kuMeq4eR_fZarcBPASdjogJxvJsWyycSnw7rwX0vcOoC2JB4cqAqm155Cc4lO7l56K-FvT99yrCA_jFhPTo0KoTF2x621m4Gh1jfMERGInh2K9b6G0T7qOgiLD2K7n_.gif?width=800&height=169&name=DJQ7xy4I_kuMeq4eR_fZarcBPASdjogJxvJsWyycSnw7rwX0vcOoC2JB4cqAqm155Cc4lO7l56K-FvT99yrCA_jFhPTo0KoTF2x621m4Gh1jfMERGInh2K9b6G0T7qOgiLD2K7n_.gif)

 

- That’s it, share the article with your co-workers, let’s bring consistent code style in our projects!****

### **Summary**

Checking code style using a Computer helps streamline the developing process, reduces the time for code reviewing, and the cognitive load to read codebases. Prettier is a terrific tool in the front-end world and formats your code as soon as you’ve typed a line. Thanks to its abilities, every team member pushes code in the same style regardless of their level and experience.

 

### Author

  

![](https://www.bonial.com/hs-fs/hubfs/Imported_Blog_Media/Unbenannt.png?width=200&height=200&name=Unbenannt.png)

 

This article was written by Vladislav Lisovskii, a Frontend Engineer at Bonial.

 

[Zurück zum Blog](https://www.bonial.com/de/presseundblog)

## Andere Artikel könnten Sie interessieren

![](https://www.bonial.com/hubfs/AbschiedLaurent.jpg)

25/06/2026

Blog

### Bonial gibt den Abschied von Laurent Landel, CEO von Bonial Frankreich, bekannt

[Weiterlesen

](https://www.bonial.com/de/presseundblog/bonial-gibt-den-abschied-von-laurent-landel-ceo-von-bonial-frankreich-bekannt)

![](https://www.bonial.com/hubfs/DE_Uploads/Newsletter_Visuals/BLOG%20HEADER_Jun26.png)

25/06/2026

Newsletter

### Bonial Newsletter Juni 2026

[Weiterlesen

](https://www.bonial.com/de/presseundblog/bonial-newsletter-juni-2026)

![](https://www.bonial.com/hubfs/Bonial_Blog-Header_KW21.jpg)

12/06/2026

Presseartikel

### Vertrauen schlägt billig

[Weiterlesen

](https://www.bonial.com/de/presseundblog/vertrauen-schlägt-billig)

[![logo_Bonial_new](https://www.bonial.com/hubfs/logos/logo_Bonial_new.png "logo_Bonial_new")](https://www.bonial.com/de/)

Copyright 2022 © bonial

![logo_Bonial-2](https://www.bonial.com/hs-fs/hubfs/logo_Bonial-2.png?width=7076&height=2424&name=logo_Bonial-2.png "logo_Bonial-2")

Copyright 2019 © Bonial

[Privatsphäre](https://www.bonial.com/de/presseundblog/tech-blog/a-simple-way-to-have-a-consistent-code-style-using-prettier#)

```json
{
  "@context" : "http://schema.org",
  "@type" : "Article",
  "author" : {
    "@type" : "Person",
    "name" : "Tech Editor"
  },
  "dateModified" : "2022-01-16T40:21",
  "datePublished" : "2021-11-23 17:32:00",
  "description" : "What’s code style, and why does it matter? How do you align the code style in your project fast and cheaply? How to never discuss style during code reviews again? I’m a Front-end Engineer at Bonial, working on migrating our main user-facing platform to the new (next.js) stack. Big fun of functional programming and TypeScript. […]",
  "headline" : "A simple way to have a consistent code style using Prettier",
  "image" : {
    "@type" : "ImageObject",
    "representativeOfPage" : "True",
    "url" : "https://corporate.bonial.com/hubfs/TechBlog_feature_image.png"
  },
  "mainEntityOfPage" : "https://www.bonial.com/de/presseundblog/tech-blog/a-simple-way-to-have-a-consistent-code-style-using-prettier",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://corporate.bonial.com/hs-fs/hubfs/logos/logo_Bonial_new.png?width=3538&name=logo_Bonial_new.png",
      "width" : 130
    },
    "name" : "Bonial"
  }
}
```