Mohan pd.
Mohan pd. Author of The Coders Blog. Also a professional fullstack javascript developer working with various tech company and client around world.

Complete eslint configuration guide for ReactJS project with VSCode.

Feb 08, 2019 · 3 minutes
Complete eslint configuration guide for ReactJS project with VSCode.

Configuring eslint for the React JS project help you save extra time by auto detecting syntax error. Moreover you can enforce coding standard and convention from these setting. There are lots of tutorial for simple setup but in this article I have shown a must complete way.

This article assume that you can setup ReactJS project using create react app or webpack and has basic knowledge of vscode

Here are list of this we will perform
  • Install required package from npm.
  • Configure .eslintrc file
  • Prettier setup and jsx auto complete for VSCode
  • Configure your own rule over airbnb standard
  • Setup .editorConfig file for project
  • VSCode workspace and debugger setup

Install required package from npm.

Navigate to the project directory and add following package as development dependency for your project in package.json file. Then from the terminal install them by typing npm i or yarn

Configuring .eslintrc file

.eslintrc file is responsible for instructing IDE/eslint package about syntax and convention you want for your code base. So create a .eslintrc file in the root of your project and add the following line.

Installing required extension package for VS Code

In VS code marketplace there are many extension to help and automate you vscode activity. For this process we will install following packages which is required for react js. Copy and past the name extension in VSCode marketplace to install these extension. Shortcut for this is
cmd/ctrl + shift + p && type Install extension in VSCode

  1. ESLint
  2. debugger-for-chrome
  3. We will discuss later
  4. Color Highlight
  5. Show the exact color for color code
  6. EditorConfig for VS Code
  7. Generate editor config for you project
  8. ES7 React/Redux/GraphQL/React-Native snippets
  9. Quick snippet to generate react component. For instance type rcc enter for state full component & rfc enter for state less component
  10. Highlight Matching Tag
  11. Better visual effect for JSX Syntax closing
  12. IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS
  13. As name suggest intellisense for scss anh html code
  14. Material Icon Theme
  15. Relevant Icon for the files in folder in your project directory.
  16. Auto Comment Blocks
  17. With this extension by typing /** you can generate comment block
  18. TODO Highlight
  19. You can left to or note for your code. todo-example



Setup .editorconfig file for project

Create .editorconfig file in project root files and add the following line inside this files.


VSCode workspace and debugger setup

Navigate to File > preferences > setting and click icon icon {} top right corner to open json setting. add the following line at the bottom of the file.

To setup the chrome debugger in VS Code

Then install </code> Debugger for Chrome </code> package for VSCode then Create a .vscode folder in root of your project if you already don't have it and inside this folder create new file launch.json and add the following line. At line number 8 update your port number so that it lunch on right port. Then to start debugging pressctrl + shift + D and press play button.


Closing and further reading

In this process I am using airbnb and some of my own rule to setup eslint. You can always find you own configuration and update it in .eslintrc file.

Also there are many handy extension for JS & React Developer in VSCode extension marketplace. You can experiment on those package also.

There are tool like husky to catch git commit hook and run eslint. find more details on its github page if you want to automate or run auto fix before commit