코딩(특히 웹개발)을 하다 보면 코드 편집기가 필요할 때가 있습니다.
프로그래밍 서적을 보면 간혹 메모장으로 작성하라고 안내하는 경우가 있는데, 메모장은 코딩하기에는 불편합니다.
Visual Studio Code(VS Code)를 사용하면 IDE처럼 줄 번호도 띄워 주고 코딩 문법에 맞게 색깔도 표시됩니다. VS Code는 Microsoft에서 배포하는 오픈 소스(소스 코드: MIT License) 소프트웨어이며, 사적 이용 및 상업적 이용이 무료입니다. 확장 기능을 설치하여 프로그래밍 언어에 맞게 설정할 수도 있습니다. 오늘은 VS Code를 설치하고 한국어 설정까지 해 보겠습니다.
목차
1. Visual Studio Code 설치
2. 한국어 확장 설치 및 적용
3. 설정 동기화
4. 참고) VS Code에서 터미널 사용
1. Visual Studio Code 설치
Visual Studio Code를 Microsoft Store에서도 설치하면 자동 업데이트가 된다는 점이 좋을 수 있지만, 최초 설치할 때 탐색기 연결 설정 등을 못한다는 단점이 있습니다. 그래서 이 글에서는 EXE 파일로 설치(사이드로딩)하도록 하겠습니다.
1.1. https://code.visualstudio.com로 접속합니다.
1.2. Download for Windows를 클릭하여 설치 파일을 바로 내려받거나 오른쪽 위 Download를 클릭합니다.
1.3. Download를 클릭했다면 Download 페이지로 넘어옵니다. 본인 운영체제와 아키텍처에 맞는 버전을 선택하여 내려받습니다.(이 글은 Windows Installer 기준으로 진행됩니다.)
1.4. 내려받은 설치 파일을 실행하고 사용권 계약에 동의합니다.
1.5. 다음을 클릭합니다.
1.6. 다음을 클릭합니다.
1.7. 이 부분에서 원하시는 대로 설정합니다. 위의 스크린샷은 제가 필요하다고 생각하는 것들을 체크한 것입니다.\
- “Code(으)로 열기” 작업을 Windows 탐색기 파일의 상황에 맞는 메뉴에 추가:
파일 탐색기에서 파일을 오른쪽 클릭하면 “Code(으)로 열기” 메뉴가 나옵니다. - “Code(으)로 열기” 작업을 Windows 탐색기 디렉터리의 상황에 맞는 메뉴에 추가:
파일 탐색기에서 오른쪽 클릭하면 “Code(으)로 열기” 메뉴가 나오며, 그 메뉴를 클릭하면 VS Code에서 해당 디렉터리가 열립니다.(강력추천) - Code을(를) 지원되는 파일 형식에 대한 편집기로 등록합니다.: “Code(으)로 열기” 작업을 Windows 탐색기 파일의 상황에 맞는 메뉴에 추가로 대체 가능하므로 체크하지 않았습니다.
- PATH에 추가(다시 시작한 후 사용 가능): 터미널에서 code를 실행하면 Visual Studio Code가 열립니다. code .을 실행하면 터미널의 현재 작업 경로가 VS Code로 열리므로 유용합니다. 나중에 수동으로 추가하려면 번거로우니 VS Code 설치할 때 체크해 놓는 것이 좋습니다.
1.8. 설치를 클릭합니다.
1.9. 설치가 완료되었습니다.
2. 한국어 확장 설치 및 적용
VS Code를 처음 설치하면 영어로 나옵니다. 프로그래밍 툴은 영어로 쓰면 모르는 것이 있을 때 구글 검색하기 좋다는 장점이 있지만, VS Code는 어차피 컴파일을 별도 프로그램으로 하기도 하고 독학할 때는 익숙한 언어로 보면 이점이 있기 때문에 한국어 설정을 해 보겠습니다.
2.1. 확장 탭을 클릭합니다.
2.2. Korean을 검색하면 Korean Language Pack for Visual Studio Code가 나올 것입니다.
2.3. Korean Language Pack for Visual Studio Code를 설치합니다.
2.4. 오른쪽 아래에 “Would you like to change Visual Studio Code’s display language to Korean and restart?”라는 창이 뜨면 Change Language and Restart를 클릭합니다.
2.5. 혹시 그 창을 놓쳤거나 나중에 언어를 다시 변경하고 싶어진다면 Ctrl+Shift+P를 누르고 Configure Display Language를 검색하여 클릭합니다.
2.6. 언어를 선택합니다.
3. 설정 동기화
왼쪽 아래 계정 단추를 클릭하고 로그인하면 다른 PC의 VS Code에서도 동일한 확장과 설정이 적용되도록 설정 동기화를 켤 수 있습니다.
상단의 로그인 단추는 AI agent를 사용하기 위한 것입니다. 동기화를 위해 로그인하는 것과 별개입니다.
4. 참고) VS Code에서 터미널 사용
참고로 Visual Studio Code 안에서 터미널을 사용할 수 있습니다. VS Code 내장 터미널을 사용하면 gcc, node.js, icarus verilog 등 터미널에서 사용하는 컴파일러를 사용할 때 편리합니다.
터미널→새 터미널을 클릭합니다.
VS Code 창 하단에 터미널이 열립니다.
터미널 창을 추가할 때 PC에 설치된 셸 중에서 원하는 것을 선택할 수 있습니다.
터미널 창 이름을 텍스트 편집기 영역으로 드래그하면
터미널을 더 넓게 사용할 수 있습니다. 터미널 출력 결과가 많을 때는 왼쪽에 코드 편집기를 띄우고, 오른쪽에 터미널을 띄우면 편리할 것입니다.
그 외 터미널 설정 방법은 아래 글을 참고하시기 바랍니다.
VS Code 터미널 설정 방법(프로필, 실행 파일 등) - https://sooseongcom.com/post/vscode-terminal
오늘은 여기까지!
이 블로그의 VS Code 카테고리로 들어가면 Visual Studio Code의 다양한 설정 방법을 보실 수 있습니다.
제 글을 읽어 주셔서 감사합니다. 다음에 만나요!