This will bring up all of the settings that you can change right there in your editor.įor example, what if I change the tab width to 10. Tab Width - how many spaces you want a tab to consist of.Semi - choose whether or not to include semi colons at the end of lines.Single Quote - choose between single and double quotes.Here are a few of the most common settings. Prettier does a lot of things for you by default, but you can also customize the settings. With this setting in place, you can go about your business writing sloppily formatted code like we all do knowing that it will all be taken care of automatically for you! Prettier Configuration in VS Code Settings Then search for Editor: Format on Save and make sure it is checked. To change this setting, use** Command +, on Mac or Control +, ** on Windows to open the settings menu. code doesn't get checked in that's not formatted.ensure code is formatted without having to think about it.You never have to manually format your code again! Instead, you can choose a setting in VS Code to have your files automatically formatted when you save. So far, we have had to manually run a command to format our code. The awesome thing is that this also works on CSS files! Then choose Prettier **- Code Formatter**.Īnd the VOILA! Your code is nice and formatted. You may then be prompted by to choose which formatter to use. In the command pallette search format, then choose** Format Document**. To open the command pallette, you can use Command **+ Shift + P** on Mac or Control **+ Shift + P** on Windows. We'll work more on this later, but to start, we can use the Format Document command. With the Prettier extension installed, we can now leverage it to format our code. If you're installing it for the first time, you'll see an 'install' button instead of the 'uninstall' button you see on mine. To work with Prettier in Visual Studio Code, you'll need to install the extension. you may or may not like the optional parenthesis surrounding the parameter of the arrow function.the console statement inside of the function should be indented.the first property of the person object should be on it's own line.If you're picky about code formatting, you'll pick up on some obvious misteps immediately. Prettier Configuration in VS Code Settingsįor demo purposes, here's the sample code we will be formatting.

Visual studio format document spaces