Setup ESLint and Prettier VS Code extensions for React app
This is a quick beginner's guide to setup ESLint and Prettier in VS Code. This guide only covers installing VS Code extensions and editor settings. The following are the benefits for setting up your code editor:
- Both ESLint and Prettier are pluggable extensions
- Increases productivity by enabling automatic formatting
- Reduces chances of potential bugs
- Helps in writing clean and readable code
Prettier is a opinionated code formatter. It parses the code and automatically reprints it according to the coding style such as maximum length of line and wrapping the code when necessary.
The following are the prerequisites for this setup:
- VS Code is already installed.
- [OPTIONAL] Create a new React app using
create-react-app. This is the easiest way to start a new React project. NOTE: You can try out the editor settings with your existing JS projects as well.
Setup VS Code
Follow the steps below to install and setup ESLint and Prettier in VS Code:
- Install ESLint and Prettier VS Code extensions.
- Open editor settings(Press
CTRL + ,) and enable Format On Save or you can put the line mentioned below in settings.json.
I couldn't find my format on save but now I do. Thanks 😍