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.

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay