기본 Extension 개발
1. Extension 개발을 위해 Terminal(터미널)에서 yo code 명령어를 입력하고 Enter 키를 누릅니다.
yo code
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Keymap
New Extension Pack
New Language Pack (Localization)
New Web Extension (TypeScript)
New Notebook Renderer (TypeScript)What type of extension do you want to create? (어떤 타입의 확장 프로그램으로 만들기를 원하십니까?)
키보드의 상/하 방향키로 선택하면 됩니다.
여기서는 New Extension (JavaScript)를 선택하고 Enter 키를 누릅니다.
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? ()What's the name of your extension? (확장 프로그램의 이름은 무엇입니까?)
여기서는 "helloworld" 입력하고 Enter 키를 누릅니다.
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? helloworld
? What's the identifier of your extension? (helloworld)What's the identifier of your extension? (확장 프로그램의 식별자는 무엇입니까?)
여기서는 기본값인 (helloworld)를 사용하기 위해 Enter 키를 누릅니다.
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? helloworld
? What's the identifier of your extension? helloworld
? What's the description of your extension? ()What's the description of your extension? (확장 프로그램에 대한 설명은 무엇입니까?)
여기서는 "Extension Test" 입력하고 Enter 키를 누릅니다.
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? helloworld
? What's the identifier of your extension? helloworld
? What's the description of your extension? Extension Test
? Enable JavaScript type checking in 'jsconfig.json'? (y/N)Enable JavaScript type checking in 'jsconfig.json'? ('jsconfig.json'으로 JavaScript 타입을 체크하도록 하락하시겠습니까?)
여기서는 "Y" 입력하고 Enter 키를 누릅니다.
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? helloworld
? What's the identifier of your extension? helloworld
? What's the description of your extension? Extension Test
? Enable JavaScript type checking in 'jsconfig.json'? Yes
? Initialize a git repository? (Y/n)Initialize a git repository? (git 저장소를 초기화하시겠습니까?)
여기서는 "N" 입력하고 Enter 키를 누릅니다.
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? helloworld
? What's the identifier of your extension? helloworld
? What's the description of your extension? Extension Test
? Enable JavaScript type checking in 'jsconfig.json'? Yes
? Initialize a git repository? No
? Which package manager to use? (Use arrow keys)
> npm
yarn
pnpmWhich package manager to use? (사용할 패키지 관리자는 무엇입니까?)
키보드의 상/하 방향키로 선택하면 됩니다.
여기서는 npm를 선택하고 Enter 키를 누릅니다.
그러면 "helloworld'라는 폴더가 생성되고 Node 패키지 관련 모듈과 파일들이 설치됩니다.
설치가 완료되면
? Do you want to open the new folder with Visual Studio Code? (Use arrow keys)
> Open with `code`
SkipDo you want to open the new folder with Visual Studio Code? (Visual Studio Code로 새 폴더를 열겠습니까?)
키보드의 상/하 방향키로 선택하면 됩니다.
여기서는 skip를 선택하고 Enter 키를 누릅니다.
여기서 Open with `code`를 선택하고 Enter 키를 누르면 새로운 Visual Studio Code가 오픈됩니다.
그래서 Visual Studio Code의 Terminal(터미널)에서 yo code 명령어를 실행할 경우에는 skip를 선택하시기 바랍니다.
2. Terminal(터미널)를 닫고 EXPLORER(탐색기)에서 "hellowold" 폴더에 있는 'extension.js"를 클릭하여 오픈해 보면 기본적인 코딩이 되어 있는 것을 학인 할 수 있습니다.
// The command has been defined in the package.json file
// Now provide the implementation of the command with registerCommand
// The commandId parameter must match the command field in package.json
let disposable = vscode.commands.registerCommand('helloworld.helloWorld', function () {
// The code you place here will be executed every time your command is executed
// Display a message box to the user
vscode.window.showInformationMessage('Hello World from helloworld!');
});기본 코딩은 명령 팔레트(Command Palette)에서 "Hello World"를 입력하고 선택되어 실행되면 메시지 박스가 나타나게 되어 있습니다.
package.json 파일을 오픈하여 보면 "title"이 "Hello World"로 되어 있습니다, 이 부분을 수정하면 명령어가 변경됩니다.
"contributes": {
"commands": [{
"command": "helloworld.helloWorld",
"title": "Hello World"
}]
}
3. Visual Studio Code의 메뉴 Run(실행) > Start Debugging(디버깅 시작)를 클릭하거나 기능키 F5 버튼을 누릅니다.
그러면 디버깅을 위해 실행될 환경을 선택할 수 있는 창이 나타납니다. Extension를 테스트하기 위해서 "VS Code Extension Development"를 선택합니다.
그러면 새로운 Visual Studio Code가 실행됩니다.
4. 새로운 Visual Studio Code의 메뉴 View > Command Palette... 를 클릭하거나 Ctrl + Shift + P를 눌러 명령 팔레트(Command Palette)를 실행시킨 후 입력란에서 "Hello"를 입력합니다. 그리고 검색된 결과에서 "Hello World"를 선택합니다.
그러면 오른쪽 상태바 위에 메시지 박스가 나타납니다.
기초적인 코딩이지만 Extension를 개발할 수 있게 되었습니다.