The quality of the code being developed is one of the key factors for maintaining a rapid pace of implementing changes and also ensures that long-standing software development does not become an increasing torment. In this article, I would like to mention some tools that strongly support maintaining high code quality in frontend applications.

Typing in strict version

It’s already hard to imagine larger applications written in JavaScript these days without typing support (usually using TypeScript). But in order for it not to be written unreliably, but actually provide a strong shield against errors, we should strive to always have strong typing configured (strict flag set to true for TypeScript).

ESLint

ESLint provides static code analysis for quick error detection. We can start with a default configuration using recommended rule sets depending on the libraries used, such as:

"eslint:recommended"
"plugin:cypress/recommended"
"plugin:prettier/recommended"
"plugin:@typescript-eslint/recommended"
"plugin:react/recommended"
"plugin:@angular-eslint/recommended"

We can add individual rules, for example, capturing usage of console.log:

"no-console": ["error"]

The range of configurations is really quite large, it is worth reading the documentation.

Prettier

Prettier is a code formatter that makes all developers involved in product development to use one formatting style, making application code easier to read. The formatting rules are worth establishing within the team.

GIT pre-commit hook and CI/CD

In order to enforce all of the above standardizations, we should add ESLint and Prettier verification at the CI/CD level, and preferably already at the time of attempting to make a commit with a pre-commit hook.

Below is an example of implementing the aforementioned hook, adding an NPM prepare script to package.json which will run automatically with the npm install command. Note that it will also work with npm publish and npm pack.

{
  "scripts": {
    "prepare": "cp scripts/pre-commit .git/hooks/ && chmod +x .git/hooks/pre-commit"
  }
}

scripts/pre-commit file:

#!/bin/sh

printf "\n *** Running ESLint, Prettier and unit tests *** \n"

npm run lint
npm run prettier
npm run test

status=$?
exit $status

SonarLint

SonarLint is an IDE extension that enables real-time code analysis to detect errors and security vulnerabilities in source code providing guidance on how to resolve them.

Summary

I hope that the handful of tools presented here will be useful to you as a support during the development of frontend projects. If you know of any other tools to keep your code quality high, share it in the comments.