Upgrade your Code Quality with Linter and Formatter (Part 1)

You have been working on javascript/typescript projects, and your code looks like a mess without a good formatting, and issues happen because you accidentally use undefined variables or variables with the same name in different scopes makes the code hard to read.

Thanks to ESLint and Prettier, a linter and a formatter tools, all of those issues can be solved with some simple steps integrating those two into your projects.

Before jumping into the setup steps, let’s understand quickly what ESLint and Prettier are:

ESLint: a linter tool helps you find and fix errors in your code. Basically, it checks syntax and some code standard rules, but it also supports plugins that you can write your own custom check, and don’t worry, there are tons of good plugins out there shared by communities you can use.

Press enter or click to view image in full size

ESLint throws errors

Prettier: this formatter helps you format your code into a good shape 🧹.

Press enter or click to view image in full size

Before and after formatting

That’s all about their definition.

Let’s dive into the setup

First step, let’s create a new project using npm

1mkdir ~/linter && cd ~/linter
2npm init -y

Create a file index.js and add the below code

1const calculateTotal =()=> {return 100}
2// bunch of other code here
3const result = calcualteTotal(a, b)

What you can see here is we invoked a wrong function name. Of course you can see it easily in this sample because there are only 2 lines of code 😂, but in reality, your file may contain hundreds lines of code 📄.

Try to execute it and see the output:

Press enter or click to view image in full size

How can we avoid that? ESLint comes to rescue us.

Install the ESlint:

1yarn create @eslint/config

It will ask you a few questions, choose as the below:

Press enter or click to view image in full size

After you have done that, it would create a file eslint.config.mjs

Press enter or click to view image in full size

We just leave its config as default for now and we’re good to go, get the ESLint to find bugs for us.

Run this command and see how it works:

1npx eslint .

Voila!

Press enter or click to view image in full size

It found many errors

• no-unused-var: when you have a variable but it is not used anywhere. Yes, ESLint catches it too.
• no-undef: you use variables which are not defined yet

All we need to do now is fixing those errors and run the file again

1const calculateTotal =()=> {return 100}
2// bunch of other code here
3const result = calculateTotal()
4
5console.log(result)

run “npx eslint .” again and errors will disappear.

Great job, ESLint!

ESLint also has many best practice built-in rules which you should follow to level up your code standard. Check it out here.

Let’s say, I prefer “const” to “let” if a variable is not subject to change. I will add that rule to eslint.config.msj like this:

Press enter or click to view image in full size

And update the index.js as below:

1const calculateTotal = () => { return 100 }
2// bunch of other code here
3let result = calculateTotal()
4
5console.log(result)

“npx eslint .” again and And here it is!

Press enter or click to view image in full size

As I mentioned before that ESLint not only finds errors, but will help to fix it as well. Not all errors it will fix for you, some you will have to fix it yourself. With this “prefer-const”, it can help you quickly fix it.

Run the ESLint command again but with additional option “ — fix” to see how it auto-fixes the error for you.

It is a bit too long, isn’t it? I hope you get the general idea and apply it to make your code better.

We should take a break here before continuing with Prettier — I assure you would love it.

Thanks for reading! I’ll see you in

Part 2: https://medium.com/@alan.nguyen2050/upgrade-your-code-quality-with-linter-and-formatter-part-2-274c0109bbda