초보자를 위한 VS Code 설치부터 확장팩 추천까지 한 번에

코딩에 처음 입문하셨나요? 아니면 간단한 텍스트 파일 편집기 이상의 강력한 도구를 찾고 계신가요? Visual Studio Code(이하 VS Code)는 마이크로소프트가 제공하는 강력하면서도 사용하기 쉬운 무료 코드 편집기입니다. 초보자부터 전문가까지 모두가 애용할 만큼 다양한 기능과 확장성을 자랑합니다.

이번 시간에는 VS Code를 처음 설치하는 방법부터 추천 확장팩까지 차근차근 안내드리겠습니다. 초보자도 쉽게 따라 할 수 있도록 최대한 간결하고 구체적으로 설명드리니 끝까지 함께 해주세요.

🔗 1. VS Code 설치 가이드

윈도우에서 VS Code 설치

1. 👉 공식 VS Code 다운로드 링크에서 운영 체제에 맞는 설치 파일을 선택하세요.

- 대부분은 Windows를 선택하면 됩니다.

2. 다운로드한 설치 파일(.exe)을 실행하세요.

3. 설치 도중, "Path에 VS Code 추가(기본값)" 옵션을 꼭 체크하세요. 이 옵션을 설정하면 명령어로 쉽게 VS Code를 열 수 있습니다.

Mac에서 VS Code 설치

1. Mac OS용 설치 파일을 다운로드합니다.

2. .zip 파일을 열고, Applications 폴더에 끌어다 놓으세요.

3. 초기 실행 시 "알 수 없는 개발자" 경고가 뜬다면, 시스템 설정 > 보안 및 개인정보 보호에서 "열기"를 선택하세요.

Linux에서 VS Code 설치

1. 배포판에 맞는 .deb 또는 .rpm 파일을 선택해 다운로드합니다.

2. 다운로드한 파일을 설치 명령어로 실행하세요:

sudo dpkg -i 코드설치파일.deb # Debian/Ubuntu

sudo rpm -ivh 코드설치파일.rpm # Red Hat/Fedora

3. 성공적으로 설치되었다면 터미널에 code 명령어를 입력해 실행할 수 있습니다.

💡 팁: VS Code는 설치 직후에도 바로 사용할 수 있지만, 더 편리하고 강력하게 만들기 위해 확장팩(Extension)을 설치하는 것이 중요합니다. 아래에서 자세히 소개해 드리겠습니다.

⚙️ 2. 초보자를 위한 기본 설정

VS Code를 처음 열면 기본 설정이 되어 있지 않을 수 있습니다. 코드를 작성하고 디버깅하는 환경을 최적화하려면 몇 가지 설정을 추가로 해주세요.

테마 및 아이콘 변경하기

1. 파일 > 설정 > 테마 메뉴로 이동하면, 어두운 테마(Dark Theme) 또는 기본 테마를 선택할 수 있습니다.

2. File Icon Theme 메뉴에서 아이콘 세트를 선택해 더 직관적이고 깔끔하게 보이도록 변경할 수도 있습니다.

폰트와 줄 간격 조정하기

1. Ctrl+, 또는 Cmd+,로 설정 메뉴를 열 수 있습니다.

2. "Font Size"나 "Line Height"를 검색하여 사용하기 편한 스타일로 변경하세요.

기본 단축키 활용하기

- 모든 단축키는 Ctrl+K + Ctrl+S에서 확인 가능하며, 대표적인 기본 단축키는 아래와 같습니다:

> Ctrl+P: 파일 빠르게 열기

> Ctrl+/: 주석 처리

> F1: 명령 팔레트 검색

📦 3. 초보자를 위한 추천 확장팩

VS Code는 설치 후 추가 확장팩을 통해 기능을 무한히 확장할 수 있습니다. 특히 초보자에게 유용한 플러그인을 추천드립니다.

필수 확장팩

1. Prettier - Code formatter

코드 정렬을 자동으로 해줍니다. HTML, CSS, JS 코드 등을 깔끔하게 유지하려면 필수로 설치하세요.

2. ESLint

자바스크립트 코드의 문법 오류를 실시간으로 잡아줍니다. 코드 품질 향상에 매우 유용합니다.

3. Live Server

HTML이나 CSS 파일을 저장할 때마다 변경된 내용을 실시간으로 브라우저에 표시해주는 확장팩입니다.

4. Path Intellisense

파일 경로 자동 완성 기능을 제공하여 경로 오타를 방지합니다.

5. GitLens

프로젝트 내의 Git 히스토리를 추적하고 협업 시 변경사항을 쉽게 파악할 수 있는 도구입니다.

💡 4. 생산성을 위한 실용 팁

VS Code를 더 유용하게 사용할 수 있는 팁 몇 가지를 참고해 보세요.

1. 작업 폴더 빠르게 불러오기

상단 메뉴에서 File > Add Folder to Workspace 클릭 후, 자주 쓰는 프로젝트를 불러와 저장해 두세요.

2. 터미널 활용

IDE 내부에서 직접 터미널을 열고(단축키: Ctrl+`) 명령어를 실행해 번거롭지 않게 작업을 워크플로에 통합할 수 있습니다.

3. 자동 저장 기능

File > Auto Save 옵션을 활성화하면 코드를 작성하는 동시에 저장됩니다. 누락 방지에 유용합니다.

4. 환경 변수 설정

여러 언어를 사용하려면 Python, Node.js 등 적합한 환경 변수를 설치하는 것이 중요합니다. 👉 공식 문서 링크에서 각 언어에 대한 가이드를 참고하세요.

마치며

VS Code는 초보자부터 고급 사용자까지 폭넓게 활용할 수 있는 도구입니다. 단순히 텍스트 편집기가 아니라, 다양한 언어와 플랫폼을 지원하는 강력한 개발 환경을 제공합니다. 위에서 소개한 설치 가이드와 추천 확장팩으로 시작해보세요.

이 블로그 검색

클라우드바로