Static Analysis

Introduction

Static code analysis is a method of debugging by examining source code before a program is run. It's done by analyzing a set of code against a set (or multiple sets) of coding rules. Static code analysis and static analysis are often used interchangeably, along with source code analysis.

Static tests are the first step in the Testing approach.

Linting

To perform Static tests, we use the package called Eslint (opens in a new tab)

what is Eslint ?

ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

Configuration?

To configure Eslit for static analysis, we create the file called .eslintrc that contains configuration for the linting process.
below the file content:

{
  "extends": ["plugin:import/errors", "next", "next/core-web-vitals"],
  "rules": {
    "import/no-anonymous-default-export": "off",
    "react-hooks/exhaustive-deps": "off"
  },
  "ignorePatterns": [
    "**/cypress/**/*.{js,jsx,ts,tsx,mdx}",
    "jest_config",
    "node-scripts"
  ],
  "settings": {
    "import/resolver": {
      "alias": {
        "extensions": [".ts", "tsx", ".js", ".jsx", ".css"],
        "map": ["@", "./src"]
      }
    }
  }
}

First, we include plugins for linting, then we set rules to either follow or disable, whereas 'ignorePatterns' is meant to ignore some directories we don't need to statically analysis. . Finally, for the resolver property, it tells the linter to map path so it can match that to not produce errors.

Command

Execute the following command

npm run lint