[VSCODE] 내가 써서 좋았던 Extensions
(경험한 Extensions가 늘어날때마다 이 글을 수정할 예정임)
Git Graph
SourceTree와 같은 프로그램으로도 Git history tree UI를 편하게 볼 수 있지만, VScode Extension인 Git Grpah로 활용도 높게 사용할 수 있다.
설치하면 Activity bar 에 아래와 같은 바로가기 버튼이 생성된다.
*** 만약 바로가기 버튼이 안보인다면!!
위와 같은 바로가기 버튼으로 이동할 수 있는 Search 화면에서 아래와 같은 SOURCE CONTROL 이 나온다면, 이게 Activity bar 에 있어야 하는데 Search 안에 들어가 있는 것이다. (이유는 아직 모르겠다. 아시는 분은 댓글 환영해요.)
Search 화면에서 Git Graph를 봐도 되지만, Search랑 Source control이 한번에 나와 보기에 깔끔치 않았다.
Git Grpah를 Activity bar에 넣으려면 그저 저 SOURCE CONTROL을 드래그하여 Activity bar 에 드랍하면 된다.
Thunder Client
내가 Backend 개발시에는 API 개발을 하면서 별도 TDD가 있지 않은 한, Postman 프로그램을 통해 API 검증 테스트를 많이 하였다.
지금은 Frontend 개발에 집중하면서, 보통 프로그래밍을 하며 ajax던 axios건 직접 API 호출 로직을 구현하고 테스트가 되었으나, 다양한 여러가지 이유로 여전히 Postman을 사용하고 있다.
VScode도 실행하고, Postman도 실행하는 작업을 간소화 할 수 있는 확장 프로그램이 있다.
Thunder Client는 Postman과 목적은 같다. 다만, 코딩하고 있는 VSCode 에서 쉽게 실행하고 빠르게 확인할 수 있는 장점이 있어 매우 유용하게 사용하고 있다.
Thunder Client 를 설치하면 왼쪽 메뉴바에 바로가기 아이콘이 생성된다.
New Request 버튼을 누르면 API Method Type, URL, parameter 를 입력하고 우측 화면에서 바로 확인이 가능하다.
Postman과 같이 여러 Request를 저장하고 관리도 가능하다.
Live Server
local 서버 설정없이 소스를 서버 구동 환경에서 실행시킬 수 있다.
html 파일 편집창이나 EXPLORER 창에서 html 파일 우클릭으로 Open with Live Server 를 클릭하면 localhost 5500 포트로 구동되는 것을 확인할 수 있다.
IntelliCode
코드 추천 완성 기능을 해주는 확장 프로그램이다.
단순 기능이지만 유무에 따라 편리함의 맛이 오고 간다.
Extensions는 아니지만.. 활용하면 좋은 기능도 소개하고자 한다.
분할 창 기능
Frontend 개발시에는 VSCode를, Backend 개발시에는 IntelliJ를 사용하고 있다.
사실 코딩할때 난 단 한번도 창 분할을 안한 적이 없다.
여러 파일을 열게되고, 소스 스크롤이 넘칠때 세로 분할로도 봤었고..
그런데 VSCode는 같은 윈도우에서는 창 분할이 되나, 새로 창을 띄워서 분할하는 것은 안된다ㅜ
좌절스러워..
첨엔 그냥 받아들이고 썼는데, 이거 안되겠다 싶어서 찾아봤더니 아래와 같은 방법으로 사용할 수 있겠다!
File: Open Active File in New Window
Ctrl + Shift + p 로 short cut 리스트를 확인해 보면, 아래와 같은 명령어가 있다.
이 명령어를 실행하면, 현재 윈도우에서 선택된 파일을 새 윈도우로 열어지게 된다.
참고 및 주의사항
본 윈도우(윈도우1)에서는 Ctrl + p 등으로, 디렉토리내에 파일 열기가 가능하나, 윈도우2에서는 파일만 열렸기 때문에 다른 파일 열기가 불가하니 참고해야겠다.
또한, 윈도우 각각에서 마지막 수정하고 저장된 내용으로 최종 반영되니 이 부분도 주의는 필요하다.
잘 활용해서 넓찍하게 개발해보자~
Mouse로 font 크기 조정하기
나 혼자 개발시에는 font 크기 조정이 빈번하지 않겠지만,
코드리뷰나 기타 코드를 소개해야할때에는 font 크기를 키우는 경우가 대부분이다.
매번 settings에서 직접 font 사이즈를 수정하다가, 분명 방법이 있을 것 같아 찾아보았고 이를 공유하고자 한다.
Settings
Mouse Wheel Zoom 검색
검색된 Mouse Wheel Zoom 설정에 체크박스 활성화한다.
그리고 설정 저장하면, 이제 Ctrl + 마우스 휠로 font 사이즈를 조정할 수 있다.
✋만약 체크박스 활성화하는데 제대로 동작하지 않고 아래와 같은 알림창이 뜬다면?
VSCode 의 설정은 json 파일로 되어있다. 우리가 Manage > settings 는 이 json 파일의 설정값과 동기화되어 있다고 보면 된다.
이 settings.json 파일에 구문 오류가 있는 경우 위와 같은 메시지가 발생될 수 있다.(직접 수정할때 잘못 수정된 경우)
settings.json 파일 내의 구문 오류가 발생될 수 있는 부분을 수정(콤마 위치 확인 등)해준 뒤 다시 시도하면 잘 된다.