DEV Community

Seog-Jun Hong
Seog-Jun Hong

Posted on

1

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.

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay