VSC

비주얼 스튜디오 코드 (VSC)

개발자의 첫 걸음 2025. 9. 9. 18:00

 

안녕하세요. 오늘은 비주얼 스튜디오 코드(Visual Studio Code)에 간단히 알아볼게요.

 

 

비주얼 스튜디오 코드(Visual Studio Code)

 

자바는 인텔리제이, 파이선은 파이참같이 코드를 활용할 수 있는 대표적인 프로그램이 있는데요.

 

비주얼 스튜디오 코드는 모든 코드를 작성하고 테스트할 수 있는 코드 편집기,

 

"개발자들 사이에 매우 인기가 높은 코드 편집기" 에요.

 

VSC는 코드 편집기이지, 특정 언어나 분야에 제한된 도구가 아니기 때문에

 

프론드엔드, 백엔드 상관없이 모두 사용이 가능해요.

 

그럼 VSC를 다운로드와 환경설정까지 알아볼까요?

 

우선 인터넷 브라우저에 vsc 검색 다운로드 진행하시면 돼요.

 

다운로드가 완료되었다면 VSC 설정창에서 적용하면 좋은 리스트를 소개할게요.

 

설정창 활성화:  ctrl + ,

 

설정창 - tab size : 탭 버튼 띄어쓰기 비율 

 

설정창 - word wrap : 특정 코드가 길어서 현재 화면에 보이지 않을 수 있기 때문에 설정 권장

 

 

다음은 VSC에 도움이 되는 프로그램을 추가를 해볼 건데요.

 

좌측에 큐브모양의 'Extensions' (Ctrl + Shift + X) 클릭을 하시면 다운로드한 리스트와

 

다운로드를 위한 검색창이 활성화가 돼요.

VSC프로그램을 사용에 도움이 되는 몇 가지를 소개해드릴게요.

 

 

prettier : 코드의 가독성 향상을 위한 프로그램 (settrins - prettier 2 설정확인)

 

indent : 코드 들여 쓰기가 많아질 때 육안으로 보기 편안하게 해 줌

 

auto rename Tag : 시작 태그를 작성하면 마지막 태그를 자동 완성

 

material icon, vscode-icons : 코드 파일, 폴더 탐색기의 색상표시로 육안으로 명확히 구분이 가능

 

one dark Pro : 다크모드에서 코드 육안적으로 더 명확해지는 프로그램

 

css peek : HTML과 CSS를 합칠 때 유용한 프로그램

 

gitlens : 작성자 추적 -> 비주얼 스튜디오 작성자 조회 (오류 발생 시 발생자 추적)

 

 

 

여기까지 VSC에 대한 설명과 세팅에 도움 되는 자료들을 간단하게 알아봤는데요.

 

VSC를 사용해서 여러분만의 프로젝트를 시작해 보세요!