No matter how many years of experience in web development, everyone makes mistakes when writing code.

Even if most of the time these are simple errors such as typos or indentation, it is still important to correct these errors to ensure that you keep an impeccable codebase.

This is where linters come in!

These code quality tools allow a static analysis of the code to ensure that it respects certain development rules that can be set by your CTO or Lead Developer, for example.

Once a linter is in place, it will systematically check and standardize the syntax of your code to meet the conventions specific to a particular project or those set by your company.

A linter can directly format your code on save ("thanks to the lint on save") to ensure good practices configured, but also report errors to you if it finds any during its analysis.

In this article, we will focus on the ESLint linter.

ESLint can be installed quickly with NPM with the following command:

npm install eslint --save-dev

Once installed, you can test eslint with the command:

npm run lint

Attention, for the linter to work, you must define rules in the .eslintrc.json file

In order for ESLint to do its job, it is necessary to define operating rules in the eslintrc file.

Below is an example configuration for TypeScript that we use in our web development agency.

{
  "root": true,
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "next/core-web-vitals"
  ],
  "parser": "@typescript-eslint/parser",
  "env": {
    "browser": true,
    "es6": true,
    "jest": false
  },
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "arrowFunctions": true
    }
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "react/prop-types": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-var-requires": "off"
  }
}

Now that you know how to use ESLint, you can also use Prettier, another code quality tool, very useful for formatting code automatically!

You can install it with the command below :

npm install --save-dev --save-exact prettier

Now that you know how to use ESLint, you can also use Prettier, another code quality tool, very useful for formatting code automatically!

You can install it with the command below :

{
  "semi": true,
  "printWidth": 140,
  "tabWidth": 2,
  "endOfLine": "lf",
  "singleQuote": true,
  "bracketSpacing": true,
  "useTabs": false,
  "arrowParens": "avoid",
  "jsxSingleQuote": true,
  "trailingComma": "all"
}

Have fun !