DEV Community

Cover image for How to get rid of code formatting
Dhruv Rajkotia
Dhruv Rajkotia

Posted on • Updated on

How to get rid of code formatting

As a Developer, We used to be in the situation to format the code after writing it. It became very frustrating when we have written the tons of lines of code and then we need to format it. So Isn't it better if we use some IDE extension to solve our issue🤪. Yes, Correct in this blog we are going to discuss one of the best formatting extension for VS Code that I'm using it regularly. It's Prettier Extension. I'm sure you guys gonna loved it once start using it :).

What is Prettier?

Prettier is an opinionated code formatter with support for:

  • JavaScript (including experimental features)
  • JSX
  • Angular
  • Vue
  • Flow
  • TypeScript
  • CSS, Less, and SCSS
  • HTML
  • JSON
  • GraphQL
  • Markdown, including GFM and MDX
  • YAML

Benefits Of Using Prettier

  • Code consistency across all the files that you have worked
  • Easily format the old code base if you are working on any new features with the same file
  • Prettier support the pre-commit Hook which can re-format your files that are marked as staged. Ref
  • Easy to adopt
  • Reduce overall development time
  • Prettier provide functionality to ignore some of the files that we don't want to format.
  • It reminds me of how Steve Jobs used to wear the same clothes every day because he has a million decisions to make and he didn’t want to be bothered to make trivial ones like picking out clothes. I think Prettier is like that.😃

How to install in VS Code

As I'm mostly using the VS Code so I'll take VS Code IDE example for explaining the setup of the prettier extension. You can check other IDE setup here

Step-1: Open Visual Code Editor

Step-2: Go to Extension tab and search for the Prettier
Image description

Step-3: Install Extension. (It may takes few seconds 😉)
Image description

Step-4: Go to settings or use the command (Ctr + "," or Command + "," (mac users 😏))
In this step we are going to configure to format code when we save the file. You may find the below screen.
Image description

Perform the below operations:

  • Set Prettier-Code formatter as Default Formatter (Take reference from above screenshot)
  • Enabled Format On Save option
  • There are some other options if you want then you can enabled it.

Step-5: Now let's test it.
Now let's add some extra space like below code.

Image description

Now if you save the file then it'll automatically remove the extra spaces and format the code of that file. Hope you see the magic 😄.

Image description

Ignore certain files and folder completely Feature
We can achieve it using the 2 methods

  • Use .prettierignore to ignore (i.e. not reformat) certain files and folders completely. To exclude files from formatting, create a .prettierignore file in the root of your project. .prettierignore uses gitignore syntax.

# Ignore all HTML files:
*.html

  • Use “prettier-ignore” comments to ignore parts of files. Here we can add the comment above the code lines to ignore the parts of the file. It's normal like a comments based on the language. for more info check here

For more info you can check the below links regarding the features

Summary

Today, we have covered how to add the Prettier extension to our IDE for getting rid of code formatting and reduce the development time for most used programming languages. I have been using it for a long time and I really liked it. Once you start using it you'll definitely liked it. Hope you learn something new today😀.

Please follow me on Twitter for more updates regarding the programming cool stuff😄. Have a great day.

Discussion (6)

Collapse
deathshadow60 profile image
deathshadow60

How is adding an extension that ADDS formatting to your code, "getting rid of formatting?"

Collapse
dhruv_rajkotia profile image
Dhruv Rajkotia Author

@deathshadow60 Thanks for your comment, But Prettier is working for a lots of extentions file like js, yaml, json etc. It looks weird in the heading :)

Collapse
deathshadow60 profile image
deathshadow60

Huh... what does that response have to do with my question about the title of the article?

Prettier ADDS formatting to the code of all those languages you said. You are NOT "getting rid of code formatting", you're using a tool to create it!

Thread Thread
dhruv_rajkotia profile image
Dhruv Rajkotia Author

@deathshadow60 Correct, But here we are using the extensions that present in the most of the IDEs to get rid of the code formatting. I got your point, but now a days every one is using the IDE for the development and by enabling the extention in the IDE Developers can reduce some efforts on the code formatting. That was my main goal for this blog :) Hope 🤞 i have answered your question.

Thread Thread
deathshadow60 profile image
deathshadow60

Nope. I think we're butting heads with language barrier or something. What you're saying isn't making a lick of sense in relation to the title of the article. Or the content of the article. It's very hard to follow what you're trying to say with the broken English.

Thread Thread
dhruv_rajkotia profile image
Dhruv Rajkotia Author

The main objective of this blog is to provide an idea of how we can use an inbuilt extension(Prettier) in the IDEs like VsCode, PyCharm, etc., for code formatting. So we don't need to do it manually and it saves a bit of time for the developer.