visual studio code auto format lint on save

02 February 2018 Wes Bos recorded a nice video about setting up Visual Studio Code.

However, I make improvements only on the Medium article. This document constitutes the original version of my article. It will then prompt you to install eslint-plugin-react so click on yes.Please consider my cross-post on Medium. 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.

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. When I started using react for my projects I never used eslint or prettier for the development. This frustrates users while writing code.

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.

Visual studio code auto format lint on save