My first npm package - eslint-formatter-complexity
Tags: javascript, npm, eslint
Published: 2019-05-06 15:56:14

---
title: "My first npm package - eslint-formatter-complexity"
description: "I've pubilshed an npm package for an eslint formatter that shows a sorted list of the most complex code in your codebase"
tags: ['javascript', 'npm', 'eslint']
published: true
---

Note: this is a cross-post from my personal blog [https://www.webpusher.ie/2019/05/04/eslint-npm-package](https://www.webpusher.ie/2019/05/04/eslint-npm-package)

I've just published my first npm package - [eslint-formatter-complexity](https://www.npmjs.com/package/eslint-formatter-complexity). It's an eslint formatter that uses complexity metrics (see below) to highlight the files in your codebase that are in most need of a refactor.

The code is available in a public repo https://github.com/mlennox/eslint-formatter-complexity - issues and pull requests are welcome.

This is a continuation of work from [a previous article 'Find the most complex code using eslint'](https://www.webpusher.ie/2019/02/01/eslint-complexity).

## How does it work?

The formatter receives the eslint results, finds the complexity metric related rules that have been broken (see below), sorts the offending files in order according to how many errors and/or warnings were generated, and outputs the list to the console. This differs greatly from the standard eslint output which just lists the files and their broken rules as they are passed to it based on file structure.

A typical output from the formatter is shown below.

![](https://thepracticaldev.s3.amazonaws.com/i/la968hb18sdix1vd90x0.png)

The complexity metrics I refer to are measured by the following eslint rules

- [complexity (cyclomatic complexity)](https://eslint.org/docs/rules/complexity)
- [max-params](https://eslint.org/docs/rules/max-params)
- [max-statements](https://eslint.org/docs/rules/max-statements)
- [max-statements-per-line](https://eslint.org/docs/rules/max-statements-per-line)
- [max-nested-callbacks](https://eslint.org/docs/rules/max-nested-callbacks)
- [max-depth](https://eslint.org/docs/rules/max-depth)
- [max-lines](https://eslint.org/docs/rules/max-lines)

## Why?

For fun! 

Also, I'm working on a [series of blog posts related to abstract syntax trees](https://www.webpusher.ie/2019/02/06/ast-series) and [a few articles about eslint](https://www.webpusher.ie/tags/eslint) so I have been aiming to properly write up the code and release it as I go along.

I have a theory that code standards work best when automated; not really a controversial theory it has to be said. 

Automated enforcement of code standards helps create consistent code, speeds up code reviews, helps reduce errors, and should also facilitate developers in maintaining a mental model of the state of their codebase. I released the [eslint-formatter-complexity](https://www.npmjs.com/package/eslint-formatter-complexity) package primarily for the last point - to help developers visualise the complexity of their codebase. 

Listing the files in descending order of complexity helps to emphasise which files are in need of a refactor. Ideally it should be added as a step in your CI build, with the results of each build added to quality gates and communicated to the entire team.

## Issues

If you have any questions, suggestions for enhancements, or if you find any bugs, please raise them on the repo

[https://github.com/mlennox/eslint-formatter-complexity/issues](https://github.com/mlennox/eslint-formatter-complexity/issues)