Consistent JavaScript syntax with ESLint

Javaughn Grant
Nov 29, 2020 · 4 min read
Image for post
Image for post

If you have no idea what in the world ESLint is, well you’re in the right place. ESLint can be referred to as a pluggable JavaScript linter. Now what does that mean. Well it’s basically a tool used for identifying and reporting on problems in JavaScript. Which makes your code easier to maintain.

What’s next you say? Well let’s pull up our text editor and terminal and start the demonstration process !

Commands

Create a folder if you haven’t already and cd into that directory. Pull up the and console run npm init -y , what this will do is create a package.json file. The -y flag is there so it doesn’t prompt us with all the usual questions from the command.

After running the command we should now see a package.json file within our file structure. Great job so far. We now want to run npm i --save-dev eslint which will allow eslint to be installed and saved as a dev dependency.

Image for post
Image for post

The next thing we will want to do is initialize eslint into our project. To do so we will run ./node_modules/.bin/eslint --init in the terminal. This is going into the node_modules directory that was created from our install of eslint and then we init to initialize eslint. You will then be prompted with a wizard on how you want to config eslint. Below are the questions from the wizard and my answers.

Image for post
Image for post

Of course choose the answers that fits your needs. After running this command we will now be able to see what ESLint can do for us.

ESLint in action

Image for post
Image for post

Here we have some sample code to play around with to demonstrate what ESLint is like. Now there’s nothing wrong with the above code. Everything will work as intended, however ESLint will help us maintain a consistent style across our code. Below we can see many indications of possibly syntax errors according to all the squiggle underlines.

Image for post
Image for post

Looking at the last line, line 13 where we call our pepperinii() function, we are presented with an error saying that a newline is required at the end of a file.

A simple fix for this would just give our code base a newline at the end of the file. If we take a look at line 4. We will be presented with two errors — these are default rules from ESLint and can be changed within the eslintrc.json file that was generated from our earlier commands.

Now the errors that we are presented with are; semi-colon expected at the end of line 4 and also that our moreFood variable has been defined but never used. Simply redeclaring moreFood = 'some value' will not solve the error of it not being used. To find out more on what ‘being used’ mean check out the doc below.

Below is what everything being refactored to a proper way would look like; We can always change the rules to what we want them to be inside the eslintrc.json file. We can access the ‘rules’ from eslint site and add and remove what we need.

Image for post
Image for post

As we see here I added no-console and set it to “off” to disable the error that we receive when using console.log within our codebase. eol-last is also set to off to remove the error that requires us to have a new line at the end of our file.

// .eslintrc.json
"rules": {
"no-console": "off",
"eol-last": "off"
}

There are a ton of rules to play around with and fit to your needs. Such as using double quotes instead of single quotes, indentation expectations and much much more. Feel free to view the below links for more insight on ESLint.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store