We all want our code to look beautiful, consistent, bug free and elegant, but nobody wants to do those tasks manually because it takes a huge amount of time. We already pressed for time to fix “real bug” and making our code runnable. We wish what if there was automatic tool who can check for our “silly” bugs, fix them, organize our code in a prettier way. Well, the wish is now REALITY! Someone also had the same regret and they made the tools for us which are called Static Analysis Tooling.
This week I had the chance to work with two of the awesome tools, Prettier and Eslint for my link checker tool. Prettier format codes (removing/adding extra lines, extra padding and so on). Eslint is for reporting simple mistakes we all do but easy to not notice it . It also can fix bugs which are fixable.
Adding Prettier in my link checker tool
To install Prettier in my project was straight forward following their docs. I installed it and created`.prettierrc.json` and `.prettierignore`files. In .prettierrc.json file, you can add any available rules you want to apply on your code and in .prettierignore, you add files or folders you do not want prettier to check for.
I added simple “one-step” solution for running the formatter on the entire project from the command line. To do that, I added the following line in package.json inside scripts:
Now I can run prettier to format my codes with the 1st command and 2nd command will make sure prettier has been ran.
npm run prettier
npm run prettier-checkAdding EsLint in my link checker tool
To install it, I followed the steps from their documentation. I added “one-step” solution the same way I did for prettier.
To run those commands, you can do npm run [the command you want]
Though adding it was pretty easy, but fixing the bug reported by eslint took me forever. Because of eslint, I realized the bad practices I have been following like using ‘==’ instead of ‘===’. After some long hour, I made my code bug free.
Adding Editor/IDE Integration
So far, what we did would only work when we run the command in our command line. But, what if we can get notify about our bug or our codes get fomatted while we are typing? That would be pretty cool!!
To do that, I made .vscode file as my editor is visual studio code and installed the extension of prettier and eslint . Later, I had to add two other files called, extensions.json and settings.json where I added neccessary configuration to let the code know about the tools. The most impotant line was to let editor know that when someone saves the file, format the code/report the bug. To do that, I added following configuartion in settings.json
"editor.formatOnSave": true,"editor.codeActionsOnSave": { "source.fixAll.eslint": true },"eslint.validate": ["javascript"]
Add a Git Pre-Commit Hook
Adding a pre-commit hook will run all the tools automatically when anyone commits in my project even though they forget to do it. How awesome is it? I had no idea there is a package who can do that for you. I used pre-commit package and added my two tools in pre-commit array:
"pre-commit": ["prettier","eslint"]Any Issue I had?
One issue I had was the conflict between eslint and prettier. For example, first I ran eslint and fixed everything, then ran prettier to format, but if I ran eslint again it will report error whatever changes I made for prettier. So, their styling was conflicting with each other. I googled and found, there’s another package called `eslint-config-prettier`which resolved the conflict.
To check how to use those tools in my project, check the CONTRIBUTING.md file. You can also find the details of how I added those tools, in my squashed commit. Thank you for reading!
