한윤석 개발 블로그

배운 것을 적는 블로그입니다.

VS Code extension 만들기 시작하기

등록일: 2019-10-02
수정일: 2019-10-02

설치하기

YeomanVS Code Extension Generator를 설치합니다.

npm install -g yo generator-code

프로젝트 생성하기

yo code

실행하면 Yeoman이 실행되면서 프로젝트 이름과 패키지 매니저는 어떤 것을 사용할 것이며 TypeScript를 사용할 것인지 JavaScript를 사용할 것인지 물어봅니다. 원하는 것을 선택합니다. 이 예제에서는 TypeScript를 사용합니다.

실행하기

code ./helloworld

생성된 폴더를 VS Code로 열고 F5키로 실행하거나 디버깅 탭에서 바로 실행하면 새로운 VS Code 창이 열리고 Command Palette(shfit+cmd+p)에서 Hello World라는 명령어를 실행하면 오른쪽 밑 하단에 메세지가 뜨는 것을 확인할 수 있다.

살펴보기

package.json을 살펴보면 다음을 확인할 수 있는데 command는 실행할 커맨드 이름을 나타내고 title은 Command Palette에서 노출될 제목을 나타낸다.

{
  "contributes": {
		"commands": [
			{
				"command": "extension.helloWorld",
				"title": "Hello World"
			}
		]
	}
}

src/extension.ts를 살펴보면 registerCommand함수 호출을 보면 extension.helloworld 문자열이 보인다. package.json에서 살펴봤던 커맨드 이름과 같다.
커맨드 실행시 인자로 받은 함수가 실행되며 Hello World!라는 문자열을 보여주는 기능만 있다. 여기서 문자열을 변경하고 새로 열린 VS Code창에서 Reload window커맨드를 실행한다. 그리고 다시 Hello World커맨드를 실행해보면 변경된 문자열을 확인할 수 있다.

Sources


자바스크립트로 직접 만들면서 배우는 - 자료구조와 알고리즘 강의 바로 가기
실습으로 마스터하는 OAuth 2.0: 기본부터 보안 위험까지 - OAuth 2.0 강의 바로 가기
기계인간 이종립, 소프트웨어 개발의 지혜 - Git 강의 바로 가기

코드숨에서 매주 스터디를 진행하고 있습니다. 메일을 등록하시면 새로운 스터디가 시작될 때 알려드릴게요!