Prettier & ESlint
Tags: opensource, github, javascript, vscode
Published: 2021-11-05 16:11:36

This is the first week that we came back from the study week. And we have our __Lab 7__ in this week. Lab 7 is not about coding new stuff or contributing on other people's repository. Lab 7 is about __formatting__ the code we have from the SSG or I can say it is making it __looks better__. 

##Main Extensions
There are __two__ main extensions we are going to use in this __Lab 7__. We are going to apply `prettier` and `eslint`.

##Procedure
Honestly, although this is not a complicated lab, it _cost me a lot of time_. And the reason for that was I _got stuck_ at __testing__ my code. After read over the instruction of the Lab 7, I started to __watch the video__ that our professor provided. And I learned how __effective__ `prettier` and `eslint` would be. I think these are pretty __powerful__ tool for any programmers. It can help us keep a same formatting when we coding with a huge team project. Also, it would save us a lot of time since they are very good at finding those tiny mistakes.

My __first difficulty__ was no matter how I modify my `.prettierrc.json` file, it keep showing me this error message:
![error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5wc8rd22ij154zf0n52.png)
And I had no idea how to fix it. I asked my friend, I googled it, or even I rewrite the code inside the `.prettierrc.json` file, none of them would work. And the my friend suggested me to __delete__ the file and __remake__ it. I didn't think that would work but I still give it a shot. Luckily, that solution worked! _Although I don't know the reason for that, even up until now._

My __second difficulty__ was testing my program after I added the code for `prettier`. I installed the `prettier` to my program, and I configured it. Also, I added a new "one-step" solution for running my formatter on the project from the command line. __However__, I got stuck at running `prettier`. Due to I'm new to this extension, and I didn't find the example from the materials that our professor provided. So I just tried whatever come to my mind. I tried `npx prettier`, I tried `npm prettier server.js`, I tried `npx prettier server.js`, and _so on..._ __But none of them could run.__ And finally, after __20 minutes__ trying, I typed `npm run prettier`, and it worked! And then I just `commit` my code through `Git`.

__Lastly__, when I set up my code for the `eslint` and try to run it. It returned my this __error__ message:
![eslint error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdkgujwso7igrze4kaos.png)
It was telling that I had an undefined variable in my program. I was thinking to __rewrite__ my code to fix this error, but that would __change too many lines__ of code in my program. And then I realized that I can just simply define the variable globally, then the problem would fixed. So I just read through my program again. And then I found that what I need to do is use __`var`__ to define the variable globally. And then the problem solved!

##My Feelings
I don't think this is a _complicated_ lab. It doesn't have a long instruction, or a long coding requirement. It's just about some small steps to __add new extensions__ to my program. However, I do think this is a __tricky__ lab. Because it's very strict about __small stuffs__. Sometimes maybe just one different letter would cause an issue, and it would cost you 10 - 30 minutes to fix it. Anyway, through this Lab 7, I got familiar to add the `prettier` and `eslint` to a `JavaScript` program!

Link to my Repo : [[My-First-SSG]](https://github.com/DerekJxy/My-First-SSG)