무료 편집기 VSCODE 비쥬얼스튜디오코드 설치방법 및 유용한 단축키

안녕하세요! 제가 사용하기도 하고, 많은 사람들에게 사랑받는 무료 소스코드 편집기 VSCODE 비쥬얼스튜디오코드 설치하는 방법과 유용한 단축키를 알려드고자합니다. VSCODE(Visual Studio Code)는 무료이면서도 강력한 기능, 뛰어난 확장성, 심지어 빠르고 가벼운 성능을 자랑합니다. 프론트엔드 개발자인 저에게는 없어서는 안되는 필수 코드 에디터입니다. 오늘은 간단하게 VSCODE가 무엇인지알아보고 설치 방법과 자주쓰이는 단축키에 대해 알아보겠습니다.

1) VSCODE (Visaul Studio Code) 비쥬얼스튜디오 코드는 무엇인가요?

공식 웹사이트 : https://code.visualstudio.com/

Visual Studio Code 줄여서 VSCODE는 마이크로 소프트에서 개발된 무료 오픈소스 코드 에디터입니다.
단순한 텍스트 에디터와 무거운 통합개발환경 IDE의 장점을 결합하여 빠르고 강력한 개발이 가능합니다.
마이크로 소프트의 통합 개발환경 (IDE)인 Visual Studio와 이름은 비슷하지만 따로 개발되고 있으며 IDE보다는 코드 에디터에 가깝습니다.

공식적으로 VSCODE는 IDE(통합개발환경) 은 아니지만 확장성이 좋아 플러그인 설치를 통해 IDE와 거의 비슷한 효과가 가능합니다.. 소스코드에디터로 분류되고있긴하지만 일반 텍스트 에디터 보다 훨씬 많은 기능들을 담고있어 IDE처럼 느껴집니다. 실제 개발자들은 VScode를 사실상 가벼운 IDE 또는 IDE-like 에디터로 생각하며 사용합니다.

VSCODE가 IDE처럼 느껴지는 이유는 무엇인지 간단하게 알아보겠습니다.

디버깅지원: 코드 실행중 오류를 찾고 수정하기위해 Breackpoint를 설정하고 변수값을 확인하는 등의 디버깅 기능을 강력하게 지원합니다.
통합터미널 : 에디터창에서 바로 명령어를 입력하고 실행할 수 잇는 터미널 기능을 제공합니다.
버전관리통합 : Git과 같은 버전관리 시스템과의 연동이 매우 강력합니다.
코드자동완성 및 지능형기능 : 코드 문맥을 분석하여 함수정의 변수이름 모듈 임포트 등 지능적인 코드 추천 및 정보를 제공합니다.
방대한 확장성 : 특정 프로그래밍 언어, 프레임워크, 포메터 등을 위한 확장프로그램을 설치하면 해당 환경에 최적화된 코드 분석 , 디버깅, 테스트 등의 기능이 추가되어 풀-스텍 IDE와 유사한 개발환경을 제공합니다.

저는 html,css,javascript 기반의 프론트엔드 개발을 하기때문에 실제로 intelliJ나 비쥬얼스튜디오와 같은 전통적인 IDE보다 VSCODE로 작업하는것이 실무적으로도 훨씬 편하다고 느꼈습니다.

요새는 FIGMA와의 연동도 너무 편리하게 되어있어 깜짝 놀랄정도였습니다. 피그마로 그린 UI를 피그마에서 확인할 필요도없이 바로연동되어 FIGMA에 설정되어있는 변수값등도 모두 불러와져 따로 세팅할 필요가 없을정도로 일이 수월해졌습니다.

2) VSCODE 설치방법

VSCODE 공식 다운로드 : https://code.visualstudio.com/Download

VSCODE설치방법은 굉장히 간단합니다. 공식다운로드 페이지에 가서 본인 PC환경 OS에 맞는 설치파일을 다운로드하면 됩니다.

- Windows

사용자 계약에 동의'를 선택하고 '다음'을 누릅니다.
설치 경로를 지정합니다. (특별한 이유가 없다면 기본 경로 권장)
설치하는 동안 추가 작업 선택' 화면이 중요합니다. 여기서 'PATH에 추가 (재시작 필요)' 옵션을 반드시 체크하는 것이 좋습니다. (명령 프롬프트나 터미널에서 code . 명령어로 현재 폴더를 VS Code로 열 수 있게 해줍니다.) 바탕 화면 아이콘 생성 등 필요한 옵션을 추가로 체크하고 '다음' → '설치'를 누릅니다.

- macOs

다운로드한 .zip 파일의 압축을 해제하면 'Visual Studio Code.app' 파일이 나타납니다.
이 파일을 '응용 프로그램(Applications)' 폴더로 드래그하여 옮깁니다.

- Linux

다운로드한 패키지 파일을 해당 배포판의 패키지 관리자를 사용하여 설치합니다. 터미널에서 명령어를 사용하는 것이 일반적입니다.
.deb 파일 (Debian/Ubuntu): sudo dpkg -i code_[version].deb
.rpm 파일 (Fedora/RHEL): sudo rpm -ivh code-[version].rpm

3) VSCODE 유용한 단축키 모음

개인적으로 코드에디터 뿐아니라 모든 프로그램을 사용할때 단축키가 많이 중요하다고생각합니다. 작업속도에 큰차이를 주고 한번익혀두면 훨씬 편리한 경험이 가능하기때문입니다. 처음 프로그램을 익힐때부터 간단한 단축키를 하나씩 익혀두면 굉장히 도움이 된다고생각합니다. 저는 대부분의 프로그램을 처음 접할때부터 단축키를 찾아보는 편이고 익숙하지않더라도 단축키로 작업을 하려고 하는 편입니다.

기능/설명	Windows/Linux 단축키	macOS 단축키	설명
파일 열기 (Go to File)	Ctrl + P	Cmd + P	파일 이름을 입력하여 프로젝트 내 파일을 빠르게 찾고 엽니다.
명령 팔레트 열기	Ctrl + Shift + P	Cmd + Shift + P	VS Code의 모든 명령어를 검색하고 실행할 수 있습니다.
통합 터미널 열기/닫기	Ctrl + `` `	Ctrl + `` `	에디터 하단에 통합 터미널을 열거나 닫습니다.
새 파일 생성	Ctrl + N	Cmd + N	새로운 빈 파일을 만듭니다.
파일 저장	Ctrl + S	Cmd + S	현재 활성화된 파일을 저장합니다.
모두 저장	Ctrl + K S	Cmd + K S	열려있는 모든 수정된 파일을 저장합니다.
실행 취소	Ctrl + Z	Cmd + Z	마지막 작업을 취소합니다.
다시 실행	Ctrl + Y	Cmd + Shift + Z	취소했던 작업을 다시 실행합니다.
라인 복사	Shift + Alt + ↓ / ↑	Shift + Option + ↓ / ↑	현재 라인 또는 선택 영역을 아래/위로 복사하여 추가합니다.
라인 이동	Alt + ↓ / ↑	Option + ↓ / ↑	현재 라인 또는 선택 영역을 아래/위로 이동합니다.
라인 삭제	Ctrl + Shift + K	Cmd + Shift + K	현재 커서가 있는 라인 전체를 삭제합니다.
라인 주석 처리/해제	Ctrl + /	Cmd + /	현재 라인 또는 선택 영역을 주석 처리하거나 해제합니다.
여러 줄 동시 편집 (동일 단어)	Ctrl + D	Cmd + D	현재 커서의 단어와 동일한 모든 단어를 선택하여 동시에 편집합니다.
다중 커서 추가	Alt + Click	Option + Click	마우스 클릭한 위치마다 커서를 추가하여 동시에 편집합니다.
검색 (현재 파일)	Ctrl + F	Cmd + F	현재 파일 내에서 특정 텍스트를 검색합니다.
찾아 바꾸기 (현재 파일)	Ctrl + H	Cmd + H	현재 파일 내에서 텍스트를 찾아 다른 내용으로 바꿉니다.
검색 (프로젝트 전체)	Ctrl + Shift + F	Cmd + Shift + F	작업 중인 폴더(프로젝트) 전체 파일에서 텍스트를 검색합니다.
찾아 바꾸기 (프로젝트 전체)	Ctrl + Shift + H	Cmd + Shift + H	작업 중인 폴더(프로젝트) 전체 파일에서 텍스트를 찾아 바꿉니다.
라인 이동 (Go to Line)	Ctrl + G	Cmd + G	특정 줄 번호로 빠르게 이동합니다.
에디터 분할 (세로)	Ctrl + \	Cmd + \	에디터 영역을 세로로 나누어 여러 파일을 동시에 봅니다.
사이드바 표시/숨기기	Ctrl + B	Cmd + B	파일 탐색기, 검색, Git 등 사이드바 패널을 토글합니다.
줄의 시작으로 이동	Home	Cmd + ←	커서가 현재 줄의 맨 앞으로 이동합니다.
줄의 끝으로 이동	End	Cmd + →	커서가 현재 줄의 맨 끝으로 이동합니다.
파일의 시작으로 이동	Ctrl + Home	Cmd + ↑	커서가 파일의 맨 처음으로 이동합니다.
파일의 끝으로 이동	Ctrl + End	Cmd + ↓	커서가 파일의 맨 마지막으로 이동합니다.

저작자표시 비영리 변경금지 (새창열림)

1) VSCODE (Visaul Studio Code) 비쥬얼스튜디오 코드는 무엇인가요?

2) VSCODE 설치방법

3) VSCODE 유용한 단축키 모음

티스토리툴바