Setting up Auto Format on Save easily in VS Code (Visual Studio Code) for Expo React-Native

Question

Is there a quick guide / tutorial for how to easily set up auto-code-formatting, eslint/prettier, etc. in vscode? (Specifically for code formatting of React, React-Native projects).

Simply downloading the extension doesn't work and there seem to be two main versions.

1. Prettier ESLint, v5.1.0, Rebecca Vest
2. Prettier and ESLint separately
3. other newer versions

I have been rattling my brain over it for a little while and I'd like to be able to quickly get this set up on any project - ideally with whatever the current orthodox styling / best practices are.

I have tried simply downloading the extensions and following the instructions but ended up running into loads of issues with the guides and auto-format on save did not work.

I really just needed a basic setup which would automatically become the default and work for all my projects and any new projects I created.

Then, perhaps a simple guide to adding a bit more customization, etc.

Answer 1

I'm more of the "edit the JSON" type of user of VSCode, and the answer from Masud was confusing to me because of that. It did push me in the right direction and I want to share for other like myself, more familiar with the .vscode/settings.json(s) than with that graphical Settings Editor.

settings.json edits - add these:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

.prettierrc edit or add a file by that name at the root of your project for any custom settings. Here are some of my favs:

{
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none"
}

Then, you can sanity check against those rules. I just added a trailing comma in an object block (in a Styles block in the sample Expo tsx component, in my case - brand new project) and see it removed on save... Then, remove the trailingComma rule, save, and try the comma again and see that the comma stays.