Stop Formatting Your JavaScript Code Manually

Are you still formatting your code by hand? Ain't nobody got time for that. In this post I'll show you how to install Prettier and EditorConfig on VSCode. I am assuming you are relatively new to JavaScript, so I'll be only focusing on formatting rather than linting. Trust me, this will increase your quality of life by a margin. And, in my opinion, this is the easiest way to get formatting work on VSCode.

What is Prettier?

Prettier is an opinionated code formatter which supports JavaScript, JSX, JSON, React, Vue, Angular, etc. Prettier is not a linter. It only follows formatting rules, not code-quality rules. You can see which rules it supports here, and create your own config file: Prettier Playground.

1. Install Prettier and EditorConfig

Open VSCode and press CTRL + P. After that enter this:

ext install esbenp.prettier-vscode

And this:

ext install EditorConfig

After installations are done; go to Settings, and search for formatOnSave. Make sure it is ticked.

2. Add Configuration Files to Your Project

You need to have these config files in every project you want formatting to work. Create a .prettierrc file in the root folder of your project. You can use mine to get started:

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css"
}

Lastly, let's create a .editorconfig file in the root folder, so that VSCode knows you want your tabs to be 2 spaces long:

root = true

[*]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true

That's it! Now every time you save your code, it'll automatically get formatted.

I hope this was useful, you can also follow me on Twitter for future content:

twitter.com/oznbll