VS Code 심화 활용법: 생산성을 극대화하는 플러그인과 단축키

VS Code(Visual Studio Code)는 전 세계 개발자들에게 사랑받는 코드 편집기입니다. 뛰어난 확장성, 강력한 기능, 그리고 직관적인 사용자 경험 덕분에 초보자부터 전문가까지 다양한 수준의 사용자가 효과적으로 활용할 수 있습니다. 이번 글에서는 VS Code를 더욱 생산적으로 사용할 수 있도록 도와주는 필수 플러그인과 단축키를 소개합니다.

---

1. 생산성을 높이는 필수 플러그인

VS Code의 플러그인은 작업 환경을 강화하고 워크플로우를 최적화합니다. 다음은 추천 플러그인입니다.

• 1) Prettier – Code Formatter
  코드를 자동으로 정렬하고 포맷팅해주는 플러그인입니다. 프로젝트의 코드 스타일을 일관성 있게 유지할 수 있습니다.
  • 지원 언어: JavaScript, TypeScript, HTML, CSS 등
  • 설치 후 .prettierrc 파일로 설정을 커스터마이즈하세요.
• 2) ESLint
  JavaScript와 TypeScript의 코드 품질을 유지하기 위한 도구입니다. 코딩 스타일 검사와 문제 해결을 지원합니다.
  • 설정 팁: eslint --init 명령어로 프로젝트에 맞는 설정을 생성하세요.
• 3) GitLens
  Git 정보를 시각화하여 코드의 변경 이력을 확인할 수 있는 플러그인입니다.
  • 기능: 코드 작성자, 변경 시간, 커밋 메시지 등을 코드 내에서 바로 확인 가능.
• 4) Live Server
  HTML, CSS, JavaScript 파일을 실시간으로 로컬 서버에서 확인할 수 있는 플러그인입니다.
  • 변경 사항이 자동으로 반영되어 빠르게 개발과 테스트를 진행할 수 있습니다.
• 5) Remote - SSH
  원격 서버에 연결하여 코드를 편집하고 디버깅할 수 있는 플러그인입니다.
  • 서버 환경에서 직접 코드를 실행하거나 디버깅할 때 유용합니다.

---

2. 효율적인 작업을 위한 핵심 단축키

VS Code에는 작업 속도를 높이는 다양한 단축키가 내장되어 있습니다. 자주 사용하는 단축키를 익혀 생산성을 극대화하세요.

• 편집 및 탐색 관련 단축키
  • 파일 열기: Ctrl + P (Windows/Linux), Cmd + P (Mac)
    파일 이름을 검색해 빠르게 열 수 있습니다.
  • 전체 단어 삭제: Ctrl + Backspace (Windows/Linux), Option + Backspace (Mac)
    한 단어를 한 번에 삭제할 수 있습니다.
  • 다중 커서 추가: Alt + 클릭 (Windows/Linux), Option + 클릭 (Mac)
    여러 위치에서 동시에 편집이 가능합니다.
• 코드 정리 및 포맷팅
  • 자동 포맷: Shift + Alt + F (Windows/Linux), Shift + Option + F (Mac)
    선택한 코드 또는 파일 전체를 정리합니다.
  • 주석 토글: Ctrl + / (Windows/Linux), Cmd + / (Mac)
    선택된 줄에 주석을 추가하거나 제거합니다.
• 디버깅과 터미널
  • 디버깅 시작: F5
    디버깅 세션을 시작합니다.
  • 내장 터미널 열기: Ctrl + `` (Windows/Linux), Cmd + `` (Mac)
    VS Code에서 바로 터미널을 열 수 있습니다.

---

3. 사용자 정의로 환경 최적화하기

VS Code는 높은 수준의 커스터마이징을 제공합니다. 설정 파일을 수정해 자신만의 환경을 구축하세요.

• Settings.json 수정
  VS Code의 사용자 설정은 settings.json 파일에서 관리됩니다.
  • 예시: 자동 저장 기능 활성화

    {
      "files.autoSave": "afterDelay",
      "files.autoSaveDelay": 1000
    }
    

• 키 바인딩 커스터마이징
  File > Preferences > Keyboard Shortcuts에서 자신만의 단축키를 설정할 수 있습니다.
  • 예: 파일 저장 단축키를 Ctrl + S에서 Ctrl + Alt + S로 변경
• 테마와 아이콘 팩 설치
  • 추천 테마: One Dark Pro, Material Theme
  • 추천 아이콘 팩: Material Icon Theme, VSCode Icons

---

4. 워크플로우 통합 및 자동화

VS Code는 다양한 개발 환경과 통합되어 워크플로우를 단순화할 수 있습니다.

• Tasks
  Ctrl + Shift + B (Windows/Linux), Cmd + Shift + B (Mac)로 빌드 및 스크립트 실행 작업을 관리하세요.
  • 예: 자동화된 빌드 작업 추가

    {
      "version": "2.0.0",
      "tasks": [
        {
          "label": "Run Build",
          "type": "shell",
          "command": "npm run build"
        }
      ]
    }
    

• Workspace 관리
  프로젝트마다 개별 워크스페이스를 설정하여 확장 프로그램과 설정을 분리하세요.

---

결론

VS Code는 단순한 코드 편집기를 넘어, 개발 생산성을 극대화할 수 있는 강력한 도구입니다. 플러그인으로 기능을 확장하고, 단축키와 설정을 최적화하여 자신만의 개발 환경을 구축해 보세요. 이러한 심화 활용법을 익히면 보다 효율적으로 작업을 관리하고 더 나은 결과물을 만들어낼 수 있을 것입니다.