【VSCode 플러그인】 코딩 초보자야말로 Prettier를 우선 인스톨하자(동영상 해설 첨부)

소개

이 기사는 「HTML&CSS속습 교실」의 학습 페이지의 하나 「플러그인 설치 발췌한 것입니다.

이 페이지를 읽고 얻을 수 있는 장점

Prettier가 어떤 것인지 알 수 있습니다

VSCode 플러그인 설치 방법을 알 수 있습니다

Prettier 플러그인을 활성화하기위한 구성 단계를 알 수 있습니다

Prettier의 역할

Prettier를 한마디로 설명하면 「코드를 깨끗하게 성형해 주는 툴」이 됩니다.

코딩 학습을 시작한지 ​​얼마 안된 초보자 있다고 생각합니다만, HTML·CSS·JavaScript등이라고 하는 코드를 쓰고 있으면 「코드가 고차고차해 버린다」라고 하는 경험은 없습니까?

코드가 짜증나면

읽기 어려움

코드에 이상한 부분이 있어도 눈치 채기가 어렵습니다

일 수준이면 선배 엔지니어에게 화를 낸다

등 단점의 온퍼레이드가 됩니다^^;

다만, 그렇다고 해서 「코드를 깨끗하게 유지한다」라고 하는 것은 코딩 초보자에게 있어서는 익숙하지 않은 작업이므로, 꽤 어려울까라고 생각합니다.
("원래 깨끗한 코드는 어떤 상태?"라는 느낌이 아닐까요?)

그러한 고민을 한번에 해결할 수 있는 툴이 「Prettier」가 됩니다.

현역에서 일을 하고 있는 엔지니어라면 사용하고 있는 사람 쪽이 많을까 생각합니다만, 코딩 학습을 시작한 초보자야말로는 「Prettier」를 인스톨 하는 것으로, 학습 효율이 크게 개선되는 것 가나라고 생각합니다^^

Prettier 설치 및 구성 절차

순서는 이하의 동영상으로 해설하고 있으므로, 그쪽을 참고에 똑같이 진행해 주셨으면 합니다^^
↓
htps: //같다. BE / X H7 Cn Dy
(직접 동영상을 삽입할 수 없기 때문에 YouTube 링크를 붙이고 있습니다.)

결론

Prettier 설치 및 설정이 완료되면 파일을 저장할 때마다 '자동 성형'이 실행되는지 확인해 봅시다 ^^

이번은 「Prettier」를 소개했습니다만, 그 밖에도 코딩 초보자용으로 소개하고 있는 플러그인을 「플러그인 설치 라고 생각합니다^^