Getting to Know ESLint, JavaScript Linter

Written on May 02, 2020 • 5 min read

Available in:

Lint or linter is a tool to analyze source code to mark errors, bugs, code conventions, and verify code quality.

In this article, I'll explain one of the tools or modules that's very helpful in working on a project: ESLint, one of the famous JavaScript linters.

If you don't know what ESLint is, it's a tool for doing static analysis of our code so we can quickly find problems or potential bugs in the code we've written.

Why You Should Install Linter

ESLint is essential for anyone building JavaScript applications. By integrating ESLint with your project, the code you write will be more consistent and have fewer bugs if you follow ESLint's recommendations. Here are the benefits of integrating ESLint with your project:

Find Problems

ESLint automatically analyzes your code to see if it has potential bugs and follows the standards/conventions defined in ESLint's configuration. The advantage here is that you get quick feedback from ESLint. You don't have to manually check if your code follows best practices or identify potential future bugs. ESLint immediately notifies you of potential errors or warnings if your code editor supports it.

Fix Automatically

Beyond analyzing and verifying your code for convention compliance and potential bugs, another cool feature is that ESLint can fix your code when there are issues. In VSCode, there's a lightbulb icon 💡; when you click it, suggestions for fixes appear.

Customize

With ESLint, you can also customize the configuration, parser, and rules to combine with ESLint's built-in rules according to your project's needs. ESLint also supports TypeScript now, so if you want a linter for TypeScript, just use ESLint. Community support for ESLint is extensive, so you shouldn't be confused if you want to combine React + ESLint or Vue + ESLint—you can find plugins here. There's plenty of support available; you just need to search for it on NPM.

Integration Into Project

Now, how do we integrate ESLint into our project? Here I'll show you the steps to get ESLint installed in your project.

Integrating ESLint into a project is not too difficult. If you already have a JavaScript project, the installation is straightforward—just run the script below:

### NPM
npm install -d eslint
### Yarn
yarn add --dev eslint

After ESLint is installed, run the following command to initialize the project with linter:

### NPM version >= v5.2.0
npx eslint --init

It will appear like the image below:

You're given 3 options. The first uses 3 commonly-used configs:

The second option lets you define basic rules yourself, and the third inspects JavaScript files in the project. I recommend using the second option for more flexibility in customization. If you choose the third option, you'll get questions like in the image below:

Then a .eslintrc.js file will be created. Here's an example of its contents:

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 2015,
    sourceType: 'module',
  },
  rules: {
    indent: ['error', 4],
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    semi: ['error', 'never'],
  },
}

In this file, you can customize your own rules or use ones already provided by the community. A list of rules can be found at this link. To see what commands ESLint can execute, use the command npx [eslint](https://eslint.org/) --help.

After we integrate with our project, when your editor supports ESLint, red or yellow underscores will appear like in the image below:

This indicates that your code doesn't comply with the rules defined by ESLint. You're forced to change the code to make those red underscores disappear.

Show Error And Fix

Also add a script to the package.json file like the script below:

/* package.json */
{
  // ...
  "scripts": {
    "lint:scripts": "eslint --fix --ext .js --ignore-path .gitignore ."
  }
  // ...
}

Once you've added this script, you can simply run the command yarn lint:scripts or npm run lint:scripts in the terminal. If there are errors in your code, they'll appear as errors or warnings after running the linter. Here's an example of errors like the image below:

P.S. The --fix flag automatically fixes code issues that the linter can fix, while issues that can't be fixed only appear in the terminal results. The --ext flag filters which file extensions will be checked by ESLint.

The --fix flag doesn't 100% fix our code; there are also things that need manual fixing. But at least ESLint reminds us.

Summary || TLDR;

Lint or linter is a tool to analyze source code to mark errors, bugs, code conventions, and verify code quality.

ESLint is one of the JavaScript tools for doing static analysis of our code so we can quickly find problems or potential bugs in the code we've written.

We can integrate ESLint not only with JavaScript but also with TypeScript. You can also use a complete NodeJS boilerplate I created to work with your team or alone. Focused on small to medium-scale projects.

Credits

Blog

What is Semantic Versioning (SemVer)?

When you frequently build applications using npm or yarn, you've probably wondered about many things. What is the purpose of package.json? Why do we get package-lock.json when using npm and yarn.lock when using yarn?

Top 5 Chrome Extensions for GitHub

In this article, I'll share the Chrome extensions I use for GitHub to increase my productivity when using GitHub daily. There are many great extensions out there, but I'll share the 5 Chrome extensions for GitHub that I use.

#experience#tools