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:
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.
Top comments (0)