VSCode Marketplace offers more than 15k+ extensions to the developers. These extensions save tons of hours & make VSCode developer experience more & more impressive. All of these extensions are open-source which means you can contribute to any of your favorite extensions.
ππ» Today we are going to talk about an extension that has made my life & the life of 6M+ developers so much easier. It is none other than Prettier β Code Formatter.
π€© Prettier Auto-formatting with VSCode
Prettier is an opinionated code formatter that lets you format your code any way you like. It provides a lot of customizable options that you can use to define standards for your code. Hence, ultimately allowing you to code more & more without worrying about formatting. β‘οΈ
π¨π»βπ» My Workflow
It would be unfair of me to not share with you folks my personal workflow with the Prettier. I like to code carefree. Formatting the code every time I write something new is a bit of hassle for me. Also, there are some other settings that I prefer like single quotes over double quotes, etc.
So to take care of that, I make use of a combination of VSCode settings that allows my code to format using Prettier. If you are interested in adapting my workflow then follow the steps below.
βοΈ STEP 1: Turning on AutoSave
Open your VSCode Settings and set the Auto Save to afterDelay.
π¦ STEP 2: Adding key/value Pairs to settings.json
The next & final step is adding some key/value pairs in your settings.json.To open it, press β command + β§ shift + p & then search for settings.json.
Once you find it, hit Enter. It will open a JSON file. Add the following key/value pairs anywhere in this file.
{
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"prettier.printWidth": 100,
"prettier.singleQuote": true,
"prettier.jsxSingleQuote": true,
"prettier.tabWidth": 4
}
And, voila!! Now you can code carefree just like me ππ»
Top comments (0)