OSD600 Lab 7

 For this week's lab in my Open Source Development class, we looked at static Analysis tooling. The tools we needed to add to our link checkers were a source code formatter and linter. I decided to use Prettier for my source code formatter and ESLint for my linter. Prettier is a formatter that helps make code more readable. One really useful feature it has is it allows you to "customize" how you want it to format your code by making a .prettier.rc file. For example in mine, I make sure every line ends with a semicolon, the padding width is 70 and I allow trailing commas.

Prettier logo
ESLint is is another static Analysis code tool for catching "silly" mistakes in JavaScript. It will raise an error and let you immediately if you did something wrong. This can also be helpful to enforce coding styles. Similar to Prettier it allows you to "customize" how you want it to check your code by making a .eslintrc.json file. For my code, I made sure every line ends with a semicolon and to only use double-quotes.

ESLint logo

The reason I chose these tools is that I am aware they are used in Telescope and thought it would be a good idea to learn how to use them in case I need to do something with them while working on telescope.

When setting up prettier and ESLint I first installed the node modules (npm install --save-dev --save-exact, and npm install eslint). After that I made a .vscode folder with 2 files: extenssions.json and settings.json. extenssions.json will let people know what extensions they need to install in VS code the first time they open the project and ask if they wish to install the recommended extensions. settings.json allows the static Analysis tools to run automatically every time you save a file. ESLint found some imports I was not using, and prettier helped format the code nicer. Running the tools from the command line was pretty straightforward since I read the docs (ESLint and Prettier). Integrating from the IDE was a bit tough but I looked at the code in Telescope to get an idea. I did run into some issues because at first, I installed these tools in the wrong directory, then my folder structure got messed up. But after I took a step back and fixed everything it worked fine! Besides learning how to use and configure Prettier and ESLint I learned to be more careful and pay attention to where in the folder you are running commands. To be honest I still have no idea how my folder structure got messed up but I'm happy I was able to fix it! 😀 












Comments

Post a Comment

Popular posts from this blog

OSD600 Release 0.4 Part 3

Image
 This is the last blog for OSD600 and the last part of release 0.4! I am excited to be writing this as after this I will be done with everything I need to do for my classes this semester, and graduate! One issue I noticed while working on this is I did not fully understand what was needed to "port" a component from Gatsby to Next. At first, I thought everything you needed to do to port a component was in this migration guide  posted in the issue . After talking to some people on Slack I learned we must not only follow the migration guide but also convert the JavaScript code in the components to TypeScript. I have worked with Typescript before so I had an idea of how it works/what it is (it's basically JavaScript with types), but I never knew how to convert JavaScript code to TypeScript code. After doing some research I learned this process can be broken down into two simple steps: 1. Change all the .jsx files to .tsx files. 2. Add types to all the variables made. Eg. func
Read more

OSD600 Lab 5

Image
 This week we learned about rebasing in Git! Rebasing is basically taking multiple commits and "grouping" or "moving" them into one commit. Before I started the lab I did the walkthrough on the OSD600 GitHub Wiki. At first, I struggled with it (kept getting errors when running git rebase master -i). Then I decided to start over again and I noticed the first time I forgot to commit some files on the refactor branch. I am happy I did this first because it made the lab go very smoothly.  Before I started the lab I took a look at my code and wrote down the improvements I was planning to make. I decided to do these 3 things: change my regular expression variable from a let to a const, remove an array I never used, and update some functions to use the ES6 arrow syntax. It's been a while since I used arrow functions so I used this resource to guide me Every time I added and tested a feature I did a git commit. One improvement that caused an error was when I updated som
Read more

Release 0.3 PR2

Image
  For release 3 we have to make 2 PR's. The first one must be for the  Telesope project  and the second one must be for an external project. These PR's must "build up" from the PR's we did for release 0.2. This blog post will highlight working on the PR for Telescope. When I started this the first place I went was to the issues page on the Telescope repository. I saw there were some tests that needed to be written and were interested in taking on one of these issues. These were more complex than the test I wrote for the first part of 0.3 so  I saw it as a good opportunity to improve my skill. I asked in Slack for some advice on what to do and was given this idea from David: This seemed like a good test to write (challenging but something I can figure out) so I made an issue for it and started working! When I first wrote the test everything looked fine but it kept on failing. At first, I thought that's good, if we pass an invalid date shouldn't the test fa
Read more