A simple step by step guide to setup Eslint automation on your next big project

#javascript #react #productivity #node

As developers, we've all been there, you're looking through a project you wrote months ago, or you're diving into a new codebase, and everything seems jumbled. Imports are scattered, and the code structure is less than ideal. No joke when a code is crowded with imports that is not organised, looking through it, really affect our metal health.

Working with my backend engineering lead, I noticed that you can't just use imports haphazardly, it'll trigger an ESLint error. You need to follow specific formatting rules, including line spacing. This realization sparked an idea: why not share a step-by-step guide on setting up ESLint for a project?

In this article, I'll walk you through the process of setting up ESLint on a recent project. As a bonus, I'll show you how to implement automatic code reorganization when you save your file, ensuring your code always adheres to your ESLint rules.

Sounds awesome, right? Let's dive in!

Wait! Ask yourself

Why Organizing Imports Matters?

Before we get into the technical details, let's consider why organizing imports is crucial:

Readability: It becomes hard to quickly scan and understand what's being imported.
Maintenance: When you need to add or remove an import, it's not clear where it should go.
Consistency: Different team members might organize imports differently, leading to inconsistent code.
Debugging: Poorly organized imports can make it harder to spot issues or conflicts.

If you noticed since the begining of the article have been meationing eslint, eslint

What exactly is Eslint

ESLint is a tool that can check your code for errors and style issues.

Simple right .

So let's see how you can setup Eslint on your project

Step 1: Installing the Necessary Dependencies
First, we need to install ESLint and some additional packages. Open your terminal and type:

For a new node.js project

 npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-import-resolver-typescript

For a next.js project you just have to install this plugin, because eslint have already be configured by NEXT.JS

npm install --save-dev @typescript-eslint/eslint-plugin

Step 2: Creating the ESLint Configuration File
Create a file named .eslintrc.json in your main project folder and add this content:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "import"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript"
  ],
  "rules": {
    "import/newline-after-import": ["error", { "count": 1 }],
    "import/order": [
      "error",
      {
        "groups": [
          ["builtin", "external"],
          "internal",
          ["parent", "sibling", "index"]
        ],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

If you're using Next.js, add this line to the "extends" section:

"next/core-web-vitals"

This configuration tells ESLint to:

Group your imports into three categories: built-in/external, internal, and relative.
Add a blank line between each group.
Sort the imports alphabetically within each group.
After the last import add a blank line

Step 3: Configuring TypeScript (if you're using it)
If you're using TypeScript, make sure your tsconfig.json file includes this:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

This helps ESLint understand any special import paths you might be using in your project

Step 4: Setting Up Your Code Editor
To make the most of ESLint, you'll want to set up your code editor to automatically fix import organization when you save a file. If you're using Visual Studio Code, you can do this by adding the following to your settings:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Step 5: Adding a Shortcut Command
Lastly, let's add a command that you can run to check and fix all the files in your project at once. Open your package.json file and add this to the "scripts" section:

For Node.js

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

For Next.js

{
  "scripts": {
    "lint": "next lint",
    "lint:fix": "next lint --fix"
  }
}

Now you can run npm run lint in your terminal to check and fix all your files and npm run lint:fix to fix all eslint error.

So after setup all of this

What to Expect

You'll notice that your import statements are automatically organized when you save a file. Here's what it will look like:

First, you'll see imports from built-in Node.js modules and external packages you've installed.
Then, after a blank line, you'll see imports from other parts of your own project.
Finally, after another blank line, you'll see imports from the same folder or nearby folders.

All the imports within each of these groups will be in alphabetical order.

While we've focused on organizing imports, ESLint can do much more to help you write better code:

Catching Errors: It can spot potential errors in your code before you even run it.
Enforcing Style: It can ensure everyone on your team follows the same coding style.
Best Practices: It can encourage you to use recommended coding practices.
Customization: You can adjust the rules to fit your team's specific needs.

Conclusion:

Organizing your imports might seem like a small detail, but it's an important step towards creating cleaner, more maintainable code. By using ESLint to automate this process, you're freeing up mental energy to focus on the more important aspects of your project.

Remember, good code organization is about more than just making things look neat. It's about creating a codebase that's easier to understand, easier to maintain, and less prone to errors.

So take the time to set up ESLint in your project - your future self (and your team members) will thank you!