This week my task was to add different capabilities to my project that significantly improve the development experience, especially for the open-source project with many contributors.

CONTRIBUTING.md

The first thing I added was a CONTRIBUTING.md file where I located all info that I used to have in readme.md file about how to install the tool for development setup.

Code formatter

The first thing I added was a code formatting tool that will help to have common code formatting across the whole app. The most used formatting tool in the javascript world is the prettier and I used it many times before so I decided to stick with it again. The installation and setup process was straightforward. I ended up using the such config:

{
  "semi": false, 
  "singleQuote": true,
  "arrowParens": "avoid" 
}

Then I added the command in package.json that enforces prettier formatting and described how to use it to the CONTRIBUTING.MD, on top of this I added the settings.json config for the vscode environment so people could have a "format on save feature"

Code Linter

Linter is a tool that helps to use the single code style in the application codebase. For example, linter can make sure that the developer uses let variables only in case it is mutated after the declaration and in the other case, it throws an error. ESlint is an industry-standard tool for such purposes in the JS/TS world so I used it. Again, the installation process was pretty easy with npm, even for my typescript environment. I found the config in the internet that seems to be widely used and ended up using it:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

Result

As a result, I improved the development experience of my project and make formatting and code style consistent. When I was done I squash the commit and merged it in the main branch.