의심할 여지 없이 Visual Studio Code는 기능 및 사용자 경험 측면에서 최고의 소프트웨어 개발 환경으로 손꼽힙니다. 대다수의 개발자가 선호하는 편집 도구로 Sublime Text를 대체했습니다. 자바스크립트 기반의 일렉트로닉 기반 애플리케이션으로서, 다른 수많은 자바스크립트 애플리케이션을 괴롭히는 느림에 굴복하지 않고 놀라운 속도와 민첩성을 보여줍니다.

실제로 궁금하신 분들을 위해 비주얼 스튜디오 코드는 무료로 액세스할 수 있는 소프트웨어 프로그램이며 GitHub에서 찾을 수 있다는 점에 주목할 가치가 있습니다. 효율성을 높이고 작업 프로세스를 간소화하려면 이 코드 편집기의 특정 주요 기능에 익숙해지는 것이 좋습니다.

VS Code에서 명령 팔레트 마스터하기

Sublime Text 및 그 이전 버전인 TextMate와 유사한 VS Code에는 마우스로 메뉴 옵션을 탐색하는 대신 키보드 입력을 통해 수많은 명령을 실행할 수 있는 명령 팔레트가 통합되어 있습니다.

명령 팔레트는 Control 키, Shift 키, 문자 ‘P'(또는 Mac의 경우 Command 키와 문자 ‘P’로 구성된 키보드 단축키)를 사용하여 액세스할 수 있습니다. 키를 누른 상태에서 원하는 작업(예: ‘닫기’)을 입력하기 시작하면 사용 가능한 대체 명령이 실시간으로 동적으로 업데이트됩니다. 명령은 탐색하기 쉽도록 ‘파일’, ‘Git’, ‘터미널’ 등 다양한 카테고리로 구성되어 있습니다.

작업 프로젝트 폴더 설정

탐색기로 이동 시

상황에 맞는 메뉴에서 폴더 열기 옵션을 선택하거나 애플리케이션의 최상위 메뉴에서 “파일 > 폴더 열기” 명령으로 이동하면 컴퓨팅 장치에 있는 모든 디렉터리를 선택할 수 있습니다. 이 작업은 선택한 폴더를 Visual Studio Code의 현재 작업 공간으로 설정하여 파일 탐색기 인터페이스를 자주 전환할 필요 없이 포함된 모든 파일과 해당 하위 디렉터리에 즉시 액세스할 수 있는 권한을 부여하는 역할을 합니다.

한 번에 여러 파일 보기

최신 텍스트 편집기는 여러 파일을 동시에 처리할 수 있는 기능을 갖추고 있어 사용자가 탭 인터페이스를 사용하여 파일 사이를 탐색할 수 있습니다. 일부 고급 텍스트 편집기는 가로 평면에서만 작동하지만 Visual Studio Code에서도 사용할 수 있는 기능인 나란히 텍스트 편집을 허용하는 추가 기능을 제공합니다.

노트북이나 구형 디스플레이를 사용하는 등 화면 크기가 작은 사용자에게는 나란히 편집하는 것이 어려울 수 있지만, 비주얼 스튜디오 코드는 이 영역에서 탁월한 성능을 발휘하여 이러한 사용자에게 탁월한 경험을 제공합니다.

이 글도 확인해 보세요:  더 빠르게 학습하고 정보를 더 잘 기억할 수 있는 5가지 앱과 웹사이트

스펙트럼은 ‘동적 패널’이라는 혁신적인 기능을 제공하여 열려 있는 문서 패널에 커서를 놓기만 하면 다른 문서가 활성화될 때 패널의 너비가 원활하게 조정됩니다. 이 사용자 친화적인 개선 사항은 아직 Full HD 이상으로 업그레이드하지 않은 사용자 등 화면 해상도가 낮은 사용자에게 특히 유용합니다.

한 번에 여러 줄 편집

문서 내에서 여러 번 등장하는 콘텐츠를 효율적으로 조작하려면 텍스트 내 여러 위치를 클릭하면서 Alt(또는 Mac 사용자의 경우 Option) 키를 동시에 누르는 키보드 단축키를 통해 여러 커서를 활용하면 충분합니다. 연속해서 클릭할 때마다 커서가 하나씩 추가로 생성됩니다.

이 기능의 유용성은 여러 인스턴스에 공통 클래스를 적용하거나 여러 링크의 프레젠테이션 스타일을 자주 수정해야 하는 HTML과 같은 요소로 작업할 때 특히 분명해집니다. 이 기능을 숙지하면 효율성과 편의성을 높일 수 있습니다.

정의로 이동

프로그래밍 또는 스크립팅 환경에서 작업하다 보면 익숙하지 않은 변수나 메서드를 접하게 되는 경우가 있습니다. 이러한 상황에서는 해당 변수의 정의를 신속하게 찾을 수 있는 몇 가지 옵션이 있습니다. 한 가지 옵션은 필요한 정보를 찾기 위해 관련 파일을 검색하는 데 시간을 소비하는 것입니다. 또 다른 대안은 커서로 알 수 없는 요소 위에 커서를 올려놓은 상태에서 키보드 단축키 F12를 사용하면 특정 정의로 원활하게 이동할 수 있습니다. 또한 마우스 클릭과 함께 Control 또는 Command 키를 사용하여 원하는 엔티티(메서드, 함수, 변수 등)를 선택하면 사용자가 정의의 소스로 즉시 이동할 수 있습니다.

또는 Alt + F12 또는 Cmd + F12를 누르는 편리한 키보드 단축키를 사용하여 원본 문서를 열지 않고도 정의에 빠르게 액세스할 수 있습니다. 이 기능을 사용하면 현재 텍스트 컨텍스트 내에서 정의를 방해받지 않고 바로 볼 수 있으므로 원활하고 효율적인 정보 확인 수단을 제공합니다.

또는 코드베이스 내에서 선택한 변수 또는 메서드의 모든 인스턴스를 식별하는 프로세스를 용이하게 하기 위해 “Shift”를 누른 다음 “F12″로 구성된 키보드 단축키를 사용할 수도 있습니다.또한 커서 위치 지정 지점 바로 아래에 위치한 코드 줄에서 이러한 발생이 강조 표시됩니다.

이 글도 확인해 보세요:  여러 Slack 워크스페이스를 추가하고 관리하는 방법

이러한 기능에 액세스하려면 적절한 폴더를 현재 활성 프로젝트로 지정해야 합니다(자세한 내용은 팁 #2 참조).

모든 항목 이름 바꾸기

리팩터링은 잘 정리된 코드를 생성하고 보존하는 데 중요한 요소이지만, 특히 코드의 상당 부분을 다룰 때는 지루한 작업으로 느껴질 수 있습니다. 이러한 부담을 덜어주기 위해 Visual Studio Code는 단일 모듈 내의 여러 파일에서 변수와 메서드 이름을 변경하는 프로세스를 자동화하여 수많은 파일을 수동으로 탐색할 필요가 없는 효율적인 솔루션을 제공합니다.

“F2″를 입력하여 선택한 요소 또는 메서드의 명칭을 수정한 후 명명법을 편집하면 현재 활성 프로젝트 전체에 걸쳐 해당 참조가 변경됩니다.

현재 문서 내에서만 수정하려면 Ctrl/Cmd와 F2 키보드 조합을 사용하면 Visual Studio Code에서 전체 파일에 걸쳐 각 발생 시마다 커서가 활성화됩니다.

여러 파일에서 검색

소스 코드가 아닌 파일을 다룰 때는 팁 #5에 설명된 고급 검색 기능을 프로젝트 내에서 심볼을 찾는 데 사용할 수 없게 됩니다. 이러한 경우 Visual Studio Code에서 제공하는 기본 찾기 기능을 사용해야 합니다.

키보드 단축키 Control 또는 Command + F를 사용하면 현재 문서 내에서 특정 콘텐츠를 찾는 검색 기능을 사용할 수 있는 반면, Control + Shift + F 또는 Shift + Command + F를 사용하면 전체 프로젝트 폴더와 그 하위 디렉터리에서 재귀적으로 광범위한 검색을 수행할 수 있습니다.

VS 코드에서 명령줄 사용

VS 코드는 사용 중인 운영 체제에 따라 달라지는 내장 터미널 인터페이스를 제공합니다. Windows에서 실행할 경우 터미널은 클래식 명령 프롬프트로 표시되며, macOS 및 Linux 사용자는 Bash 프롬프트가 표시됩니다. 플랫폼에 관계없이 터미널은 항상 사용자의 활성 작업 공간 디렉토리 내에서 열리며, 활성 프로젝트가 없는 경우 기본적으로 홈 폴더로 이동합니다.

이 애플리케이션은 단일 터미널 작업 기능 외에도 추가 터미널 창을 생성할 수 있도록 지원합니다. 프로세스를 시작하려면 화면 오른쪽 상단에 있는 “++” 아이콘을 탭하기만 하면 됩니다. 반대로 현재 터미널을 종료하려면 휴지통 아이콘을 활용하세요.드롭다운 메뉴는 탭 인터페이스에 비해 디스플레이 영역의 상당 부분을 유지하면서 열려 있는 터미널 사이를 효율적으로 전환할 수 있는 수단을 제공합니다.

이 글도 확인해 보세요:  Reqwest로 Rust에서 HTTP 요청 만들기

VS Code에 새 테마 설치

실제로 예상한 대로 Visual Studio Code는 사용자에게 텍스트 및 소스 코드의 구문 강조 표시를 사용자 지정할 수 있는 기능을 제공하며 이와 관련된 다양한 옵션을 허용합니다. 그러나 유감스럽게도 이 애플리케이션은 사용자 인터페이스의 모양을 변경할 수 있는 옵션을 제공하지 않아 일부 사용자에게는 제한 사항으로 보일 수 있습니다. 그럼에도 불구하고 구문 강조 표시를 개인화하는 기능은 프로젝트 작업 시 효율성과 전반적인 만족도를 크게 향상시킬 수 있습니다.

새로운 테마는 VS Code 마켓플레이스 (무료)에서 찾거나 VS Code에서 직접 검색할 수 있습니다. 추천이 필요한 경우 최고의 VS Code 테마 목록을 확인하세요.

VS Code에 타사 확장 프로그램 설치

마지막으로 강조하고 싶은 필수 기능은 타사 확장 프로그램을 통한 VS Code의 확장성입니다. 테마와 마찬가지로 VS Code 마켓플레이스 (예, 이것도 무료)에서 찾거나 VS Code에서 검색할 수 있습니다. Ctrl + Shift + X(또는 Shift + Cmd + X) 키보드 단축키를 사용하여 확장 프로그램 패널에 액세스합니다.

확장 프로그램은 코드 린터, 디버거, 스니펫 관리자, VS Code 개선 사항, 빌드 도구, 심지어 ChatGPT와 통합되어 IDE 내에서 코딩을 간소화하는 도구와 같은 다양한 유용한 도구를 제공하여 생산성을 향상시키는 데 중추적인 역할을 합니다.

비주얼 스튜디오 코드는 최고의 텍스트 편집기입니다

VS Code는 수많은 사람들로부터 큰 찬사를 받았지만 모든 사용자에게 완벽한 솔루션은 아닙니다. VS Code는 포괄적인 통합 개발 환경(IDE)이 아닌 텍스트 편집기로서의 기능을 주로 수행한다는 점을 인식하는 것이 중요합니다.

물론 열린 마음으로 이 경험에 접근하시기를 권장합니다. 저희 팀은 제품의 고유한 기능이 여러분을 즐겁게 놀라게 할 것이라고 확신합니다.

By 최은지

윈도우(Windows)와 웹 서비스에 대한 전문 지식을 갖춘 노련한 UX 디자이너인 최은지님은 효율적이고 매력적인 디지털 경험을 개발하는 데 탁월한 능력을 발휘합니다. 사용자의 입장에서 생각하며 누구나 쉽게 접근하고 즐길 수 있는 콘텐츠를 개발하는 데 주력하고 있습니다. 사용자 경험을 향상시키기 위해 연구를 거듭하는 은지님은 All Things N 팀의 핵심 구성원으로 활약하고 있습니다.