DEV Community

Seog-Jun Hong
Seog-Jun Hong

Posted on

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
}
Enter fullscreen mode Exit fullscreen mode

3. Set up Prettier to ignore certain files 

node_modules
Enter fullscreen mode Exit fullscreen mode

4. Add a command in your package.json 

        "prettier": "npx prettier --write .",
        "prettier-check": "npx prettier . --check",
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
    ]
}
Enter fullscreen mode Exit fullscreen mode

3. Create .eslintignore file 

node_modules
dist
Enter fullscreen mode Exit fullscreen mode

4. Add a command in your package.json 

"lint": "eslint . --ext .ts",
"lint-fix": "eslint . --ext .ts --fix",
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)