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

Regarding Auto Code Formatting:

For anyone starting out with VSCode - Expo, React-Native devs or having some issues with code formatting, please find below the simplest solution I could find (ESLint is a bit confusing / complex unless you are fairly familiar) - link to Expo guide is here if you would really like to do this (https://docs.expo.dev/guides/using-eslint/) - It is a bit complicated if you are just starting out and I find ESLint to cause too much bloat messaging on my code editor screen, especially now that there are things such as copilot etc.

---

[Instructions] Simply set up Prettier (no ESLint):

1. Add 'Prettier - Code Formatter' extension in VSCode and enable it
2. Go to the VSCode settings to set both the User and Workspace fields for a) Editor: Default Formatter to "Prettier - Code formatter", then b) check to enable Format on Save (I also checked Notebook > Format on Save).

Now get to Coding!!!

---

Some Next Steps:

You can check out the Expo Guide (or similar) for further best practices but it will take some time to get it all setup.

Prettier should already auto-format on save and you can further configure it by adding a .prettierrc file at the root of your project and following https://github.com/expo/expo/tree/main/packages/eslint-config-universe#customizing-prettier which should override the default settings you have set up for all your projects.

You can later setup linting as well which is generally more useful down the line for when working with remote/shared repositories (ie: they contain explanations for the correction, etc.). Causes a bit of bloat but it's quite helpful for navigating a new team / codebase (ex Amazon SDE) to understand the style guidelines being used, fixing an entire project programmatically via a script etc. with ESLint.