Config Eslint and Prettier in Visual Studio Code for React js development

I have come with a tutorial that covers the configuration of Eslint and Prettier in visual studio code for React js development. Errors are a major problem in our usual react js development. This frustrates users while writing code.

When I started using react for my projects I never used eslint or prettier for the development. I still regret that because linting is important for development as it reduces error and improves the overall quality of the code and prettier helps us formatting our code. So let us see how to configure that for your next react js project.

1. Open the terminal in your project root folder and install eslint as a dev dependency. We also need to enable the eslint and prettier extension for the VSCode. So visit the extensions section of VSCode (ctrl + shift + x) and search for Eslint and Prettier — Code formatter and install it.

npm install eslint --save-dev
 or
yarn add eslint --dev

2. After that we will generate our .eslintrc.json file through the terminal so run this command to generate your eslint configuration file.

npx eslint --init
 or
yarn run eslint --init

This will prompt multiple options so, first select To check syntax and find problems after that select JavaScript modules (import/export) then select React Now it will ask Does your project use TypeScript No/Yes In my case, I am not using TypeScript so I will select No option. Now select Browser and then JSON option. It will then prompt you to install eslint-plugin-react so click on yes.

This is how your .eslintrc.json file will look.

I am currently using React 17.0.1 and It’s currently the latest version of React. In this update, the React Team has made importing React to the file optional. So our eslint is giving an error that"React" must be in scope when using JSX. To fix this we will add a rule to our eslint file. So open your .eslint file and add this line "react/react-in-jsx-scope": "off" inside the rules.

Now if you open your App.test.js file you will find that eslint is giving us an error that test or expect is not defined . To fix this we need to add "jest": true inside env.

It’s time to add prettier and configure it with our Visual Studio Code so whenever we save our code it will automatically format our code.

3. Run the below command to install the required plugins for the prettier setup.

npm install eslint-config-prettier eslint-plugin-prettier prettier --save-dev
or 
yarn add eslint-config-prettier eslint-plugin-prettier prettier --dev

4. After installing all the above modules it’s time to add some prettier configuration to our .eslintrc.json file. So add this line "plugin:prettier/recommended" inside extends.

5. Now if you open your App.js file and add some extra spaces, the eslint will show you some errors. To fix this we need to click over those errors and press ctrl+. and select fix all auto-fixable problems . This will fix all prettier linting issues automatically.

4. Now we need to configure our VSCode settings for prettier to work on autosave. Follow the below-mentioned steps to configure your VScode Setting

• Go to File > Preferences> Settings
• On your right-hand side, there is an icon to Open Settings in JSON format. Click on that icon.
• Add below JSON code there

So now whenever you save your code or change the focus from the code, VSCode will automatically fix the format of your code.

Note: you can also create local settings for VScode. All you need is to create a .vscode directory inside your root project and create a file with the name settings.json and inside that directory and put the above JSON code inside that file as an object {}.

Here is the full code for .eslintrc.json file.

Below I have also shared the GitHub repository and live code for reference.

Mediumtutorial/react-config-eslint-prettier-medium