The most universal JavaScript code monitoring tools - Part 1

In this article, I want to introduce you to some of the most universal code monitoring tools. My main goal is to speed up the development of your project and prevent the most common bugs from happening after you release your application. You have to remember that the code you are writing will be most probably used and read by other developers. That means there is no tool that will completely replace good code review as there is no widespread software which will look at the inspected code in a wider context. So, code like that is certainly not needed in your application and will most probably catch your code reviewer’s eye:

export const uselessFunction = (): void => {
  return [].forEach(element => element)
};

But that snippet is completely valid for most static code analysis tools which,however, doesn’t mean the tools described below are useless. They are mainly responsible for:

  • eliminating most repeatable errors and typos
  • showing you the code that cannot be parsed by JavaScript engine
  • enforcing certain code style for your application
  • searching for variable types issues
  • finding security vulnerabilities

If you haven’t yet used these tools in your projects, it’s high time you started now! Consider adding the ones you find useful and observe how it speeds up the development and reduces the number of bugs.

Remember that these libraries are meant to be helpful for developers. If you and your teammates are complaining about the enforced rules, reconsider using that tool or simply make an exception on a specific file, directory or even the whole project. On the other hand, there may be some common issues which are not caught by any of the tools you will use, but there is also a solution to that. Most of the software listed below is configurable and can be also extended with your own policies.

The article is divided in two parts. Firstly, we will take a brief look at all the tools useful for JavaScript projects. Then, in the second part, you will find example usage of these tools for both frontend projects in Vue.js (implementation applies also to React.js) and backends built with Express.js (almost identically for other web frameworks).

Analysis tools

ESLint

https://www.npmjs.com/package/eslint
Undeniably the most common tool for JavaScript static analysis with almost 11 million downloads every week. A simple, but powerful tool for static checking of your JavaScript code. It allows you to find common bugs, complexity issues, parsing errors and code style mismatches. Moreover, ESLint can fix the trivial issues for you automatically. Designed to be extendable with plugins, it allows the developers to implement extensions for every big library that you most probably use like:

Most of the plugins come with a recommended set of rules so you can use all of them right away integrated into ESLint.

Prettier

Prettier is a JavaScript library made for enforcing code style in your project. ESLint can also be configured for that use, but with all the plugins it is usually slower. In my opinion, it is better to have separate tools for code quality (ESlint) and code style (Prettier). Prettier can be used for all the types of files you will be dealing with during JavaScript app development. It can style your CSS stylesheets, TypeScript files, HTML markup and has support for big frameworks like React or Vue.

SonarCloud

SonarCloud, similarly to ESLint, helps you control the quality of your codebase. It comes with a predefined set of rules which can be customized. SonarCloud can be easily integrated with your public repository for free. If you want to keep your technical debt in check I suggest setting up SonarCloud quality gates which can warn you about the alarming level of test coverage, bugs or any other metric of your choice.

sonar cloud

TypeScript compiler

TypeScript, with over 11 million downloads every month and a growing community of developers is a library worth checking out. It allows us to use types in our code and compile it down to the plain JavaScript code. With static type analysis, our code is less error-prone and makes us more confident with the implemented changes.

typescript compiler

Cspell

Cspell is a less known library, but definitely you should give it a try. Cspell checks the words used in our code for typos. The library is capable of checking our functions, classes and variable names against the dictionary even if they are written in various conventions like camelCase or snake-case. Cspell integrated with our CI keeps our code and documentation readable.

cspell

SkipFish

It is important to keep your application data safe and unaccessible to an unauthorized third party. ESLint and SonarCloud may help to analyze your code for implementation errors, but they cannot check an actual, running version of your application. In order to do it you can run SkipFish, which scans your web applications performing actual requests like a real user would do. SkipFish looks for security vulnerabilities in your system.

Packages Security Check with Yarn/NPM

The applications you develop most probably rely on hundreds or thousands of third-party libraries. If you want to provide a safe and secure experience for anyone using your products it’s important to run security audits against packages you have used within the project. Package managers like Yarn or NPM provide this functionality out of the box with commands yarn audit or npm audit.

PageSpeed Insights

Finally, after ensuring your product is safe and secure, bug-free and well-maintained you can check if it provides fine user experience. PageSpeed Insights from Google allows you to check your website for:

  • First Contentful Paint
  • First Meaningful Paint
  • CPU idle time within the first load
  • Time for your website to be interactive
    And many, many more issues related to the loading speed of your website, content serving and other things related to a close to the end-user environment. Finally, you can get the overall score the inspected website scored.

Summary

OK, that’s it - I hope you will find this toolset useful in your daily work. It definitely speeded up and made my work easier, that's why I decided to share this knowledge with you.
Stay tuned for the second part, where I’ll show you how to easily set up these tools for both frontend projects in Vue.js and backends built with Express.js.