Eslint configuration guide for ReactJS project with VSCode.

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

<li><b> ESLint</b></li>

<li><b> debugger-for-chrome</b></li>
<small class="text-muted">We will discuss later</small>

<li><b> Color Highlight</b></li>
<small class="text-muted">Show the exact color for color code</small>

<li><b> EditorConfig for VS Code</b></li>
<small class="text-muted">Generate editor config for you project</small>

<li><b> ES7 React/Redux/GraphQL/React-Native snippets</b></li>
<small class="text-muted">Quick snippet to generate react component.
For instance type <code>rcc</code> enter for state full component & <code>rfc</code> enter for state less component</small>

<li><b> Highlight Matching Tag</b></li>
<small>Better visual effect for JSX Syntax closing</small>

<li><b> IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS</b></li>
<small> As name suggest intellisense for scss anh html code</small>

<li><b> Material Icon Theme</b></li>
<small>Relevant Icon for the files in folder in your project directory.</small>

<li><b> Auto Comment Blocks</b></li>
<small> With this extension by typing <code> /** </code> you can generate comment block</small>
<li><b> TODO Highlight</b></li>
<small>You can left to or note for your code.</small>
<img src="/assets/images/todo-example.png" alt="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 Debugger for Chrome 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