DEV Community

Ririio
Ririio

Posted on

Working with Linter

Tools Description
Prettier Ensures that the repo is available to follow a consistent formatting throughout its development cycle
ESLint/Standard Analyze the code from the repo to ensure that no bugs occur by following the best coding practices, and locating problematic patterns



I use prettier simply, because I've been using it for my code since the 3rd lab, as it was introduced by my partner. I used both ESLint and Standard to ensure that I see as much problem as possible.

Setting Up Prettier

Install prettier locally, and should be set up for DevDepencies for later stages
npm install --save-dev --save-exact prettier

Once this is done, we go ahead with creating our .prettierrc.json and .prettierignore.
The former is used for when you want to change the default setting of prettier, whilst the latter is to tell it to not touch any of the files or directories provided.

Setting Up ESLint

Install ESLint locally with npm init @eslint/config.
Packages like ESLint are usually already set up for DevDepencies, so there is no need to imply it when installing. This will automatically provide us with our .eslintrc.js which will be used to create our custom rules. The rules that that are available for you to apply are located on their website https://eslint.org/docs/latest/rules/

Setting up Standard

It's a lot easier to to set up standard compared to the other two. First you need to enter npm install standard --save-dev, and that's basically how it goes. From what I read, there's no rules to set nor to apply, everything just work as intended.

Hidden Problems

I first ran my prettier with npx prettier --write, and noticed that most of my files were automatically changed. It turned out I wasn't even following the standard that I had given myself.
Once this was done I ran ESLint with eslint --fix, which showed me that I have been using "let" instead of const on some of my properties. Lastly, I have typed in npx standard and it showed that I adding semi-colons, after each statement (they might not cause problems, but there's no point of adding them there).

VSCode

I have changed my setting to add prettier and eslint for every time my file is saved.

What I Learn

I learned that regardless of how much you follow the standard, that there will always be moments where you might mess up. I always ensure that I use const for things that don't change, and let to those that do, but as standard pointed out, I still made a mistake regarding using one of them.

Also, having a standard for a repository to follow from the start is the best form of action for it ensures that regardless of how many people contribute for the project, they will always be using the same standard from when the project was still smaller

Top comments (0)