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 Best CMS Platforms to Build and Manage A Blog
26 Mar 2024
In the world of blogging, content management systems (CMS) are critical. The right CMS can help amplify your voice, reach a broader audience, and ease website maintenance. In this article, we'll take you through the superior CMS platforms you need to build and manage a compelling blog.
Intelligent Assistance: The Future of Human-Computer Interaction
21 Mar 2024
In the age of rapid digital transformation, Intelligent Assistance is charting a new course for human-computer interaction. From voice commands, predictive analytics to personalized recommendations, it's an emerging paradigm that's transforming our interaction with digital devices, making technology more intuitive and user-friendly. Through this exploration, we'll dive deep into its evolution and potential.
VSEO: How to Optimize Your Videos for Search Engines
21 Mar 2024
As content consumption braves new frontiers, Video Search Engine Optimization (VSEO) emerges as an essential realm for marketers and SEO specialists alike. Our comprehensive guide aims to illuminate the intricate process of optimizing video content for search engines, catering to both novices and seasoned experts.
The Role of AI and Machine Learning in Enhancing Mobile App Experiences
19 Mar 2024
In this era of unprecedented digital growth, app developers continuously strive to improve the user experience. A game-changer in this context is the ingenious integration of AI and Machine Learning. This article explores how AI and ML are revolutionizing the Mobile App User Experience and transforming interactions like never before.
Infinite Scroll vs Pagination: Which One Wins in Website Design?
19 Mar 2024
Infinite Scroll and Pagination are time-tested strategies for handling large volumes of data on websites. While infinite scroll allows continuous data feed, pagination breaks it up into separate pages. Each has its own strengths and trade-offs. In this article, we delve into these two strategies, compare their merits and limitations, and attempt to crown a champion in the context of website design.
Key elements of a successful mobile app: What is it that keeps users coming back?
18 Mar 2024
In the fast-paced digital age, user engagement proves paramount for app sustainability. This piece delves into the crucial elements of crafting engaging mobile applications, unveiling the secrets behind enduring success in this highly competitive sphere. We explore interface design, user experience, performance optimization and more.
Creating a Dynamic Website with Webnode
14 Mar 2024
In the digital age, it's pivotal to have a dynamic online identity. Building a website is key, however many falter at the complexity. That’s where Webnode comes into play. In our guide, we will explore how Webnode simplifies this process and enables anyone to create an engaging online presence.
Show all articles