Formatter, Linter and more

There are some amazing tools available for developers to make coding easier. Today I am looking at a few of those and how it was like installing and using them in my static-dodo repo.

Prettier

Prettier is a code formatter that can take badly written code and make it 'prettier'. There is a nice playground that shows exactly what it does. I have been using Prettier since my very first Web class so I am very used to the way it formats code. Installing it is easy, I used this command after reading the docs:

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

Then I created a .prettierrc to add some custom rules and a .prettierignore to specify the folders to ignore.

ESLint

ESLint is a great tool to find problems in your Javascript code. I installed it following the getting started guide:

npm install eslint --save-dev

and then I initialized it for my project using the command:

npx eslint --init

This command will generate a .eslintrc.js file that can be configured as needed.

VS Code integration

My favourite way to use Prettier and ESLint is by integrating them into my editor (Visual Studio Code). There are extensions available for both:

• Prettier Extension
• ESLint Extension

Having the extensions already installed, I created a .vscode folder where I put settings specific to the project that will apply only to the workspace.
Inside that folder I have a settings.json file with a setting to run Prettier on each save:

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,

Husky

Finally I installed Husky which is a tool that allows you to run any script after each commit. I set it up to run Prettier so that if someone is not using Prettier inside of VS Code, this will take care of the formatting automatically.

Thoughts

Setting up these tools was straightforward and it was good to go through the docs to learn some new settings that I wasn't familiar with. Looking at Husky was brand new to me but now I realize that I encountered it before in past open source contributions.

I squashed all the commits together into one, including an update to the README.md and a new CONTRIBUTING.md file.