Publishing a real NodeJS package: Code Quality Improvements

For one of my TypeScript projects, I have needed a Windows-compatible unzip tool. I haven’t found one, which has a d.ts declaration file. So I decided that I will implement a zip/unzip NodeJs package with build-in TypeScript declarations.

Of course, it would be easier to write a declaration file for one of the existing tools, but a step-by-step guide about publishing a NodeJS package would be more useful.

Due to the length of the topic, I split the guide into four articles:

Publishing a Real NodeJS Package: Project Bootstrap

Publishing a real NodeJS package: Implementation and Tests

• Code Quality Improvements (current)
• Publishing with GitHub Actions (upcoming)

In this article we will set up:

• EditorConfig
• Prettier
• JSDoc
• Jest code coverage
• SonarCloud
• David

✅ Formatting the source code

The best reason for formatting the source code is that it will make it easier for someone else (or for you) to read later. There are two tools that I usually use: EditorConfig and Prettier. They come with formatting standards that we can modify for our preferences.

🗸 EditorConfig

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.

We can configure: charset, indent size and style, end of the line, newline, and trailing whitespace.

Here is the content of the .editorconfig:

The content of the .editorconfig file.

You can find the EditorConfig Plugin for VS Code here.

🗸 Prettier

Prettier is also a code formatter. It enforces a consistent style by parsing the code and re-printing it with its own rules. We can install it with the following npm command:

npm install -D prettier

Prettier needs a config file called .prettierrc:

The content of the .prettierrc file.

For using it, we should add to the package.json scripts:

...
"scripts": {
  "format": "prettier --write \"**/{src,test}/*.{js,json}\"",
  ...
},
...

Now we can run the npm run format script, which will prettify our js and json files in src, and test folders.

📜 Generating documentation with JSDoc

JSDoc is a JavaScript documentation generator. So basically, we can add inline jsdoc comments right into the source code, and JSDoc will scan through and generate the full documentation.

We can install JSDoc with npm:

npm install -D jsdoc

JSDoc needs a config file called jsdoc.config.json:

The content of the jsdoc.config.json file.

As you can see the documentation output folder is docs. So, we need to add to the .gitignore file like this:

The first two lines of the .gitignore file.

Modification of the package.json:

...
"scripts": {
  ...
  "predocs": "rimraf docs",
  "docs": "jsdoc -c jsdoc.config.json",
  ...
},
...

Now we can easily generate this documentation with the npm run docs command:

💯 Generating coverage report with Jest

In the previous article, we have configured Jest for testing our project, but Jest comes with the functionality of generating coverage reports: statement, branches, functions, lines, etc.

The last three properties should be added to the end of the jest.confic.json file:

The content of the updated json.config.json file.

We also have to update scripts in package.json:

...
"scripts": {
  ...
  "pretest": "rimraf coverage",
  "test": "jest",
  ...
},
...

This is the result of the npm test script:

❌✔️ commitlint

commitlint is a tool for linting commit messages. We can install it with the following command:

npm install -D @commitlint/cli @commitlint/config-conventional

and configure with the commitlint.config.js file:

The content of the commitlint.config.js file.

This tool will enforce us to write formatted and meaningful commit messages:

<type>[optional scope]: <description>
[optional body]
[optional footer(s)]

For example:

git add .
git commit -m "chore: add commitlint configuration
> use conventional config"
git push

We will use it with husky ⬇️

🐶 husky

Husky is a tool for making Git hooks for projects. With its help, we can run lint, tests, etc when we commit or push to Git.

We should install version 4:

npm install -D husky@v4

After the installation is finished, we should extend the package.json file with this:

...
"scripts": {
  "postinstall": "husky install",
  ...
},
...
"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
    "post-commit": "npm run format"
  }
}

The postinstall script will run after every npm install , and it will install husky’s git hook that we are described in the "husky" attribute.

For now, we should run the husky install manually:

npx husky install

🔍 SonarCloud

SonarCloud is an easy-to-use cloud-based code quality service. We can set up automatic code review, and inspection with just a few clicks. It supports GitHub, and it’s free for open-source projects.

We just need to log in with GitHub, and it will connect and load our repositories. After that, click on the + button on the top right corner, and choose “Analyze new project”.

On the following page, we need to select an organization, after that the project, and then just click on the “Set Up” button.

That’s it. SonarCloud will analyze the project’s source code:

📛 Adding some useful badges

The david-dm.org tool gives a nice dependency badge to our NodeJs package. We just need to add these two magic formula into the README.md:

![dependencies](https://david-dm.org/rdarida/cross-platform-zip/status.svg) ![devDependencies](https://david-dm.org/rdarida/cross-platform-zip/dev-status.svg)

We also can add a SonarCloud Quality Gate Badge markdown:

[Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=rdarida_cross-platform-zip&metric=alert_status)](https://sonarcloud.io/dashboard?id=rdarida_cross-platform-zip)

In your SonarCloud project, you can grab it from here:

Click on the Copy button.

This is how the result looks on GitHub:

The header of the README.md file on GitHub.

If you enjoyed this article, please share, give a few claps, and most important stay tuned for the next one, which will about publishing with GitHub Actions.

Thanks for reading!