Hello, I hope you are having a good day.

Last week, I received a ticket to set up a CI/CD pipeline on GitHub Actions for an existing project. The project used Node.js with TypeScript for the backend. Therefore, my plan was to install ESLint and run it in the pipeline.

I followed the installation instructions from the ESLint official documentation. I extended the ESlint rules with @typescript-eslint:recommended plugin. I also installed and extended the eslint-plugin-unicorn plugin because I believe it is currently one of the best plugins available. It also developed by sindresorhus, who has many open-source projects and is used by millions of project. I had learned a lot by identifying and addressing rule violations from this plugin.

Since the project is using TypeScript, I needed to install @typescript-eslint/parser to ensure ESLint could lint TypeScript code. I also added parser: '@typescript-eslint/parser' to the eslintrc file to make it work.

After setting up the ESLint, I added a script to the scripts field in the package.json file to run the lint check later locally or in the CI/CD script. To keep it simple, I named it lint.

Then, I tested it locally. Since it was an existing project, there were hundreds of error reported by ESLint. To make the changes incremental, I copied all of the rule IDs one by one to the eslintrc file and changed the severity to off instead of error to resolve the errors. Once all the errors were resolved, I changed all the off rule severities to warn. My plan was to keep the CI/CD pipeline running smoothly with minimal changes, but I set the severity to warn so that developers would notice linter violations in their code. I intended to incrementally change the severity back to error in the future while fixing the code.

Here is what the final .eslintrc file looks like.

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:unicorn/recommended"
  ],
  "rules": {
    "unicorn/filename-case": "warn",
    "unicorn/prefer-node-protocol": "warn",
    "unicorn/no-empty-file": "warn",
    "unicorn/explicit-length-check": "warn"
  }
}

After everything is okay. I created the GitHub Actions workflow in the ./.github/workflows/code-quality.yaml. The steps are:

  1. Check out the repository to the CI/CD server.
  2. Setup Node.js.
  3. Install the application dependencies.
  4. Run the linter.

Here is what the file looks like.

name: 🕵️‍♂️ Static Code Analysis

on: push

jobs:
  check-format:
    name: 📏 Linter check
    runs-on: ubuntu-latest
    steps:
      - name: ⬇️ Checkout repo
        uses: actions/checkout@v4

      - name: ⎔ Setup node
        uses: actions/setup-node@v3
        with:
          node-version: "18"
          cache: "npm"

      - name: 📥 Install deps
        run: npm ci

      - name: 📏 Linter check
        run: npm run lint

To summarize here is what I did:

  1. Installed ESLint
  2. Set up the parser to make ESLint understand TypeScript
  3. Configured ESLint rules
  4. Added a script in the package.json file
  5. Ran the linter locally
  6. Set the severity of error rules to warn
  7. Run linter in the GitHub Actions

That’s all from me. I hope this helps you get an idea of how to set up ESLint in an existing TypeScript project.