앞으로 코딩 공부를 하며 작업 환경이 변경될 것을 대비하여 Visual Studio Code(이하 VS Code)의 필수 확장 프로그램을 정리한다.
우선 VS Code에 확장 프로그램을 설치하기 위해서는 VS Code를 실행하고 좌측의 네모 조각 아이콘으로 표시된 [확장] 탭을 클릭한다. 검색은 위 "마켓플레이스에서 확장 검색"이라고 쓰여있는 창을 이용하면 된다.
1. Korean(사용법) Language Pack for Visual Studio Code
VS Code를 한글로 사용할 수 있게 해주는 확장 프로그램이다.
2. open in browser
VS Code로 작업 중인 html 파일을 바로 확인할 수 있게 해주는 확장 프로그램이다.
물론 윈도우 탐색기에서 열어볼 수도 있지만 open in browser가 설치되어 있다면 단축키 Alt + B를 통해서 바로 확인이 가능하다. 또, Alt + Shift + B를 사용하면 설정된 기본 브라우저가 아닌 다른 브라우저를 선택해 열어볼 수 있다.
3. Live Server
open in browser의 경우 단축키를 이용하여 작업 상황을 바로 확인 가능하지만, 코드를 수정한 경우에는 다시 Alt + B를 눌러 확인하거나 기존 창에서 F5를 눌러 새로고침 해야 한다. Live Server는 새로고침을 하지 않아도 실시간으로 변경된 코드를 반영하여 보여준다. 특히 html이나 css를 통해 디자인을 변경하는 경우에 유용하게 사용할 수 있다. 다만, 특정 상황에서 제대로 작동하지 않는 경우도 있으므로 평소에는 open in browser를 사용하는 편이 좋다.
4. Prettier - Code formatter
파일 저장시 코드 작성 스타일을 일정하게 유지시켜주는 확장 프로그램이다. 아직 코드를 복잡하게 사용하지 않으므로 효과는 잘 모르겠지만 일단은 정리해둔다.
5. Auto Rename Tag
태그 수정시에 자동으로 닫힘 태그도 변경해주는 확장 프로그램이다.
6. Material Icon Theme
VS Code의 파일 및 아이콘을 확인하기 쉽게 변경해주는 확장 프로그램이다.
7. Git History
이름 그대로 Git 저장소의 히스토리를 확인 및 검색할 수 있는 확장 프로그램이다.
8. GitLens -- Git supercharged
Git의 기능을 VS Code에서 GUI로 제공하여 손쉽게 사용할 수 있도록 도와주는 확장 프로그램이다.
몇몇 확장 프로그램의 경우 기능을 제대로 사용해보지 않은 상태이므로 추가적인 내용은 꾸준히 업데이트 예정이다.
23. 08. 05. 추가
9. TabOut
코드 작성 시 자주 사용되는 (), {}, [] 등을 탭(tab) 키로 빠져나오게 해주는 확장 프로그램이다.
10. Git Graph
깃(Git)의 GUI 프로그램인 Sourcetree 등을 사용하지 않아도 VS Code에서 그래프를 통해 Git 저장소 상황을 보여주는 확장 프로그램이다.
11. Live Sass Compiler
SASS나 SCSS로 스타일 작성 시 CSS로 실시간 변환해주는 확장 프로그램으로, SASS나 SCSS로 스타일을 작성하면서 Live Server 등으로 실시간 결과물을 확인하려면 필수인 확장 프로그램이다.