Static Analysis tooling

This week, I integrated Prettier, a well-known code formatter, and ESLint, a linting tool, into my CLI tool to improve the code quality. This was done to make the code easier to read and understand and to maintain a consistent format throughout the project.

Setting up the tools

Prettier

To get started with Prettier, I followed these steps:

1. Install it using the following command: npm install --save-dev --save-exact prettier.

2. Use the prettier watch command to determine which files Prettier will affect.

3. I noticed that I didn't want some of the files to be formatted, so I created a .prettierignore file. In this file, I included the names and extensions of the files that I didn't want Prettier to touch.

I left config files to be default.

Linter

Setting up ESLint is similar to Prettier:

1. Install ESLint by running npm install --save-dev eslint.

2. Create a configuration by using
   npm init @eslint/config. At this point, I kept the configuration as it is. However, since ESLint doesn't support assert at this point, I needed to use the Babel version of ESLint.

!! Note I only use this because assert is not supported in standard eslint so if you don't use assert you can just skip this step

Run this command to install the necessary Babel packages: npm i -D @babel/eslint-parser @babel/plugin-syntax-import-assertions. Then, modify your ESLint configuration to use the Babel parser:

parser: "@babel/eslint-parser",
  parserOptions: {
    requireConfigFile: false,
    babelOptions: {
      plugins: ["@babel/plugin-syntax-import-assertions"],
    },
  },

To add simple npm run commands, I referred to the documentation of both tools to find the necessary commands. Here they are:

"format": "prettier --write '**/*.{js,html}' --ignore-path .prettierignore",
"lint": "eslint ./src --ext .js ./bin --ext .js"

Lastly, I'll explain how I integrated these tools with VSCode, which was quite straightforward. First, you need to install both ESLint and Prettier extensions for VSCode. Then, go to the settings and search for these extensions to configure them as per your preferences.

Even though I encountered these tools throughout my studies, with almost half of my assignments involving them, I had never set them up myself before. This experience was pretty cool.