Introduction
For this weeks lab, I was tasked with adding some new features to my release 0.1 project. These included a CONTRIBUTING.md file, a formatter, a linter, and editor integration. Doing these changes gives users contributing to the project a useful guide, plus some tools that will help them commit clean, well formatted code. In this blog, I will discuss adding these changes to the project and answer questions related to the lab.
Which tools did you choose? Why did you choose them? Provide links to each tool and briefly introduce them.
For the code formatter, I chose prettier. This is because my project uses javascript as its main language, and I felt like it would be a simple setup. Here's the link for prettier: https://prettier.io/
For the linter, I chose ESLINT. I chose it because ESLINT is a very common linter for javascript code, and there's a lot of useful guides on setting it up. Here's the link for ESLINT: https://eslint.org/
How did you set them up in your project? Be detailed so that other developers could read your blog and get some idea how to do the same.
For prettier, the first step was to install it with npm:
npm install --save-dev prettier
Then, I added some files to my project. I added ".prettierrc", which contained some default formatting options for prettier. I also added a .prettierignore file which specifies which files and directories to ignore. For this project, I listed every file except for the two that should be worked on (index.js and ai.js). Finally, I added scripts in my package.json file so the user can run prettier from the command line.
For ESLINT, the first step was to install it with npm:
npm install --save-dev eslint
Then, I used this line to generate a configuration file for ESLINT:
npx eslint --init
Then, like with prettier, I created an eslintignore file that would ignore files that aren't being worked on. Then I added scripts to package.json so the user can run ESLINT on the command line.
What did the tools find in your code? Did you have to fix a lot of issues?
When using prettier, I noticed a bunch of indentation got fixed. I expected this, as the indentation of my project before was honestly very messy, which tends to happen with javascript projects. When using ESLINT, it actually found a variable that was declared but never actually used. This surprised me as I just assumed it was needed in the code. So I got rid of it. So thankfully there wasn't that much to fix according to the code formatter and linter.
How did you get the tools to run from the command line?
As discussed before, I added scripts to the package.json file which allowed the tools to run from the command line. They looked like this:
"scripts": {
"format": "prettier --write .",
"format-check": "prettier --check .",
"lint": "eslint .",
"lint-fix": "eslint . --fix"
}
This way, if you do npm run, followed by one of the commands listed (for example npm run format-check), it will run that tool from the command line.
How did you integrate the tools with your editor/IDE?
To integrate the tools with my editor VScode, I installed the VScode extensions for prettier and ESLINT, and wrote a configuration file that would run the tools whenever you saved. To test these, I purposefully indented something poorly, then saved it as I watched prettier correct the indentation. To test ESLINT, I added an unnecessary variable, and ESLINT would highlight it as an error. But I wasn't done here, as I wanted to create a file that would automate this process for others using VScode. To do this, I created an extensions.json file that contained recommended extension for new users to install once they cloned the project.
What did you learn from the process?
In conclusion, this lab introduced me to some very helpful tools that I was able to use in order to make my project cleaner. I learned not only how to use these tools but automate the process in order to make it easy for myself and future developers of my project. At the end of the day, this project helped a ton with my understanding of making the contributing process better.
Top comments (0)