Cleanup format in React file with VS Code

Question

So I am curious how I can quickly correct the formatting of my code in a .jsx file. Have tried some extensions like beautify react, prettify, etc...., but they do not seem to work quite right in vs code.

What I see is this:

You can see where my indent lines are messed up. I believe this to be from developers on team using other editors with their spacing set differently.

So is there a way to keep this clean and maybe add some automagic to this?

Answer 1

The one which goes perfectly well for my .jsx and .js is Prettier

You can install it as a project dependency:

npm install --save-dev --save-exact prettier

If you want prettier to watch for changes , you can add following to your package.json

  "scripts": {
    "prettier-watch": "onchange '**/*.js' -- prettier --write {{changed}}"
  }

VS prettier Configuration

You can see other Prettier editor configuration for more details

Answer 2

eslint has the ability to auto-fix files via a --fix command-line argument if you have style rules defined. It has a fairly substantial set of rules available via plugins. There are also standardized configs like https://github.com/standard/eslint-config-standard-react . This will help you out with formatting and enforcing other best practices.

It integrates with vscode .

Answer 3

Visual Studio 2017 has decent formatting options for .jsx files. What makes formatting them difficult is that they combine markup with JavaScript. I'm not sure if VS Code has this facility, but you can use this keyboard shortcut to cleanup the formatting of .jsx files.

Ctrl + K + D

It also will cleanup the formatting of your json etc. I think it's the first version of Visual Studio that offers this level of formatting for .jsx.