Before I start developing any JavaScript project, I ensure that I have the following setup ready.

We are going to use my react-boilerplate project which has the minimal setup I use for any React project, including setup with Babel and Webpack.

Let’s start off by cloning the project:

git clone https://github.com/shemseddine/react-boilerplate react-eslint-boilerplate

Note: If you would like to follow on this tutorial, you’d want to have VS Code installed.

Navigate to your new project folder from the command line.

cd react-eslint-boilerplate

Now let’s get the required packages:

npm i -D babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-standard prettier-eslint

Most of these these packages are eslint plugins or configurations that we are trying to extends. We can define our own, but I have been happy with predefined setup and the extensions used here.

Now let’s create a new file in our root repository. Open the correct folder within VS Code and add our .eslintrc file.

This is our setup file for eslint and in here, we define which configs we are extending and which plugins we are injecting.

I have also added a custom rule for linebreak-style which fixes a line break warning on Windows. Checkout the eslint documentation for more information about extending these rules to meet your development standards/guidelines.

One final setup required for our dev environment is to ensure that our code runs through eslint as we’re developing. Let’s head to our webpack.config.js, and we add the following:

now our webpack.config.js should look like this:

webpack.config.json

Like I have mentioned before, Visual Studio Code is required for this tutorial. It’s an amazing lightweight IDE and works wonders with JS projects.

Let’s start off with installing a couple of extensions:

Navigate to View — Extensions (Ctrl+Shift+X) and install the following:

ESLint (by Dirk Baeumer)

(by Dirk Baeumer) Prettier — Code formatter (by Esben Petersen)

Now we need to tell VS Code to automatically run eslint and prettier as we’re coding. Open up your VS Code settings, File — Preferences — Settings (Ctrl+Comma).

Now in the Workspace settings add the following:

.vscode/settings.json

And that’s the setup. Now if you navigate to any file that you may have not formatted correctly, and as soon as you hit save on the file, it should transform to a well formatted file.

Look how my component is formatted as soon as I hit save!

Summary

So to summarize, it is beneficial to have eslint and prettier setup within your development environment as it allows you to standardize your development guidelines and enforce them.

When I’m going through many pull requests a day, the last thing i want to be highlighting is that someone has indented incorrectly or missed a semi colon at the end of the line. I can now focus on code reviewing the code!

Again, it is such a time saver as you’re developing or refactoring as formatting your code will no longer be a time snatcher.

Full version of the code can be found here.