DEV Community

Cover image for Prettier VS Code Extension - Perfect Code Formatting
Francisco Moretti
Francisco Moretti

Posted on • Originally published at

Prettier VS Code Extension - Perfect Code Formatting

Are you tired of spending countless minutes tweaking the formatting of your code? Do you wish there was a magical tool that could take care of all the tedious spacing, line breaks, and quote choices for you? In this blog post, we'll dive into the wonderful world of the Prettier Code Formatter VS Code extension and discover how it can transform your coding experience. ๐Ÿ’ปโœจ

What is Prettier? ๐Ÿง

Prettier is an opinionated code formatter that helps you maintain consistent code styling in your projects. By automatically applying a set of predefined formatting rules, Prettier saves you from the hassle of manual adjustments, freeing up your time to focus on what truly matters: creating awesome websites.


Simply search for esbenp.prettier-vscode in VS Code Extensions panel and hit install. Or Install via the Visual Studio Code Marketplace โ†’.

Note: if Prettier is not installed in your project you can install it by following the official installation instructions.

Setting Prettier as the Default Formatter

To make sure that Prettier is used instead of any other code formatter extensions you might have, set it as the default formatter in your VS Code settings. Simply add the following code snippet to your VS Code settings file:

  "editor.defaultFormatter": "esbenp.prettier-vscode"
Enter fullscreen mode Exit fullscreen mode

The VS Code Extension Superpower ๐Ÿš€

If you're a Visual Studio Code enthusiast like me, you're in the right place! The Prettier Code Formatter extension integrates seamlessly with VS Code, allowing you to unleash the full power of Prettier right within your favorite code editor. ๐ŸŽ‰

With the Prettier extension enabled, you can effortlessly format your code with a simple keyboard shortcut or even set it up to format your code automatically on save. Yes, you heard that right! The formatOnSave option combined with Prettier will work its magic every time you hit that save button. ๐Ÿช„โœจ

Using Format-On-Save

Format-On-Save is a powerful feature that allows you to automatically format your code every time you save your file. This feature respects the editor.formatOnSave setting, which can be turned on for every language compatible with Prettier using:

  "editor.formatOnSave": true
Enter fullscreen mode Exit fullscreen mode

The Need for Speed โšก

As a developer, time is of the essence. The faster you can produce clean and readable code, the more efficient and productive you become. And that's why Prettier is our friend! ๐Ÿ˜Ž

Say goodbay to manually adjusting spaces, tabs, line breaks, single or double quotes, and all those nitpicky details that can slow you down. Prettier takes care of it all, ensuring a consistent and visually pleasing codebase. โœจ๐Ÿ’ช

Embracing the Prettier Lifestyle ๐ŸŒŸ

Now that you've learned about the wonders of the Prettier Code Formatter VS Code extension, it's time to embrace this new way of coding. Let go of the control you once had over your code's appearance and trust Prettier to do that work for you. ๐Ÿ’โ€โ™€๏ธ

If you're new to Prettier, don't worry! Installing and setting it up is a breeze. Simply head over to the official Prettier documentation and follow the step-by-step instructions provided here. Before you know it, you'll be doing code formatting effortlessly. โ›ฑ๏ธ

In the meantime, if you want to learn more about the benefits of Prettier Code Formatter, check out my previous blog post titled Letting Go of Control - Embracing the Prettier Code Formatter. It explores the benefits of using Prettier in your development workflow. ๐ŸŒˆ๐Ÿ”—

Conclusion ๐ŸŽ‰

Congratulations on discovering the magic of the Prettier Code Formatter VS Code extension! By automating code formatting, Prettier saves you time, enhances your productivity, and lets you focus on what you do bestโ€”writing awesome code. Happy Coding! ๐Ÿ˜„๐ŸŽ‰

Top comments (0)