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
strict flag set to
true for TypeScript).
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:
We can add individual rules, for example, capturing usage of console.log:
The range of configurations is really quite large, it is worth reading the documentation.
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
"prepare": "cp scripts/pre-commit .git/hooks/ && chmod +x .git/hooks/pre-commit"
printf "\n *** Running ESLint, Prettier and unit tests *** \n"
npm run lint
npm run prettier
npm run test
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.
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.