Add Prettier and Linter

Prettier

Prettier is one of the code formatter and I often use it to enforce a consistent style. The reason why I chose it is I'm pretty familiar with the formatter and contributed to open-source projects by installing it.

Eslint

Eslint is used to find and fix problems with JavasScript code, and my project is written in Typescript but it is still available as long as the configuration is setup.

Installation of Prettier

1. Install Prettier

npm install --save-dev prettier

2. Create a .prettierrc file and add the following

{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": false,
    "singleQuote": true
}

3. Set up Prettier to ignore certain files

node_modules

4. Add a command in your package.json

        "prettier": "npx prettier --write .",
        "prettier-check": "npx prettier . --check",

Prettier is to rewrite the files, and prettier-check is only to check the files.

Installation of Eslint

1. Install Eslint

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. Create .eslintrc file

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

3. Create .eslintignore file

node_modules
dist

4. Add a command in your package.json

"lint": "eslint . --ext .ts",
"lint-fix": "eslint . --ext .ts --fix",

lint is to only lint all .ts files whereas lint-fix is to lint and fix the files.

Integrating tool with VScode

Create Settings.json file under .vscode

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

Learn from process

I used to install Prettier and Eslint a couple of times for open-source projects before, but from this time I completely figured out how to use formatter and why it is required for many open-source projects. Before I used formatter for this project, I didn't find any problems or issues but after I installed it I realized there were a couple of minor issues that I dealt with. I would say these formatter is super essential to every developer and we should use it to avoid minor problems, then we can only focus on programming.