VSCode란?
VScode는 MicroSoft에서 만든 텍스트 편집기이다. 윈도우, 리눅스, macOS에서 사용 가능하며, 디버깅 지원과 Git 제어, 구문 강조 기능등이 포함되어 있고 다양한 extension을 통해 사용자가 원하는 대로 꾸밀 수가 있다. 텍스트 편집기이기 때문에 프로그램 자체가 IDE보다 가볍고 다양한 언어를 지원해서 개발자 들이 사용하는 툴 중에 가장 점유율이 높다.
VSCode 설치
아래 페이지에 들어가서 자신이 사용하고 있는 OS와 같은 프로그램을 설치해주면 금방 설치가 된다.
https://code.visualstudio.com/
VSCode 기본구조
VSCode를 실행하면 이런 기본화면이 나오는데 좌측 사이드바를 보면 총 5개의 아이콘이 있다. 이것이 VSCode의 핵심기능들이다.
- 파일 편집기 : 파일 편집기는 말 그대로 파일들의 목록을 볼 수 있고 파일을 선택하여 해당 파일의 소스코드를 메인 화면에 띄워서 편집을 하게 도와주는 역할이다. 그래서 VSCode로 파일을 열 때 프로젝트 단위로 열면 IDE처럼 편하게 파일을 읽고 쓰는 것이 가능하다.
- 파일 검색 : 프로젝트안 파일 내용을 검색할 수 있는 곳이다. Replace 기능이 있어서 검색한 키워드를 모두 다른 키워드로 변환도 가능하다.
- Git 소스 컨트롤 : Git과 관련된 작업을 할 수 있는 공간이다. 프로젝트가 변경된 사항이 있으면 해당 소스파일을 알려주고 commit, pull, push, merge를 언제 했는지 로그로 알려준다.
- Debug Runner : 파일을 디버깅 하는 곳이다. 보통 Mac은 Terminal 명령어를 통해 디버깅을 하기 때문에 잘 사용하지 않는다.
- Extension : 확장도구를 설치할 수 있는 공간이다. 여기에서 VSCode를 사용자가 원하는 대로 커스텀이 가능하다.
Extension
Extension안에는 다양한 확장 도구가 존재하는데 기본 언어에 대한 확장도구와 테마를 제외하고 VSCode를 좀 더 가시성이 좋고 코딩할 때 유용한 도구를 몇개 소개하고자 한다.
Auto Rename Tag
Auto Rename Tag는 React나 Html 등 태그언어를 주로 개발하는 개발자들에게 유용하다. 코딩을 할 때 앞에 테그를 달면 뒤에 자동으로 </테그>가 올 수 있도록 도와주어 코딩 속도 향상에 도움이 된다.
Bracket Pair Colorizer
Bracket Pair Colorizer은 괄호 스택에 따라 색상을 차등하게 부여함으로써 사용자가 괄호를 많이 쓸 때 주는 혼동감을 줄여준다.
Code Runner
Code Runner은 파일 편집기에서 단축기를 통해 바로 해당 파일을 실행할 수 있도록 도와준다. mac 기준으로 command + option + N을 누르면 해당 파일이 실행이 되고 command + option + M을 누르면 해당 파일의 실행을 중단시켜준다.
Code Snap
Code Snap은 코드 캡쳐를 도와주는 도구인데 mac을 기준으로 command + Shift + p를 누르면 code snap이 실행이 되고 자신이 캡쳐하고 싶은 소스를 드래그하면 그 소스만 캡쳐할 수 있도록 도와준다.
indent-rainbow
indent-rainbow는 들여쓰기를 깊이마다 색깔을 다르게 부여해서 들여쓰기가 잘 되어 있는지 확인할 때 편한 도구이다. 색깔이 밝지 않고 은은하게 표현을 해주어서 이질감이 느껴지지 않아서 사용하기 좋은 것 같다.
주석 색상 변경
주석 처리를 하면 보통 회색으로 표시되어서 다크모드를 사용할 때 잘 보이지 않은 불편함이 있다. 주석은 Extension이 아닌 환경설정 창에 들어가서 변경이 가능하다.
우선 우측 하단에 있는 톱니바퀴 아이콘을 클릭하여 Setting창에 접근한다(단축키 : command + ,).
그 다음에 검색창에 JSON: Schemas를 검색하여 해당 버튼을 클릭한다.
comments의 값을 자신이 원하는 색상으로 변경하면 주석이 원하는 색깔로 바뀐다.
