Add Eslint to our Project

This tutorial is part of a series. This is the second piece and the first piece can be found here. We finished off the last section by seeing Webpack run our application.

Eslint will help to clean up our code along with another addition called Prettier which we will cover at the end of this tutorial. Eslint can set itself up for you so let’s see what that looks like. Open your previous project and let’s create a branch, but first let’s make sure that we are on the master and we have pulled the most recent version of our application:

git checkout master
git pull
git checkout -b feat-01-eslint

We could install all the dependencies that we need manually but there is a pretty efficient way for Eslint to do this for us

npx eslint -init

We are going to press “Y” to proceed and follow along wit the prompts that Eslint gives us:

We are going to select ‘check syntax and find problems’ because we would like for Prettier to handle making the indentations, semi-colons, etc… for us.

Since we are mostly developing for the browser, we want to utilize import/export modules. If you were just developing for Node.js, you could choose CommonJS

We are just going to be writing and testing some Typescript code in most of our projects, so we don’t need to enforce rules for any frameworks. You definitely can choose React or Vue. Having these extra dependencies will not hurt, but these can also be added later on.

I am selecting to opt into Typescript, but that is your choice.

I personally like for this to be javascript, but if you like, you can choose json. I wouldn’t choose Yaml because it is really picky about spacing.

Then you will be prompted with the list of dependencies. This is the nice part about letting Eslint decide how to install this feature for you.

You can choose your package manager of choice. For this I’m sticking with npm.

Now you may notice that Eslint is not very happy with the webpack config files because they are using CommonJS for the imports. Let’s go into the .eslintrc.js file and add node to the env section.

  env: {
    browser: true,
    es2021: true,
    node: true,
  },

That will solve a couple of the issues, but we really don’t need to lint our webpack config so we exclude this from being linted. Create a new file in the root of the project called .eslintignore (make sure to put the dot at the front of the filename). Inside of this file, we can add things that we want to exclude from being linted:

webpack*.*

Now everybody is happy. Fire up your app by typing npm start into the console to make sure that everything builds. Now we are ready to add prettier. Let’s go back to the console and add this package.

npm install --save-dev prettier

Now let’s create a file in the root of our project called .prettierrc and inside just add some curly braces. This will start us with the defaults.

{}

There are two extensions that are worth mentioning. If you go to the extensions section of VS Code, we can add these two extensions:

With all this in place, let’s update our repo

git add .
git commit -m "add eslint and prettier"
git push -u origin feat-01-eslint

Now if you revisit your github repository, you should see a pull request waiting for you

Follow the promps and merge in your changes. That’s it. We are ready for the next section in this tutorial series.