VSCode Prettier Extension 설치로 코딩을 편하게 해보자

안녕하세요. 딥테크입니다.

최근에 웨페이지 제작을 하는 풀스택 강의를 듣고 있는중인데요.

그 첫번째 강의로 HTML/CSS 강의를 듣고 있습니다.

나름 메모장 세대라 메모장으로 코드를 짤거라 생각했는데 VSCode에서 다 되는군요. ㅠㅠ

아직은 초기 단계라 코드들이 복잡하지 않지만 점점 늘어날수록 눈도 침침해지고 머리가 지끈거릴거 같습니다.

그래도 VSCode에는 MarketPlace를 통해 Extension을 설치할수가 있는데요.

그 중에서 복잡한 코드를 보기 좋게 정렬해주는 Extension이 있어 공유합니다.

사실 나중에 또 설치할 일이 있을테니 잊어버리지 않게 미리 포스팅해둬야겠죠? ㅎㅎ

한번 같이 설치해보시죠.

VSCode를 실행 후 MarketPlace로 이동해주세요.

검색란에 'Prettier'을 입력하여 검색해주세요.

Prettier를 선택하여 설치해주세요. 저는 이미 설치가 된 상태라 사용안함이라고 나오네요.

설치 후에는 기본 설정에서 몇가지 옵션을 추가해줘야 합니다.

명령 팔레트를 띄워주세요.

Settings을 입력 후 나오는 기본 설정을 클릭해주세요.

아래에 레드박스로 표기된 옵션을 입력하여 줍니다.

콤마 및 마침표가 누락되지 않게 잘 입력해주세요.

"editor.formatOnSave": true,

"editor.showUnused": true,

"editor.defaultFormatter": "esbenp.prettier-vscode",

옵션 입력이 끝났고 잘 동작하는지 확인해봅시다.

좌측 이미지처럼 줄바꿈을 여러번하여 작성된 코드도 저장을 하게되면 우측처럼 자동정렬이 되어 저장이 됩니다.

앞으로 코드가 늘어날수록 매우 유용하게 사용할 수 있을 거 같네요.

좌측 : 저장 전 / 우측 : 저장 후

이제 JavaScript 배우는중인데 이건 더 어렵군요. ㅠㅠ

오늘은 여기까지.