

It will then prompt you to install eslint-plugin-react so click on yes. 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. npx eslint -init or yarn run eslint -init eslintrc.json file through the terminal so run this command to generate your eslint configuration file. Npm install eslint -save-dev or yarn add eslint -devĢ. So visit the extensions section of VSCode (ctrl + shift + x) and search for Eslint and Prettier - Code formatter and install it. We also need to enable the eslint and prettier extension for the VSCode. Open the terminal in your project root folder and install eslint as a dev dependency.So let us see how to configure that for your next react js project. The setting is available now in Visual Studio Code Insiders, and will be available in Visual Studio 16.4 Preview 2 in the Tools Options menu. 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. TypeScript’s built-in formatter now supports semicolon insertion and removal at locations where a trailing semicolon is optional due to JavaScript’s automatic semicolon insertion (ASI) rules.

When I started using react for my projects I never used eslint or prettier for the development. This frustrates users while writing code. There are only really few occasions where you need them, and youll see those if you use a linter. Errors are a major problem in our usual 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.
