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.
Latest job offers
No job offerts found
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
How to handle a website security breach: immediate actions and recovery
30 Apr 2024
A website security breach can be a devastating event for any business, large or small. It ushers in not only immediate damages, but also long term trust issues. This article explores about prompt response to such crisis, and strategic steps to recover and fortify digital assets against future threats.
Responsive vs Adaptive Design: A comparative analysis on the optimal approach
25 Apr 2024
In the world of web design, there are two main methodologies popularly adopted by developers: responsive and adaptive design. Each offering unique capabilities, they cater to users' diverse needs. In this article, we perform a detailed comparative analysis between these two design structures, extensively discussing their pros, cons, and determining the optimal approach depending on certain variables.
Shedding Light on Dark Mode: Key Considerations and Advantages when Adapting Websites
9 Apr 2024
The digital world is increasingly embracing dark mode, with many popular websites now offering this viewing alternative. User-centric and energy-efficient, dark mode has won the heart of night owls and aesthetics-lovers alike. In this article, we illuminate the keys to adapting websites for dark mode, and explore its compelling advantages.
Native vs. Cross-Platform Development: Which Approach is the Best?
8 Apr 2024
In the ever-evolving realm of application development, coming up with the consummate approach is quite ascendant. Developers face several dilemmas, one of them being whether to opt for Native or Cross-Platform Development. This article will conduct a comparative analysis, exploring the pros and cons, to compute the optimal approach.
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.
An Overview of E-commerce Platforms: Which is the Best Fit for Your Business?
23 Mar 2024
E-commerce is a transformative sphere of business, especially in the digital age. This surges the importance of choosing the right e-commerce platform for your business. It's a critical decision that decides the success in the online market. This article aims to throw light on different e-commerce platforms, their strengths, weaknesses helping businesses to choose the most suitable one.
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.
Show all articles