OSD - lab - 6 - Code Formatter

Now that hacktoberfest is over, we will be going back to our first open source project and upgrade it with a code linter and formatter as a part of lab 6.

Code formatters are an essential part of a software and there are a lot of benefits. It is very necessary to have this is an open source projects because a lot of people may have different styles that they abide with, but we cannot have different styles in our code base. To prevent this we were asked to implement this in our projects.

We had a lot of flexibility with what type of linter and code formatter we were allowed to use. I went with prettier for code formatting and eslint for linting. My primary reason for using these was that I had experience with working with these in the past and I sort of remember their implementation from my previous projects. You can find all the change I made in this blog here

New contributing.md file

The amount of documentation in my readme was getting out of hands, so I added a contributing.md file where I added the specifics of how to work with this repo if you were a developer. And only left the usage part in the readme.md

Code formatter - prettier

To set up prettier, I started by downloading it into the project using npm and then adding a new .prettierrc file which contained all the coding guidelines that the project should follow. The following image contains the contents of the file. I finally added commands to run prettier in npm scripts.

When I ran the prettier script for the first to test if it works, it literally changed 90% of my codebase. I was actually very surprised. Scrappy was working fine after the changes, so I just added these new changes to a new commit. To run prettier you can just run this command in the command line npm run prettier

Code Linting - eslint

To set up es lint, I started by downloading it using npm and then running npx eslint --init to get it running on my project. IT added a config.js file in the root of the project. I added commands in the npm scripts to run this, and boom. Linting was done. When I ran the linting command, I was expecting to get some messages, but I got none, it made me think if I implemented it correctly, I had to double triple check to make sure it was working. No errors were found at the end. To run eslint you can just run npm run lint if this command would detect issues, you can either fix those issue manually or run npm run lint:fix

Adding these to vs code.

I am lazy and I dont want to run a prettier command everytime I am done with coding. So I added a new file .vscode/settings.json which contained specifics to run prettier every time someone saved something the the files. Below are the contents of the file.

With this every time I made a new save, the changes went through prettier and I dont have to run the command at the end of my development.