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:
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:
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]
Oldest comments (0)