<stdin> |

My Thoughts, Trials and Adventures

Formatting Code in VScode

Posted at — Apr 21, 2022 | Last Modified on — May 11, 2023


I used to (and still do) refer to a lot of documentation and code samples, there’s one thing that is common in all of them, every single one of them is formatted as per some rule (such as PEP8 for python) that gives it a consistent look and feel, this makes it easier to read logic of the code instead of getting distracted with the styling of syntax.

Some unsung advantages of formatting are:

  • uniform style and feel to code.
  • automatically fix trailing and dangling spaces.
  • it is required that code be formatted in a specific way in many situations such as contributing to open source projects.


VSCode Logo
VSCode Logo

VScode has the option to format your code on save as well as manually (Shift + Ctrl + I) or through Power Menu.

  1. Create a .vscode/settings.json on your project root folder if it does not already exist.

  2. put the following JSON in settings.json file.

3    "editor.defaultFormatter": "ms-vscode.cpptools",
4    "editor.formatOnSave": true

here, editor.defaultFormatter is the formatter with which you want your code to be formatted. There are different formatters available for every language for example clang-format is very popular among C/C++ projects and Pretter is a goto formatter for all things Javascript (incl. Typescript)

editor.formatOnSave : weather automatically formats the code on saving of the file.

To see all the available formatters go to File -> Preferences -> Settings and search for “Default Formatter”. IN the dropdown menu you can find all the available formatters. use your preferred and compatible formatter value in your settings.json

Available Formatters in VSCode
Available Formatters in VSCode

You can get more formatters in VSCode Maketplace (Aka. Extensions).


Prettier Formatting

Prettier is a popular choice for many Javascript developers. I use prettier in my React Native Code to keep my JSX readable.

  1. Install Prettier from Extensions.
  2. An example.prettierrc.js file looks like this:
module.exports = {
  bracketSpacing: false,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 120,
  arrowParens: 'always',

Read Prettier Documentation


A good developer not only writes logical code but also writes beautiful readable code to make it easier to read for others. Formatting is the eraser to automatically remove scratch marks on our beautiful painting 😊.