Adding Code Formatter and Linter Tools to my code.

For this we have to add tools on my code base to make it more prettier and easier to code with and find errors. For this one since I’m coding in JavaScript I used Prettier and ESLint.

Prettier

Prettier is a code formatter that ensures your JavaScript code looks neat and consistent. It takes care of things like spacing, line breaks, and indentation automatically, based on a set of rules.

ESLint

ESLint analyzes your code to find and fix problems based on a set of predefined or customizable rules. It helps you maintain consistent coding styles and catch potential errors early on.

Set up

Both Prettier and ESLint was relative easy to install and set up on my project. Their websites has a really detailed instructions on how to install, use and configure the tool.

For prettier all I did was:

npm install --save-dev --save-exact prettier

node --eval "fs.writeFileSync('.prettierrc','{}n')"

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:nbuildncoveragen')"

• Finally I’m ready to use the tool with:

npx prettier . --write

For ESLint its just:

npm init @eslint/config@latest

And them I’m ready to use it with:

npx eslint yourfile.js

Using the tools

When I first used the tools, it reformatted my code to be more in the general default standard style and made everything more readable and consistent. It didn’t find much issues in it but just move everything. For instance I had a long list that is written horizontally, after I used the list it rewrote it in a vertical way. I do prefer it this way since it is more readable and I don’t need to scroll horizontally for it.

Integrating the tools in the IDE

This process took a bit more research. I had to look up how to edit my IDE(VSCode) on using the tools on save. What I had to do is install a plugin for it and went into its settings. It added a file on my workspace settings.json where I added:

{
    "editor.codeActionsOnSave": {


        "source.fixAll.eslint": true
    },
    "eslint.validate": ["javascript"]

}

This will reformat my code when I save the file. Based on the rules I added in the ESLint config file.

What I learned

I noticed before on several projects that they used ESLint and a few that uses prettier, but I never really know what they do. After using them for this lab, I learned that they are really nice tools for finding errors and issues, and automatically format my code to the code style I use or for the default standard. I can also use this if theirs other contributors to my project, they can use the tools to format their contributions based on the rules I setup for the linter and code formater.