Visual Studio Code를 위한 10가지 필수 생산성 팁

Visual Studio Code는 개발자 사이에서 가장 선호받는 텍스트 편집기 중 하나로 자리매김했습니다. 이전에는 Sublime Text가 많은 사람들의 선택이었지만, 이제 VS Code가 그 자리를 대체했습니다. Electron 기반의 JavaScript 애플리케이션임에도 불구하고, 뛰어난 속도를 자랑하며 다른 JavaScript 앱에서 흔히 발생하는 성능 문제도 거의 없습니다.

혹시 VS Code에 대해 더 궁금한 점이 있으신가요? 이 편집기는 오픈 소스 프로젝트로, GitHub에서 소스 코드를 확인할 수 있습니다. 개발 생산성과 작업 효율성을 향상시키고 싶다면, 다음의 필수적인 Visual Studio Code 팁들을 반드시 익혀두세요.

1. VS Code의 명령 팔레트 활용

Sublime Text나 이전의 TextMate와 유사하게, VS Code에도 '명령 팔레트'라는 강력한 기능이 존재합니다. 이 기능은 메뉴를 마우스로 탐색하는 대신, 키보드 입력을 통해 다양한 명령에 빠르게 접근할 수 있도록 해줍니다.

Ctrl + Shift + P (macOS에서는 Cmd + Shift + P) 단축키를 사용하여 명령 팔레트를 불러올 수 있습니다. 원하는 작업(예: "파일 닫기")을 입력하기 시작하면, 가능한 옵션들이 실시간으로 업데이트되어 표시됩니다. 일부 명령은 '파일', 'Git', '터미널'과 같은 카테고리별로 분류되어 있어 더욱 쉽게 찾을 수 있습니다.

2. 작업 프로젝트 폴더 설정하기

탐색 사이드바에서 '탐색기' 아이콘을 클릭하면, 새로운 하위 패널이 나타납니다. 이 패널은 '편집기 열기' 섹션(현재 열려있는 파일 및 문서 표시)과 '폴더 열기' 섹션으로 나뉩니다 (점 3개 메뉴에서 "편집기 열기" 옵션을 선택해야 사용할 수 있습니다). 여기서 주목해야 할 부분은 바로 '폴더 열기' 섹션입니다.

'폴더 열기'를 클릭하거나 (메뉴 표시줄의 '파일 > 폴더 열기'를 통해서도 접근 가능) 시스템에서 특정 폴더를 선택하면, 해당 폴더가 VS Code에 '현재 작업 프로젝트'로 로드됩니다. 이렇게 하면 해당 폴더의 모든 파일과 하위 폴더에 편리하게 접근할 수 있어 파일 탐색기를 번갈아 가며 사용할 필요가 없어집니다.

3. 여러 파일을 동시에 보기

대부분의 최신 텍스트 편집기는 동시에 여러 파일을 열어 작업할 수 있는 기능을 제공합니다. 탭 기반 인터페이스를 통해 열려 있는 파일 사이를 손쉽게 전환할 수 있죠. 또한, 고급 텍스트 편집기는 병렬 텍스트 편집 기능을 지원하는데, VS Code도 예외는 아닙니다(가로 방향으로만 가능).

그러나 랩톱이나 구형 모니터와 같이 화면이 작은 환경에서는 병렬 편집이 불편할 수 있습니다. 이때 VS Code의 뛰어난 기능이 빛을 발합니다.

VS Code에는 '동적 패널'이라는 기능이 있습니다. 열려 있는 문서 패널 중 하나가 너무 좁아지면, 해당 문서를 활성화할 때(예: 커서를 그 패널에 놓을 때) 자동으로 패널의 폭이 넓어집니다. 만약 여러분이 아직도 720p에 가까운 해상도를 사용하고 있다면, 이 기능이 매우 유용할 것입니다.

4. 여러 줄을 동시에 편집

만약 문서 전체에서 특정 텍스트를 여러 번 삽입하거나 삭제해야 하는 상황이라면, 여러 개의 커서를 생성하는 것만으로 간단히 해결할 수 있습니다. Alt 키 (macOS에서는 Option 키)를 누른 상태에서 텍스트 내 원하는 위치를 클릭하면, 클릭할 때마다 새로운 커서가 생성됩니다.

이 기능은 HTML 작업 시 동일한 클래스의 인스턴스를 여러 개 추가하거나, 여러 개의 하이퍼링크 형식을 한 번에 변경해야 할 때 특히 유용합니다. 이 기능을 익히고 적극적으로 활용해 보세요.

5. 정의로 이동

프로그래밍이나 스크립트 작성 중에 익숙하지 않은 변수나 메서드를 마주치는 경우가 종종 있습니다. 이때, 해당 변수/메서드가 어디에 정의되어 있는지 찾기 위해 시간을 허비할 필요가 없습니다. 커서를 변수/메서드 위에 놓고 F12 키를 누르면 즉시 해당 정의로 이동할 수 있습니다. 또는 변수, 함수, 메서드를 선택한 후 Ctrl 또는 Cmd 키를 누른 상태로 클릭해도 정의로 이동이 가능합니다.

뿐만 아니라 Alt + F12 (macOS에서는 Cmd + F12) 단축키를 사용하면, 소스 파일을 직접 열지 않고도 현재 커서 위치의 정의를 바로 엿볼 수 있습니다. 즉, 정의가 커서 위치 바로 아래에 표시됩니다.

반대로, 정의된 변수/메서드를 선택한 후 Shift + F12 키를 누르면, 해당 변수/메서드의 모든 참조를 찾을 수 있습니다. 이 기능 또한 커서가 있는 위치에 바로 표시됩니다.

이러한 기능들을 제대로 활용하려면, 팁 2에서 언급한 것처럼 올바른 폴더를 '현재 작업 프로젝트'로 열어두어야 합니다.

6. 모든 발생 항목 이름 바꾸기

코드 리팩토링은 깔끔한 코드를 작성하고 유지하는 데 필수적이지만, 때로는 번거롭고 시간 소모적인 작업이 될 수 있습니다. 특히 대규모 모듈이나 방대한 양의 코드를 리팩토링하는 경우에는 더욱 그렇습니다. VS Code는 이러한 어려움을 해결해줍니다. 변수나 메서드 이름을 변경하기 위해 여러 파일을 뒤적거릴 필요가 없습니다.

변수/메서드를 선택한 후 F2 키를 누르면 이름을 편집할 수 있으며, 현재 작업 중인 프로젝트 내에서 해당 변수 이름의 모든 인스턴스가 자동으로 변경됩니다.

만약 현재 파일 내에서만 이름을 변경하고 싶다면 Ctrl/Cmd + F2 단축키를 사용하세요. VS Code는 현재 파일 내의 모든 인스턴스에 커서를 자동으로 생성합니다.

7. 여러 파일에서 검색하기

만약 소스 코드가 아닌 파일을 작업 중이라면, 앞서 설명한 기호 찾기 기능(팁 5)을 사용할 수 없습니다. 하지만 특정 문장이나 단어를 찾고 싶은데, 해당 문장이나 단어가 어느 파일에 있는지 모르는 상황이라면 어떻게 해야 할까요? 이럴 때는 기본적인 검색 기능을 사용해야 합니다.

Ctrl/Cmd + F 키를 사용하여 현재 파일 내에서 검색할 수 있으며, Ctrl + Shift + F (또는 Shift + Cmd + F) 키를 사용하면 현재 작업 프로젝트의 모든 파일 내에서 검색이 가능합니다. 이때 모든 하위 폴더까지 재귀적으로 검색합니다.

8. VS Code에서 명령줄 사용하기

VS Code에는 통합 터미널이 내장되어 있습니다. Windows에서는 명령 프롬프트로, macOS 및 Linux에서는 Bash 프롬프트로 표시됩니다. 터미널은 현재 작업 중인 프로젝트 디렉토리(존재하는 경우) 또는 홈 폴더에서 시작됩니다.

또한, 여러 개의 개별 터미널을 동시에 사용할 수 있습니다. 터미널 인스턴스를 추가하려면 오른쪽 상단의 더하기(+) 버튼을 클릭하고, 현재 터미널을 닫으려면 휴지통 아이콘을 클릭하세요. 드롭다운 메뉴를 사용하면 각 터미널 간을 쉽게 전환할 수 있으며, 탭 기반 인터페이스에 비해 화면 공간을 훨씬 효율적으로 활용할 수 있습니다.

9. VS Code에 새로운 테마 설치하기

VS Code에서는 텍스트 및 소스 코드의 구문 강조 테마를 사용자가 원하는 대로 설정할 수 있습니다. 인터페이스 자체의 테마는 변경할 수 없지만, 구문 강조는 매우 중요한 부분입니다. 좋은 테마는 생각보다 생산성 향상에 큰 도움이 될 수 있습니다.

VS Code 마켓플레이스에서 다양한 테마를 찾아볼 수 있으며(모두 무료입니다), VS Code 내에서 직접 검색도 가능합니다. 만약 어떤 테마를 선택해야 할지 고민이라면, VS Code 테마 추천 목록을 참고해 보세요.

10. VS Code에 타사 확장 설치하기

마지막으로 강조해야 할 중요한 기능은 타사 확장을 통한 VS Code의 확장성입니다. 테마와 마찬가지로, VS Code 마켓플레이스에서 다양한 확장들을 찾아볼 수 있으며(이 또한 무료입니다), VS Code 내에서 직접 검색도 가능합니다. Ctrl + Shift + X (또는 Shift + Cmd + X) 단축키를 사용하여 확장 패널에 빠르게 접근할 수 있습니다.

확장은 개발 생산성을 극대화하는 데 매우 중요한 요소입니다. 린터, 디버거, 코드 스니펫, VS Code 자체의 편의성을 높여주는 확장, 빌드 도구, 심지어 VS Code에서 ChatGPT를 더 쉽게 활용할 수 있도록 도와주는 확장까지 다양한 도구를 사용할 수 있습니다.

Visual Studio Code는 최고의 텍스트 편집기입니다

물론, 많은 사람들이 좋아하는 것처럼 VS Code가 모든 사람에게 완벽한 편집기일 수는 없습니다. 완벽한 것은 없으며, VS Code가 여러분이 찾고 있는 바로 그것이 아닐 수도 있습니다. VS Code는 완전한 IDE가 아니라, 텍스트 편집기라는 사실을 기억하세요.

하지만, 한 번 사용해 보시고 열린 마음으로 받아들여 보시기를 권합니다. VS Code의 다양한 기능들이 여러분을 놀라게 할 것이라고 확신합니다!