2023.Dec.22.Fri [Front] VScode 유용한 확장 도구들

VSCode로 작업을 하면서 유용하게 쓰고 있는 확장 프로그램들이 있다.

강사님의 추천으로 설치하고 사용하는데, 나중에 환경이 바뀌었을 때 다시 설치해야 할 때 활용하기 위해 글을 작성한다.

<Visual Studio Code 확장 프로그램>

1. Auto Rename Tag
HTML 작성 시 여는 태그나 닫는 태그를 수정할 때 한 번에 수정이 완료된다.

2. ESLint
JS나 JSX의 문법 오류를 찾아 표시해 주어 코드의 품질을 향상시키고 일관성을 유지할 수 있다.

3. Korean Language Pack
VSCode 설정 언어를 한국어로 바꿔주는데, 사실 이것은 사용하지 않아도 큰 불편은 없다.

4. Prettier - Code formatter
코드 포맷팅 도구인데, 일관적인 스타일을 유지하게 해주며 정리해 주는 기능이 있다. 특히 크게 체감하는 부분은 들여 쓰기 부분과, 줄 바꿈, 공백에 관련된 부분인데 정말 편리하다!

 

Prettier은 설치하고나면 설정을 해줘야 한다.

 - 먼저 맥에서는 command 와 ,(컴마) 윈도우에선 Ctrl과 ,(컴마)를 눌러주면 설정이 열리는데 설정에서 default format을 검색하고 아래 사진과 같이 Prettier - Code formatter로 수정해준다.

- 그다음 다시 editor format on save를 검색하고 아래 사진과 같이 체크 박스에 체크해주면 끝!

 

이외에도 다른 유용한 확장 프로그램들이 더 있는 것 같은데, 나중에 사용해 보고 좋으면 추가할 생각이다 :)