Prettier
2 minutes of reading
Prettier is an automatic code formatting tool that has recently gained a lot of popularity among developers. It allows to unify code writing styles and therefore contributes to better readability and easier maintenance of projects.
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.
Our offer
Web development
Find out moreMobile development
Find out moreE-commerce
Find out moreUX/UI Design
Find out moreOutsourcing
Find out moreRelated articles
The Manifest Names Boring Owl as one of the Most-Reviewed UX Agencies in Warsaw
22 Jul 2024
When introducing a new digital product or solution, focusing on User Experience (UX) can significantly set you apart from the competition.
![related-article-image-trophy](/_next/image?url=https%3A%2F%2Fd2ooyrflu7lhqd.cloudfront.net%2Fboringowl_io_hand_holding_the_trophy_outside_in_simple_style_b24d5057_eb81_4e93_a106_7af29f7f9c87_1_1_1_715a9cdc84.png%3Fformat%3Dauto&w=3840&q=75)
Website redesign vs. refresh: Evaluating the benefits and drawbacks
11 Jul 2024
In an ever-evolving digital landscape, businesses are constantly called to re-evaluate their online presence. The dilemma often lies in the decision between a complete website redesign or a website refresh. Both actions present unique benefits and challenges. This article aims to dissect these options, highlighting their advantages and disadvantages to better inform your next digital strategy.
How to incorporate machine learning into e-commerce platform
11 Jul 2024
E-commerce thrives on delivering personalized experiences to customers. Harnessing the power of Machine Learning (ML) can redefine these experiences, by predicting user behavior, tailoring recommendations and automating tasks. In this article, we explore the integration of ML into your E-Commerce platform and unveil its transformative potential.
How colours influence website perception?
10 Jul 2024
Bright red sales sign, soothing blue blog post, or an enigmatic black homepage, colors speak volumes in web design. The psychology of colors plays a critical role in how users perceive websites, influencing their actions and decisions subtly shaping the online experience. Let's delve into understanding this colored web of psychology.
Navigating App Development: Web, Mobile or Hybrid?
10 Jul 2024
Embarking on the journey of app development often comes with a critical decision: Web, Mobile, or Hybrid? Each offers unique benefits and challenges, suited to different project demands and goals. This article attempts to navigate through this complex landscape, offering insights to make the best choice.
Crucial role of interruption testing
9 Jul 2024
The rise of digital applications in today's fast-paced world undeniably rests on their performance. But when apps stutter or crash, the culprit can often be traced back to unanticipated interruptions. Understanding this, we delve into the world of 'Interruption Testing', an unsung hero in app performance optimization, which challenges the robustness of applications in the face of unprecedented events and interruptions.
React Native vs Flutter: A comprehensive guide on mobile app development technologies
9 Jul 2024
In the era of mobile app development, choosing the right tech stack becomes crucial. React Native and Flutter, raise as frontrunners with their unique offerings. This article offers an in-depth comparison between the two, aiding you in making informed development decisions.
Show all articles