Using Code Formatter and Linter

This week I was introduced to automated code formatting and linter to check for mistakes in code, I have heard of those tools before but never used them until this week. Those tools assisted me to maintain the code structure and readability, using those tools resulted in huge differences between the original project and "fixed project".

To install Prettier, I followed their official installation instructions, which can be found here, and I did the same to install ESLint. There was a small problem that I ran into when I ran "eslint file.js" command, the system warmed that "eslint" is not a valid command, this was eventually solved by installing the eslint-cli, which was not mentioned in the official instructions.

After I finished the set ups and configurated the tools, I ran the "script npx prettier --write ." to automate the formatting, this changed hundreds of lines in my .js files, I wasn't really surprised by this because I have always thought that the formatting of the codes really needs improvement after 6 labs and 3 people have worked on it, I have always wanted to manually make it better but this was done automatically, it is amazing. After formatting, I used "eslint ./" to check for code improvements I could make in my .js files, I believe it produced around 10 suggested fixes, with some duplicate suggestions, some were fixed by adding comments to indicate that the variables are global and some were unused variables which are now removed, there was also a global return line warning, now the return line has been moved into a function.

Throughout the process of utilizing those tools, I learned how to set them up and the basic configurations and found out that they are amazing tools and extremely easy to use, I will definitely use more of those tools in my future projects.

Comments

Post a Comment

Popular posts from this blog

Working on the Telescope Project

Image
Two weeks ago, I've had my first chance of working with the Telescope project and utilized it's back-end API to work with my DLCheck Project. In the past few days, I got more involved, played around and worked with Telescope's front-end portion. One of the issues that I found in the project repository got an idea from the Node.js webpage and requested for a React Component to display the contributors' information to thank them for their effort in developing/maintaining the Telescope project. In the beginning, I was a bit lost by reading the existing code, but luckily, the telescope project was developed using the React JS library and utilizes Material-UI framework, I have worked with a project which was also developed using the same tools during my Release 0.2 assignment, therefore, I was able to understand pieces of codes fairly quick. The new Card Component was overall not that hard to implement but it still took me a quite bit of time, I was given a custom React Hook...
Read more

Hacktoberfest -1

 This week the Hacktoberfest event has finally started and I had the chance to contribute to real open source projects. Finding an issue that I can fix took way longer than I thought it would, most of the issues were either taken or they were too complicated for a first time contributor. After a while of searching around GitHub repos with "good-first-issue" labels applied, I found a couple repositories that seemed interesting to me. One of the repositories requested for a new URL redirects in their projects, I thought this was an easy fix, but that it was more complicated than I thought it would be, the original repository had no instruction on how to run and test the application, therefore, I had to leave a comment in the issue asking for instructions. As it turns out a test must be written first before adding any code to the project, and when I ran the initial test before adding anything into the project, I was already getting testing errors, it seems like a challenging one...
Read more