스크랩 ) VSCode 설치 및 설정하기

Microsoft Visual Studio Code

Visual Studio Code란?

Visual Studio Code(이하 VSCode)는 디버깅, 작업 실행 및 버전 제어와 같은 개발 작업을 지원하는 능률적인 코드 편집기입니다. 좀 더 쉽게 말하면 PHP 프로그래머가 거의 필수적이다시피 사용하는 EditPlus와 같은 가벼운 에디터 기능에 각종 확장기능(플러그인)을 추가로 설치하여 개발자가 원하는 언어 플랫폼 환경을 구축하여 사용할 수 있는 비교적 라이트한 IDE 도구라고 보면 됩니다. (물론 Visual Studio 2016과 같은 거대하고 다양한 프로그래밍 IDE가 통합되어 있는 것과는 애초 용도의 취지가 다르긴 하지만.)

프로그래밍 언어에 대한 편집 도구의 선택은 개발자의 취향에 따라 다양합니다. 하지만, VSCode는 원격지의 서버에 존재하는 웹사이트 소스코드를 로컬PC에서 쉽게 작업할 수 있게 해주는 몇 안되는 도구 중 하나임은 분명합니다. 게다가 EditPlus에서는 절대 지원하지 않는 인텔리센스(IntelliSense) 기능이 관련 언어에 맞는 확장기능만 설치하면, 쉽게 지원됩니다.

VSCode는 일단 비공개 또는 상업적으로 전혀 제약이 없이 무료로 사용할 수 있고, 현재 지원하는 운영체제 플랫폼은 Windows, Linux 및 MacOS입니다.

Visual Studio Code 설치하기

VSCode를 설치하는 방법은 매우 간단합니다. VSCode 공식 웹사이트를 방문하여, 자신의 운영체제에 맞는 설치 파일을 다운로드하고 더블클릭하여 설치하면 끝입니다.

우선 아래의 웹사이트를 방문합니다.

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

그리고 아래의 화면에서 [Download for Windows] 우측의 아래로 향해있는 화살표 부분을 클릭합니다.

 

Windows x64 부분의 Installer 텍스트 우측의 아래로 향한 녹색 화살표 부분을 클릭하여 다운로드합니다.

 

그러면 다운로드 페이지로 이동되고, 몇 초 후에 자동으로 다운로드가 시작됩니다. 파일명은 VSCodeSetup-x64-x.x.x.exe 형식이 될 것입니다. VSCode는 빈번하게 버전 업이 되기 때문에, 따로 버전 숫자는 표기하지 않습니다. 물론 한 번 설치한 이후에는 상위 버전이 나오면 자동으로 업데이트하라고 알려줍니다. 그래서 따로 신경 쓸 필요가 없습니다.

이제 다운로드한 파일을 더블클릭하여 설치를 시작해봅시다.

[다음(N) >] 버튼을 누릅니다.

[계약에 동의함(A)]을 체크하고 [다음(N) >] 버튼을 누릅니다.

설치할 위치는 개발자 본인의 자유이지만, 여기서는 조금 다른 위치에 설치할 것입니다. 본인이 원하는 위치를 선택하고, [다음(N) >] 버튼을 누릅니다.

[다음(N) >] 버튼을 누릅니다.

위에서 빨간색으로 표시된 부분을 반드시 체크하고 [다음(N) >] 버튼을 누릅니다.

[설치(I)] 버튼을 눌러 설치를 시작합니다.

설치가 진행되는 화면입니다. 조금 기다려줍니다.

설치가 모두 끝났습니다. 중간의 [[V] Visual Studio Code 시작] 항목은 체크된 상태로 놔두고 [마침(F)] 버튼을 누릅니다. 이제 곧바로 VSCode를 자신의 개발환경에 맞게 설정할 것입니다.

Visual Studio Code 확장기능 설치하기

 

위의 화면은 좀 전에 설치를 마친 후에 자동으로 VSCode가 실행된 화면입니다. 일단 좌측 하단의 [시작 시 시작 페이지 표시]의 체크를 끄고, 맨 왼쪽의 [확장기능] 아이콘을 클릭합니다.

 

상단의 검색어 입력란에 원하는 확장기능 이름을 입력하여 검색한 후, 설치할 수 있습니다.

필수적이거나 PHP와 Node.js 개발을 위한 유용한 확장기능을 아래에 정리하였습니다.

구분	확장기능 이름	설명	비고
필수공통	Debugger for Chrome	Chrome과 연계한 디버거. 로컬PC 환경에서 곧바로 Chrome 브라우저를 실행시켜 웹페이지를 볼 수 있게 해줍니다.
	ftp-sync	원격지의 소스코드를 FTP/SFTP 전송 및 동기화 시켜줍니다.
	Git History	Git 로그, 파일의 변경내역 및 커밋 시 차이점을 비교하여 보여줍니다.
	HTML Snippets	HTML5, 태그 색상화, 코드 스니펫 등을 지원합니다.	동일한 이름의 확장기능 이름이 있는데, 개발자명이 wgenial인 것으로 설치해야 합니다.
	HTML CSS Support	HTML 문서의 CSS를 지원합니다. 추가적으로 PHP 내의 HTML측 CSS, Javascript 등도 지원합니다.
	vscode-icons	VSCode 편집기의 목록 등에 표시되는 가독성 좋은 아이콘을 적용시켜줍니다.
PHP	PHP Debug	PHP의 자체 모듈인 XDebug와 연동하여 PHP를 디버깅 해줍니다.	로컬PC에 PHP가 설치되어 있어야 합니다.
	PHP IntelliSense	좀 더 개선된 PHP 인텔리센스를 지원합니다.	로컬PC에 PHP가 설치되어 있어야 합니다.
	PHP Extension Pack	위의 PHP Debug와 IntelliSense가 통합된 기능이며, 이거 하나로 Debug, IntelliSense 모두 설치됩니다.	로컬PC에 PHP가 설치되어 있어야 합니다.
	PHP Intellisense for codeigniter	PHP CodeIgniter 웹 프레임워크를 위한 코드 인텔리센스를 지원합니다.
	ci-snippets2	PHP CodeIgniter 웹 프레임워크를 위한 코드 스니펫을 지원합니다.	개발자명이 Anish-M인 것을 설치합니다. (ci-snippets 0.0.2 버전은 구버전임)
Node.js	Node Exec	작성 중인 Node.js 파일 또는 특정 선택된 코드를 Node.js를 이용하여 실행시켜줍니다.	로컬PC에 Node.js가 설치되어 있어야 합니다.
	Node.js Extension Pack	Node.js의 npm, JavaScript(ES6), node_modules 검색, NPM 인텔리센스 등을 지원합니다.	로컬PC에 Node.js가 설치되어 있어야 합니다.
	Node.js Modules Intellisense	Node.js에서 require로 포함된 모듈에 대한 막강한 인텔리센스를 지원합니다.

확장기능을 설치하는 방법은 다음과 같습니다. 확장기능 검색어 입력란에 Debugger for Chrome을 입력하면, 아래와 같이 검색됩니다.

 

그러면 검색된 목록을 클릭하면 우측에 해당 확장기능에 대한 상세한 정보를 볼 수 있고, [설치] 녹색 버튼을 누르면 실제 설치가 시작됩니다.

 

설치가 완료되면 [다시 로드] 버튼으로 바뀌는데, 버튼을 클릭하여 VSCode를 재시작하면 됩니다. 물론 현재까지 작업한 소스코드는 그대로 유지됩니다. 여러 개의 확장기능을 설치할 경우 전부 설치한 다음 한 번에 다시 로드해도 됩니다.

 

이미 설치한 확장기능을 삭제하려면, 우측의 조그마한 톱니모양 아이콘을 클릭하여 [제거] 메뉴를 누릅니다.

 

본인에게 필요한 확장기능을 모두 설치한 이후, 현재까지 설치한 모든 확장기능 목록을 보려면 검색어 입력란에 @installed 키워드를 입력하거나, 우측 상단의 [···] 부분을 눌러 [설치된 확장 표시] 메뉴를 눌러 볼 수 있습니다.

 

 

Visual Studio Code 설정

VSCode의 설정이라 함은, 글꼴이름, 글꼴크기 등과 같은 편집기의 가장 기본적인 설정을 말합니다. 특이한 것은 다른 편집기 프로그램과는 다르게 텍스트 형식으로 입력하여 환경을 설정한다는 점입니다. 하지만 결코 어려운 작업은 아니니 걱정할 필요 없습니다. 우선 VSCode를 실행하고, [파일(F)]-[기본 설정(P)]-[설정(S)] 메뉴를 누릅니다.

 

아래와 같이 좌측은 현재까지 설정된 기본 설정이고, 우측에는 사용자가 직접 수정하는 사용자 설정입니다.

 

VSCode는 내부적으로 좌측에 설정된 정보를 기준으로 삼되, 같은 항목의 이름이 우측에서도 발견되면, 우측의 설정을 기준으로 기존 설정을 덮어쓰는 방식(Override, 오버라이드)으로 인식합니다. 즉 사용자 설정 내용이 우선순위가 높습니다. 사용자 설정의 코딩 형식은 JSON과 유사하게 생겼습니다.

사용자 정의로 설정하는 방법은 매우 쉽습니다. 좌측의 변경하고자 하는 설정 이름을 찾아 해당 라인을 마우스로 드래그하여 + 키를 눌러 복사한 후, 우측의 빈 곳에 + 키를 눌러 붙여넣은 다음, 자신에게 맞는 내용으로 설정하고 저장하면 실시간으로 반영됩니다.

다음 절에 설명하겠지만, 이 설정 내용에는 VSCode 자체 설정 뿐만 아니라 별도로 설치한 확장기능에 관련된 설정도 포함될 수 있습니다.

VSCode 기본글꼴 변경하기

먼저 좌측(기본 설정)의 글꼴 크기와, 글꼴 패밀리 항목을 찾습니다. 글꼴 크기 설정이름은 "editor.fontSize", 글꼴 패밀리 설정이름은 "editor.fontFamily"가 될 것입니다.

 

이것을 마우스로 드래그하여 복사합니다. 복사는 + 키를 누르거나, 마우스 우측을 클릭하여 [복사] 메뉴를 누르면 됩니다.

 

우측(사용자 설정)의 활괄호({ ..... }) 사이의 빈 곳에 붙여넣기 합니다. 이때 앞 또는 뒤쪽의 설정항목과 구분되기 위해서 쉼표(콤마) 표시해주는 것을 잊지 않도록 합니다. 맨 마지막 설정이라 할지라도 항상 쉼표로 끝나도록 쉼표를 붙이는 습관을 길들입시다. 저의 경우는 Envy Code R(고정폭 글꼴, 코딩용)과 맑은 고딕을 지정하였습니다.

 

.... "editor.fontSize": 14, "editor.fontFamily": "'Envy Code R', 'Malgun Gothic'", ....

Envy Code R 글꼴은 아래의 링크를 통해 다운로드 하실 수 있습니다.

Envy_Code_R_PR7_Font.zip

내 컴퓨터 저장 네이버 클라우드 저장

Envy Code R preview #7 (scalable coding font)

damieng.com

80 컬럼 경계선 표시하기

80 컬럼 경계선은 개발자의 취향에 따라 호불호가 갈리는 설정입니다. 저의 경우는 이 설정을 선호하는 편입니다. 나중에 소스코드를 문서화 하여 프린터로 출력할 경우, 어느 정도는 깔끔하게 나오게 할 수 있기 때문입니다.

설정 검색 입력란에 ruler라고 치면 아래와 같은 내용이 검색됩니다.

 

이 라인을 복사하여 사용자 정의 부분에 붙여넣고, 아래와 같이 수정하고, + 키를 눌러 저장합니다.

 

.... "editor.rulers": [80], ....

그러면 아래와 같이 임의의 소스코드를 열어서 봤을 때, 맨 우측에 회색의 세로 경계선이 보이게 됩니다.

 

PHP 확장기능을 위한 설정

PHP Extension Pack과 같은 확장기능을 설치한 경우, PHP로 개발된 소스코드가 포함된 폴더를 열게 되면 아래와 같이 상단에 오류 메시지가 나올 수 있습니다.

 

위의 오류를 해결하는 방법은 두 가지가 있는데, 로컬PC에 윈도우용 PHP 7.x 버전을 설치한 후 시스템 환경변수PATH에 php.exe가 위치하고 있는 경로를 추가해주거나, 위의 [Open settings]를 눌러 php.exe의 경로를 직접 사용자가 설정해주는 것입니다.

(1) VSCode 설정을 통한 오류 해결법

오류 메시지가 떴을 때 우측의 [Open settings]를 누릅니다. 그리고 우측(사용자 설정 영역)에 아래의 내용을 추가해줍니다. (저의 경우는 PHP 7을 D:\WorkSpace\Server\php에 설치하였습니다.)

.... "php.executablePath": "D:\\WorkSpace\\Server\\php\\php.exe", "php.validate.executablePath": "D:\\WorkSpace\\Server\\php\\php.exe", .... 주의! 윈도우용 VSCode일 경우 경로 구분자 역슬래시(\)를 두 개씩(\\) 입력해야 합니다.

(2) 시스템 환경변수 PATH에 php.exe 경로 추가를 통한 오류 해결법

(1)번의 해결법은 뭔가 번거롭기만 합니다. 깔끔하게 시스템 환경변수 값만 수정해주면 되는데 말입니다. <윈도우 키>를 눌러 시작메뉴가 보여지는 상태에서 곧바로 '시스템 환경 변수 편집' 검색어를 입력합니다. 그러면 아래와 같이 [시스템 환경 변수 편집] 메뉴가 검색됩니다. 이것을 실행합니다.

 

아래의 [환경 변수(N)...] 버튼을 누릅니다.

 

시스템 변수(S) 그룹에서 Path 환경변수를 찾아 선택하고 [편집(I)...] 버튼을 누릅니다.

 

우측의 [새로 만들기(N)] 버튼을 누르고, 자신이 설치한 PHP의 경로를 입력한 다음, [확인] 버튼을 눌러 경로를 추가해줍니다.

 

위와 같이 환경변수를 수정하게 되면, VSCode 내부에서 자체적으로 설정한 두 줄은 다시 삭제해도 됩니다. VSCode를 재시작하면 환경변수 설정 내용이 자동으로 인식됩니다.

ftp-sync를 이용하여 웹사이트 서버와 로컬PC의 동기화 기반 작업환경 설정하기

ftp-sync는 VSCode에서 대부분의 개발자들이 즐겨쓰는 인기 있는 확장기능으로, 원격 서버에 있는 소스코드(PHP이든 Node.js의 Javascript이든, HTML이든, CSS이든 뭐든지 다 가능!)를 편집 가능하게 해줍니다. EditPlus의 FTP 기능과 거의 유사합니다.

우선 웹사이트 서버에 있는 소스코드와 디렉토리 모두를 FTP를 이용하여 로컬PC 개발을 위한 위치에 다운로드 합니다. 여기서는 아래의 로컬PC 경로를 예로 들어 설명합니다.

D:\WorkSpace\mydomain.com\lecture

로컬PC에 다운로드한 소스코드 및 디렉토리 구조가 다음과 같다고 합시다.

 

좌측의 lecture 폴더를 선택하고 마우스 우측을 클릭하여 [Open with Code] 메뉴를 실행합니다.

 

그러면 아래와 같이 해당 폴더가 VSCode를 통해 정리되고 열립니다.

 

이 상태에서 단축키 키를 누르거나, [보기(V)]-[명령 팔레트(C)...] 메뉴를 실행하여 명령 팔레트 입력 UI를 띄웁니다.

 

입력란에 ftp-sync 까지만 입력하면 아래의 목록이 필터링되어 출력되는데, ftp-sync: Init 목록을 선택합니다.

 

그러면 아래와 같이 탐색기 상에서 .vscode라는 폴더가 생성되고, 그 폴더 안에 ftp-sync.json이라는 환경설정 파일이 생성됩니다.
(윈도우 탐색기에서는 앞에 점(.)이 포함된 폴더를 생성할 수 없고(파일은 생성 가능), 기존에 이미 만들어진 .vscode 폴더가 있을 경우 복사해서 붙여넣을 수는 있습니다. 물론 명령 프롬프트 창을 띄운 후 mkdir 명령어로 생성할 수는 있습니다.)

 

그리고 동시에 VSCode에서는 ftp-sync.json 파일을 편집할 상태가 됩니다.

 

ftp-sync.json 파일의 내용을 아래와 같이 수정하고 저장합니다.

{ "remotePath": "/var/www/lecture", // 원격지의 루트 디렉토리 "host": "mydomain.com", // 접속 IP 또는 도메인 주소 "username": "root", // 접속 계정 "password": "mydomain~!", // 접속 비밀번호 "port": 40022, // 접속 포트(저의 경우는 SSH, SFTP 접속 포트) "secure": false, "protocol": "sftp", "uploadOnSave": true, "passive": true, "debug": false, "privateKeyPath": null, "passphrase": null, "ignore": [ "\\.vscode", "\\.git", "\\.DS_Store", "\\node_modules" ], "generatedFiles": { "uploadOnSave": false, "extensionsToInclude": [], "path": "" } }

JSON 형식의 설정항목을 하나씩 살펴봅시다.

이름	명칭	설명
remotePath	원격 경로	원격의 서버에 접속후 루트 기준이 될 경로를 지정합니다. (예: /home/myaccount/public_html, /var/www/html 등) 기본값은 "./"입니다.
host	호스트 주소	접속하고자 하는 FTP 서버의 호스트 주소를 지정합니다. IP 주소 또는 네임서버에 의해 연결된 도메인 주소를 사용할 수 있습니다.
username	FTP 접속 계정	접속하고자 하는 FTP 서버의 계정(ID)을 지정합니다.
password	FTP 접속 비밀번호	접속하고자 하는 FTP 서버의 비밀번호(Password)를 지정합니다.
port	FTP 포트 번호	접속하고자 하는 FTP 서버의 포트 번호를 지정합니다. 기본값은 "21"입니다.
secure	보안접속 여부	ftp-sync 공식 GitHub에 설명이 없습니다. (더이상 지원하지 않는 설정옵션으로 판단됨. 그냥 false로 설정함)
protocol	FTP 프로토콜	접속하고자 하는 FTP 서버의 프로토콜을 지정합니다. (예: "ftp" 또는 SSH 기반의 "sftp") 기본값은 "ftp"입니다.
uploadOnSave	저장 시 자동 업로드 여부	로컬에서 파일을 저장할 경우 곧바로 원격으로 자동 업로드 시킬 것인지를 설정합니다. 기본값은 false입니다.
passive	수동 전송 여부	접속하고자 하는 FTP 서버가 passive 모드를 지원하는지를 설정합니다. 기본값은 false입니다.
debug	ftp-sync 디버그 정보 출력 여부	ftp-sync 자체의 디버그 정보를 출력 윈도우에 출력할 것인지를 설정합니다. 기본값은 false입니다.
privateKeyPath	SFTP를 위한 개인 키 경로	SFTP 접속을 위한 개인 키의 경로를 설정합니다. 필요할 경우에만 지정합니다. 기본값은 null입니다.
passphrase	SFTP를 위한 개인 키 비밀번호	SFTP 접속을 위한 개인 키의 비밀번호를 설정합니다. 필요할 경우에만 지정합니다. 기본값은 null입니다.
ignore	FTP 전송에서 제외할 경로	FTP 전송 시, 제외시킬 원격 및 로컬의 경로를 지정합니다. 경로의 시작 기준은 원격은 remotePath, 로컬은 현재의 VSCode에서 열어놓은 폴더입니다.
generatedFiles	생성된 파일의 동기화 규칙	VSCode 또는 외부의 도구에 의해 빌드 등의 과정이 필요한 프로젝트인 경우, 자동으로 생성되는 폴더나 파일의 확장자를 지정합니다.

(1) ftp-sync를 이용하여 로컬PC에서 신규파일 생성하고 서버로 업로드하기

테스트를 위해 루트 디렉토리에 신규로 파일 하나를 생성해봅시다.

 

파일 이름을 test.js로 입력합니다.

 

아래의 내용을 코딩하고 + 키를 눌러 저장해봅시다.

 

저장하는 순간에, 원격 서버로 곧바로 전송되는 것을 확인할 수 있습니다.. (편집화면 하단의 출력 콘솔 영역 참고) 이것은 ftp-sync.json 설정파일의 uploadOnSave가 true로 설정되어 있기 때문입니다.

 

이후부터는 같은 파일에 한해 로컬PC에서 편집하고 저장하는 동시에 원격 서버의 파일도 같이 수정됩니다. 이것도 마찬가지로 ftp-sync.json 설정파일의 uploadOnSave가 true로 설정되어 있기 때문입니다.

(2) ftp-sync를 이용하여 원격 서버에 있는 새로운 파일으 로컬PC에 다운로드하기

원격 서버에 test2.js 파일이 있고 아직 로컬PC에 없을 경우 다음과 같이 작업하면 됩니다.

키를 눌러 ftp-sync를 입력하고 아래의 Ftp-sync: Remote to Local 명령을 실행합니다.

 

그러면 원격 서버의 어느 디렉토리에서 찾을 것인지 물어보는데, 현재 위치를 나타내는 마침표(.) 표시 목록인 [. Choose this folder]를 선택합니다.

 

기본적으로는 중간의 Safe-sync를 보통 선택합니다.

 

알아두면 편리한 팁! 원격지에 aaa.php, bbb.php가 존재하고, 로컬에 bbb.php, ccc.php가 존재할 경우, 각각의 액션에 따라 다음과 같이 파일들이 처리된다. (1) Ftp-sync: Remote to Local 모드일 경우 [=원격에서 로컬로 파일들을 다운로드할 경우] Full-sync를 실행한 경우 - 역할 : 로컬을 원격과 완전히 똑같은 상태로 만든다. - 결과 : 로컬에 aaa.php가 다운로드되고, 로컬의 ccc.php가 삭제된다. Safe-sync를 실행한 경우 (권장) - 역할 : 원격에는 있고 로컬에는 없는 파일들만 다운로드된다. - 결과 : 로컬에 aaa.php가 다운로드되고, 로컬의 ccc.php는 그대로 유지된다. Force download를 실행한 경우 - 역할 : 원격에 있는 모든 디렉토리와 파일 전체를 무조건 강제로 다운로드한다. - 결과 : 원격의 aaa.php를 비롯하여 이외의 모든 폴더와 파일들이 다운로드되고, 로컬의 ccc.php는 그대로 유지된다. (2) Ftp-sync: Local to Remote 모드일 경우 [=로컬에서 원격으로 파일들을 업로드할 경우] Full-sync를 실행할 경우 - 역할 : 원격을 로컬과 완전히 똑같은 상태로 만든다. - 결과 : 원격에 ccc.php가 업로드되고, 원격의 aaa.php가 삭제된다. Safe-sync를 실행한 경우 (권장) - 역할 : 로컬에는 있고 원격에는 없는 파일들만 업로드한다. - 결과 : 원격에 ccc.php가 업로드되고, 원격의 aaa.php는 그대로 유지된다. Force upload를 실행한 경우 - 역할 : 로컬에 있는 모든 디렉토리와 파일 전체를 무조건 강제로 업로드한다. - 결과 : 로컬의 ccc.php를 비롯하여 이외의 모든 폴더와 파일들이 업로드되고, 원격의 aaa.php는 그대로 유지된다.

by Arumizz

[출처] VSCode 설치 및 설정하기|작성자 아르미즈

http://blog.naver.com/PostView.nhn?blogId=arumizz&logNo=221399938287&parentCategoryNo=&categoryNo=172&viewDate=&isShowPopularPosts=true&from=search