DEV Community 👩‍💻👨‍💻

jsong89
jsong89

Posted on • Updated on

Lab7 - Make it prettier!

Github repo: Repo

Overview

In this lab 7, the goal was to make the personal ssg project that was conducted in the class cleaner and prettier in design and grammar using various APIs.

What I decided?

The description of the lab introduced several useful tools, and among them, I decided to use Prettier and ESLint, which I have used before.

Prettier

Prettier makes it look better by checking the files of the set format in the desired range when running. To use the formatter, I added

"prettier": "prettier --write \"./**/*.{md,js}\"",
"prettier-check": "prettier --check \"./**/*.{md,js}\""
Enter fullscreen mode Exit fullscreen mode

, an executable script, to package.json among various usage methods. Also, I created a .prettierrc.json file and applied my personal preference settings.

ESLint

Actually I was a little confused when I added Prettier and looked at the formatter to add ESLint. This is because the resulting output from Prettier and ESLint was almost exactly the same (in terms of formatter). Therefore, as a result of looking into the relevant part a little more, Prettier does not show the user what part has been fixed by formatting the codes with a script inside without a separate process. However, in the case of ESLint, formatting is the same, but it helps users not to repeat the mistake again by making the user recognize which part needs to be fixed and which grammatical part or design part is the problem.

Personally, I think ESLint is more helpful for developers :)

So, as in Prettier, I put the ESLint execution syntax in package.json

"eslint": "eslint --ignore-path .gitignore .",
"eslint-fix": "eslint --fix --ignore-path .gitignore ."
Enter fullscreen mode Exit fullscreen mode

, and applied the customized ESLint settings .eslintrc.json.

Contributing

If there are no guidelines for that part, of course, users may be very confused about using the feature, so we created Contributing.md for the newly added part so that users can naturally familiarize themselves with the feature.

With closing..

Actually, this week's lab was very easy compared to the previous rap. In fact, I think it was the professor's consideration when considering Release 0.3. (Laughs) With this, we will wrap up the lab and move on to Release 0.3 quickly.

Top comments (0)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠