편리하고 가벼운 개발도구(IDE) Visual Studio Code 설치 및 설정 방법

파이썬 등 개발 시 편리하고 간편하게 사용할 수 있는 개발도구(IDE) Visual Studio Code

 

 

1. 설치 파일(Windows 64) 다운로드 : https://code.visualstudio.com/docs/?dv=win

 

2. 설치 시 추가작업 선택에서 아래 3개는 체크하고 설치(편리성 위해)

- Windows 탐색기 파일의 상황에 맞는 메뉴에 추가

- Windows 탐색기 디렉토리의 상황에 맞는 메뉴에 추가

- PATH에 추가(다시 시작한 후 사용 가능)

 

3. 설치 후 한글 VS Code로 변경하려면

- Extension(확장, 좌측 버튼)에서 korean 입력 후

- Korean Language Pack for Visual Studio Code(Microsoft) 설치하고 Restart Now 클릭하면 됨

- 영어로 다시 변경하려면, F1 또는 Ctrl + Shift + p 누르고 Configure Display Language 클릭 후 "en" 선택

 

4. Python 개발을 위한 Extension 설치

- Python Extension(Microsoft) 설치

(Linting, Debugging(multi-threaded, remote), intellisense, Jupyter Notebooks, code formatting, refactoring, unit tests, snippets, and....)

 

5. VS Code 폰트 변경 위해 D2Coding 설치 후 설정

- 파일>기본 설정>설정 또는 좌측 하단 설정 아이콘>설정 또는 Ctrl+, 를 눌러 사용자 설정으로 진입

- 텍스트편집기>글꼴 우측 Font Family 아래 입력란 "Consolas, ~ " 앞에 "D2Coding" 입력(글꼴은 입력 순으로 적용됨)

 

6. Django로 웹 개발 시 필요한 Extension

- Jinja (wholroyd) for Visual Studio Code 또는 Django Template (bibhasdn) Extension

- Live Server (Ritwick Dey) 

(VS Code를 임시 서버로 동작, 코딩된 파일을 VScCode에서 바로 브라우저 실행시킬 수 있는 확장 Extension(실행방법 : 소스에서 우클릭 후 Open with Live Server [Alt+L O] 클릭))

* Open with Live Server로 실행은 alt + L + O

- HTML CSS Support (ecmel) - CSS support for HTML documents 또는 IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS (Gencer W.Geng)

- Bracket Pair Colorizer (Coenraads) - ( ), [ ], { } 등의 괄호에 색을 넣어 짝을 찾아주는 Extension

- VS Code에 emmet가 기본 탑재되어 있음

* 긴 소스 코드를 축약해서 입력되게 하는 기능, ul>li>*3 입력 후 탭키 누르면 <li> 3개 생김

* 기본 이외의 Extension 설치하려면, Auto closing tag (Jun Han) 또는 Auto Rename tag (Jun Han)

- Django 실행 및 디버깅 launch.json :  "Python: Django" 

* launch.json

{  "name": "Python: Django", "type": "python", "request": "launch", "program": "${workspaceFolder}\\manage.py", "args": [ "runserver", "--noreload", "--nothreading" ], "django": true },

* runserver 서버 시작 옵션(--noreload, -- nothreading) 
--> 소스코드를 변경해도 자동 재시작하지 않는다.

 

 

 

 

7. 실행 및 디버깅 Configuration

- VS Code에서는 실행 및 디버깅을 위한 Configuration file(launch.json)을 만들어 줘야한다.

- 개발 소스가 위치한 폴더에서 좌측의 Run(Ctrl+Shift+d) 버튼을 클릭한 후 Run and Debug의 create a launch.json file을 클릭한다.

- 상단의 debug configuation 메뉴 항목에서 Python File debug the currently active Python file을  선택하면 launch.json 파일이 생성된다. (폴더 내에 .vscode>launch.json 생성된 것을 볼 수 있다.)

 

- 실행을 위해서는 RUN 옆의 버튼 또는 F5를 누르면 된다. (디버깅(F5), 디버깅 없이 실행(Ctrl + F5))
* VS Code에서 Python 코딩 시 "Python for VSCode" Extension를 설치하면 편리하다고 함(pylint 포함되어 있음)

 

8. VS Code 코딩 주요 단축키

- 코드 정렬 : Ctrl + k + f

- 주석 만들기 : Ctrl + / (토글됨)

- 블럭주석( /* */ ) 만들기 : Alt + Shift + a

- 한 줄 지우기 : Ctrl + Shift + k 또는 Ctrl + x

- 한 줄 복사 : 커서 위치 후 Ctrl + c (드래그 필요없음)

- 단어 전체 선택(상하) : Ctrl + F2 (동일 단어 수정 시 유용)

- 동일한 텍스트 선택하기 : 텍스트를 드래그하고 Ctrl + d 계속 누름(동일 단어 찾아 수정 시 유용)

- 텍스트 상하로 움직이기 : Alt + 방향키(상하)

- 우측 사이드 바 보이기 : Ctrl + b

- 여러 줄 선택 : Ctrl + Shift + Alt + Up/Down