How to setup VS code for react and JSX syntax

By default .js (javascript) file extension in vs code does not support JSX syantax or formatting. This one line of code in your vs code setting file can turn your default javascript editor to jsx editor.

 "files.associations": { "*.js": "javascriptreact" },

With the above setting, if you have prettier extension installed then you can also add following settings code. This will format & indent your code file at the time of file save.

 "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 2

Within your settings.json file (that stores your VS Code configuration) from the previous lesson you may also want to include these two options as well:

1. “prettier.arrowParens”: “avoid”,
2. “prettier.trailingComma”: “none”

The first option will allow you to write an arrow function and if you have exactly one parameter you can skip the parentheses without Prettier adding them in for you (which can be annoying). The second option makes sure you don’t have unnecessary commas after the final property when defining an object literal. Neither of these settings are necessary, but I do use them in my personal VS Code setup.

Keep following for easy tutorials on web development.