The most universal JavaScript code monitoring tools article - Part 2

Welcome to the second part of The most universal JavaScript code monitoring tools article - Part 1[link] article.
In the first part I introduced you to some of the most universal code monitoring tools that you can use in your JavaScript projects.
Now, in the second part, I'd like to show you how to quickly start using them in both frontend projects in Vue.js or React.js and backends built with Express.js (applicable to many other web frameworks).
Ok, let’s get down to it!

Implementation and examples

ESLint

All you have to do to use ESLint is to follow these three steps:

1. Install packages

# Yarn:
> yarn add --dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-node

# NPM:
> npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-node

2. Configure plugins in .eslintrc.js file

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',

  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    "plugin:node/recommended"
  ],
};

3. Add command to script section of your package.json

  "scripts": {
    "lint": "eslint . --ext ts"
  },

Prettier

To keep your code formatted in one specific way with prettier you have to:

1. Install package

# Yarn:
> yarn add --dev prettier

# NPM:
> npm install --save-dev prettier

2. Add configuration file named .prettierrc.js with the following content:


module.exports = {
  tabWidth: 2,
  semi: true,
  singleQuote: true,
};

3. Add format command to your package.json

"scripts": {
    "format": "prettier --write src"
}

SonarCloud

SonarCloud is free for open source projects. All you have to do is to create an account on https://sonarcloud.io/ and connect your repository with the following steps:

1. Select “Analyze new project” option in the top right corner of the page.

2. Choose your project from the list.

Then, on the main page, you should be able to see the metrics for your project and correct all the detected issues:

TypeScript

Using static type checking in JavaScript code has never been easier!

1. Install package

# Yarn:
> yarn add --dev typescript

# NPM:
> npm install --save-dev typescript

2. Add configuration file named tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
  },
  "exclude": ["node_modules"]
}

3. Add build command to your package.json

  "scripts": {
    "build": "tsc"
  },

You can now benefit from static type checking in your application! Write your first file with ts extension and compile it to JavaScript using yarn tsc or npm tsc command.

Skipfish

Skipfish allows you to scan your website for security vulnerabilities. To analyze your project follow these steps:

1. Clone the repository

> git clone https://github.com/spinkham/skipfish

2. Install dependencies and build the project

> apt-get install g++ make libidn11-dev libpcre3-dev zlib1g-dev libssl1.0-dev
> cd skipfish && make

3. Scan your website

./skipfish 
    -o outputdir 
    -C authCookieName=cookieValue
    https://application-url.com/

After that, in the output directory, you will have an index.html file. That’s the site generated by skipfish with the results of the last scan. After opening that file in your browser you should see all the issues compressed into a list and sorted by the severity of the problem.

Package Vulnerability Audits

Not everyone realizes how big the problem is with badly maintained, community-driven packages used in your project. People do not talk about it aloud as it is the core feature of JavaScript applications. NPM contains almost 1.2milion packages. Some of them are not maintained anymore, some of them contain bugs or security issues. It is important to keep your project updated with security fixes of the dependent packages.
If you use GitHub you may have seen this message before:

If GitHub cares about the security of your project, you should too. All you have to do is run yarn audit or npm audit in the root directory of your project.
Don’t worry if there is too much to fix - you can try running npm audit fix to let npm try to fix it by updating vulnerable dependencies.

PageSpeed Insights

Lastly, when your page is secure, free of bugs and with well written, maintainable and tested code - you can check if it provides a nice user experience for your end-users.
Just visit https://developers.google.com/speed/pagespeed/insights/ and paste your website URL.

The result will look like that. If you want to speed up loading of your webpage you can try server-side rendering, changing the location of the server which serves the content or you can implement content caching.

Jest runners

Many people don’t know it, but if you use Jest you can use it to run not only your test suites but all the other automated tasks like linting or compiling. It reduces the complexity to set it all up as a before-push hook locally or as a step in a continuous integration system of your choice.

Each jest runner has to be set up as a separate jest project. In the main directory of your project create a file named jest.config.js with the following content:

module.exports = {
  projects: [
    '<rootDir>/jest-test.config.js',
    '<rootDir>/jest-eslint.config.js',
    '<rootDir>/jest-tsc.config.js',
  ],
};

Here we have defined three projects for running:

  • Jest tests
  • ESLint
  • Typescript compiler

You can define more projects which will fit your needs and use the already existing runners or write a new one. Here you can find a list of the most popular jest runners:
https://github.com/jest-community/awesome-jest
For every project, you have to define the rules specifying how to execute it. That’s what the ESLint runner looks like:

module.exports = {
  runner: 'jest-runner-eslint',
  displayName: 'lint',
  testMatch: ['<rootDir>/src/**/*.ts'],
};

Then you can run all your tools at once with the command yarn jest or npm jest. That should produce a simple, readable report for all of the projects.

GitHub Actions integration

Now it is finally time to keep it automated and run linting, compiling and tests on every commit push. If you use GitHub create a file .github/workflows/ci.yml in your project with the following content:

name: CI/CD
on: push
jobs:
  test:
    name: Test
    runs-on: ubuntu-latest
    env:
      CI: true
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Setup
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
      - name: Install
        run: yarn install
      - name: Integrate
        run: yarn integrate

Push it to your remote GitHub branch and navigate to the Actions tab to see the project integration up and running. If you want to make Pull Requests automatically annotated with ESLint warnings and errors you can check out this action:
https://github.com/marketplace/actions/eslint-action

Final thoughts

It is important to keep repeatable tasks automated. Using the tools described in this article you can not only make your peer developers’ work more enjoyable, but you will also improve the development velocity and drastically increase the security and overall quality of the product you are working on. It’s crucial to configure all the tools to suit your needs in the most appropriate way as this will allow you to make the best possible use of their capabilities. The setup is done only once and the results are visible throughout the whole project development cycle.

You can check the project repository fully set up here: https://github.com/JonaszJestem/monitoring-tools

Now it’s time to enjoy writing great code!

PS In case you got some questions or you'd like to write your project with us - feel free to schedule a call and let's talk!