'Visual Studio Code'에 해당되는 글 6건

[
    {
        "key": "ctrl+n",
        "command": "explorer.newFile",
        "when": "explorerViewletFocus"
    },
    {
        "key": "ctrl+shift+n",
        "command": "explorer.newFolder",
        "when": "explorerViewletFocus"
    }
]

Visual Studio Code Insider는 Visual Studio Code의 Beta 버전입니다.

따라서 Visual Studio Code Insider는 Visual Studio Code에서는 아직 지원하지 않는 여러 기능을 사용해 볼 수 있지만 불안정합니다.

특별한 사정이 있는 경우가 아니라면 안정적인 Visual Studio Code 사용을 권장합니다.

윈도우의 '프로그램 추가/제거'를 통해서는 프로그램만 제거되고, 설정값 등은 제거되지 않는다.

설정값까지 깨끗하게 지우고 다시 설치하고 싶을 때는 다음 두가지를 수동으로 제거해 준다.

1. c:\user\Administrator\.vscode 폴더 삭제 (Extension등이 저장되어 있음 / 숨긴폴더로 되어 있으니 탐색기의 보기에서 '숨긴 항목'을 체크하여 보이게 해야 한다.)
2. c:\user\Administrator\AppData\Roaming\Code 폴더 삭제 (설정 파일)

공용PC를 자주 사용하거나, 공용PC가 아니더라도 사무실, 학교, 노트북 등 여러개의 개인 컴퓨터를 사용해야만 하는 사람들은 Portable 타입으로 어플리케이션을 사용하면 편리하다.
오늘은 Visual Studio Code를 포터블로 사용하는 방법에 대해서 알아본다.

일반적인 포터블 어플리케이션은 PC에 설치한 후 전용툴을 이용하여 포터블化 한다. 그래서 보통 다른 사람들이 만들어서 공유하는 것을 다운받아 사용하게 되는데 VS Code의 경우는 아주 간단하게 포터블로 만들 수 있다.

1. VS Code를 .zip 파일로 다운로드 받는다.

2. 압축을 푼다.

3. 압축이 풀린 폴더 안에 data 폴더를 만든다.

4.  Code.exe를 한번 실행한다. (실행하고 나면 data폴더에 자동으로 user-data와 extension 폴더가 생성된다.)

5. usb에 담아 가지고 다니면서 아무데서나 사용한다.

끝.

폴더 구조를 살펴보면 다음과 같다.

통상 압축을 풀면 자동으고 .zip파일의 파일 이름의 폴더에 압축을 풀어준다.

굵게 표시된 것이 폴더이다.

|- VSCode-win32-x64-1.25.0-insider

|   |- Code.exe

|   |- data

|   |- ...

만일 지금까지 사용하던 플러그인이나 세팅값을 포터블에도 적용하고 십다면 다음 경로에서 user-data와 extensions 폴더를 복사해서 방금 만든 data 폴더에 넣는다.

user-data : 탐색기 주소창에 다음 주소를 복사해 넣으면 해당폴더로 이동한다. 여기에 있는 모든 파일과 폴더를 포터블의 user-data에 복사해 넣는다.

%APPDATA%\Code 

extensions : 탐색기 주소창에 다음 주소를 복사해 넣으면 해당폴더로 이동한다. 여기에 있는 모든 파일과 폴더를 포터블의 user-data에 복사해 넣는다. 

%USERPROFILE%\.vscode\extensions

|- VSCode-win32-x64-1.25.0-insider

|   |- Code.exe

|   |- data

|   |   |- user-data

|   |   |   |- ...

|   |   |- extensions

|   |   |   |- ...

|   |- ...

(feat. VS Code 설정값 백업 방법)

자신이 사용하던 Code의 환경설정을 모두 백업하려면 %APPDATA%\Code와 %USERPROFILE%\.vscode\extensions 의 데이터를 복사해 두었다가 새로 code를 설치하면 복사해둔 경로에 복사해 주면 된다.

하지만 sync기능을 이용하면 더욱 편리하다. 이 전에 포스팅한 글을 참고하기 바란다.

 [ VS Code ] Visual Studio Code의 설정값을 동기화하는 방법

Visual Studio Code 설정 동기화 방법

[ 설정 백업방법 ]

1. VS Code에서 'Setting Sync' extension 설치.

2. GitHub에서 신규 token 발급.

   1) github.com 접속

   2) 우측 상단 icon 클릭 > settings > (좌측메뉴 하단) Developer setting > Personal access tokens

   3) Note에 별명 기입, gist 체크, Generate token 버튼 클릭

3. VS Code에 Gist ID 설정

   1) gist.github.com 접속 후 글 작성 → Create Secret gists

   2) 주소창에서 gist ID 확인 : https://gist.github.com/[ github ID ]/[ gist ID ]

   3) VS Code 에서

      - File > Preferences > Settings → extensions > code settings sync...

      - Sync: Auto Download 체크

      - Sync: Auto Upload 체크 

      - Sync: Gist 에 gist ID입력

4. Gist에 설정값 업로드 : shift+alt+U (다운로드 : shift+alt+D)

[ 설정 동기화 방법 ]

다른 PC에 VS Code를 설치한 후 백업해 놓은 설정을 동기화 하려면

1. VS Code에서 'Setting Sync' extension 설치.

2. gist ID 값 확인 :

   1) gist.github.com 접속 후 글 작성 → Create Secret gists

   2) 주소창에서 gist ID 확인 : https://gist.github.com/[ github ID ]/[ gist ID ]

3. VS Code에 Gist ID 설정

   1) File > Preferences > Settings → extensions > code settings sync...

   2) Sync: Auto Download 체크

   3) Sync: Auto Upload 체크 

   4) Sync: Gist 에 gist ID입력

4. VS Code 재실행 하면 설정값이 갱신되며, 이에 따라서 extension을 설치 한다.

*5. 만일 원하는데로 동기화가 되지 않는다면 Shift+Alt+D를 클릭하면, Setting Sync라는 페이지가 나온다.

1) 여기서, LOGIN WITH GITHUB를 클릭하고 github에 로그인한다.

2) 로그인이 정상적으로이루어 지면 vscode의 Setting Sync화면이 바뀌면서 gist id list가 나온다.

3) 리스트 중에서 원하는 것을 선택한다.

vs code에는 code 자동완성 기능이 있다. 이를 snippets 이라고 한다.

생산성을 높에주는 아주 편리한 도구이다. 그런데 간혹 자동 완성된 코드가 마음에 들지 않을 때가 있다. 이럴 경우 사용자 지정으로 만들어서 사용하면 편리하다.

다음은 사용자 snippets을 만드는 과정이다.

1. File > Preferences > User Snippets 선택

2. 새로운 파일 이름 입력. (C:\Users\[user name]\AppData\Roaming\Code\User\snippets\ 여기에 저장됨.)

3. 새로운 파일이 생성되면 자동으로 열리면서 셈플 코드가 주석 처리되어 나온다. 이것을 복사하여 주석을 없애고 수정해서 사용한다.

	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

  1) "Print to console" - 여기에 snippet 제목을 쓴다.

  2) "scope": "[변환할 키워드]" - code에 삽입할 때 사용할 키워드

  3) "prefix": "html5-developerN" - 표시될 제목

  4) "body": [ "[삽입할 내용] " ] - 삽입될 내용. 여러줄을 삽입할 경우 콤마(,)로 구분한다.

  5) "description": "[간단한 설명]" - snippets의 간단한 설명

다음은 html을 입력하면 삽입될 snippets의 예이다.

    "HTML5 form": {

    "scope": "html",

    "prefix": "html5-developerN",

    "body": [

      "<!--",

      " * File : ${1:file name & version}",

      " * Update: ${2:date}",

      " * Author: developerN",

      "-->",

      "<!DOCTYPE html>",

      "<html lang=\"ko\">",

      "<head>",

      " <meta charset=\"UTF-8\">",

      " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",

      " <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",

      " <title>${3:title}</title>",

      "</head>",

      "<body>",

      "$0", 

      "</body>",

      "</html>"

    ],

    "description": "default html5 form"