[개발 환경 구축] Visual Studio Code(VSCode) 설치 및 확장 프로그램 목록

Visual Studio Code(VSCode) 설치

1. (https://code.visualstudio.com/) 에 접속하여 운영체제에 맞는 설치 프로그램 다운로드 및 실행

2. 약관에 동의 후, 다음 버튼을 눌러 다음 단계들을 진행하여 설치

 

3. 확장 아이콘을 클릭해 'Korean' 검색 후, 한국어 지원 확장 설치 -> 다른 추천 확장들은 필요할 때 하나씩 설치 추천

 

4. 설정 아이콘 클릭 후, 설정에서 폰트, 폰트 크기, 자동 줄 바꿈 등의 개인 설정 -> 폰트는 오타율을 줄이기 위해 'd2codingfont'를 추천

 

내가 사용 중인 확장 프로그램 (extension)

1. d2codingfont
   • 오타율을 줄여 줌
2. Tabnine
   • 코드 자동 완성 기능
3. Auto Close Tag
   • 태그를 자동으로 닫음
4. Auto Rename Tag
   • 태그 변경시, 쌍을 이루는 닫힘 태그의 이름이 자동으로 바뀜
5. Code Runner
   • 코드를 간단히 빌드 및 실행할 수 있음
6. CodeSnap
   • 코드를 이미지로 캡쳐 가능
7. Color Highlight
   • 코드의 오류 등이 잘 보일 수 있도록 꾸며 주는 기능을 포함
8. Live Server
   • 웹페이지로 실행 결과를 확인할 수 있으며 변경 사항이 실시간으로 반영
9. Reactjs Code Snippets
   • React의 코드를 단축어나 몇 글자만 입력하여 완성시켜 주는 확장 기능
10. Bootstrap 3 Snippets
    • Bootstrap의 코드를 단축어나 몇 글자만 입력하여 완성시켜 주는 확장 기능
11. vscode-styled-components
    • 스타일 코드를 나타내 주어 편하게 스타일 코드 입력 가능