M

MLOG

한국어

맞춤형 확장을 구축하여 VS Code의 강력한 기능을 활용하세요. 이 가이드는 설정부터 게시까지, 코딩 환경을 개선하고 창작물을 공유할 수 있도록 완벽한 안내를 제공합니다.

VS Code 확장 개발 마스터하기: 글로벌 개발자를 위한 종합 가이드

Visual Studio Code (VS Code)는 전 세계 수백만 명의 개발자가 사용하는 최고의 코드 편집기가 되었습니다. 그 인기는 가볍고 강력한 기능, 그리고 가장 중요한 확장성에서 비롯됩니다. 사용자 지정 확장을 만들 수 있는 기능을 통해 개발자는 특정 요구 사항에 맞게 편집기를 조정하여 생산성을 높이고 워크플로우를 간소화할 수 있습니다. 이 종합 가이드는 초기 설정부터 전 세계 사용자를 위해 창작물을 게시하는 과정까지, 자신만의 VS Code 확장을 만드는 과정을 안내합니다.

VS Code 확장을 개발하는 이유는 무엇일까요?

VS Code 확장을 개발하면 개인 개발자와 조직 모두에게 다음과 같은 수많은 이점이 있습니다.

사전 요구 사항

확장 개발을 시작하기 전에 다음이 설치되어 있는지 확인하십시오.

개발 환경 설정

사전 요구 사항이 준비되었으므로 개발 환경을 설정할 준비가 되었습니다.

  1. 새 확장 프로젝트 만들기: 터미널을 열고 다음 명령을 실행하여 확장 생성기를 시작합니다.
    2. yo code
  2. 프롬프트에 답변하기: 생성기는 확장 기능에 대한 일련의 질문을 합니다. 다음은 일반적인 프롬프트와 권장 답변에 대한 내용입니다.
    • 어떤 유형의 확장을 만들고 싶습니까? TypeScript 기반 확장의 경우 "New Extension (TypeScript)"를 선택하는 것이 좋습니다.
    • 확장 이름은 무엇입니까? 확장 기능에 대한 설명적이고 고유한 이름을 선택합니다. 예: "Code Spell Checker", "JavaScript Snippets", "Python Autocomplete".
    • 확장 식별자는 무엇입니까? 이것은 일반적으로 `publisher.extension-name` 형식의 확장 기능에 대한 고유 식별자입니다. 게시자 이름(예: GitHub 사용자 이름 또는 회사 이름)을 선택합니다.
    • 확장에 대한 설명은 무엇입니까? 확장 기능의 기능에 대한 간결하고 유익한 설명을 제공합니다.
    • git 저장소를 초기화하시겠습니까? 버전 관리를 위해 "Yes"를 선택하여 Git 저장소를 초기화합니다.
    • eslint를 사용하여 코드를 검사하시겠습니까? 코드 스타일 일관성을 적용하려면 "Yes"를 선택합니다.
  3. VS Code에서 프로젝트 열기: 생성기가 완료되면 VS Code에서 새로 생성된 프로젝트 폴더를 엽니다.

프로젝트 구조 이해

확장 생성기는 다음과 같은 주요 파일로 기본 프로젝트 구조를 만듭니다.

첫 번째 확장 기능 작성

명령이 실행될 때 "Hello World" 메시지를 표시하는 간단한 확장 기능부터 시작해 보겠습니다.

  1. `src/extension.ts` 열기: 이 파일에는 확장 기능이 활성화될 때 호출되는 `activate` 함수가 포함되어 있습니다.
  2. `activate` 함수 수정: 기존 코드를 다음으로 바꿉니다.
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('축하합니다. "my-extension"이 활성화되었습니다!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('My Extension에서 Hello World!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. 설명:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: ID가 `my-extension.helloWorld`인 명령을 등록합니다. 이 명령은 VS Code 명령 팔레트에서 사용할 수 있습니다.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`: VS Code 창에 정보 메시지를 표시합니다.
    • `context.subscriptions.push(disposable)`: 명령을 확장 기능의 구독에 추가하여 확장 기능이 비활성화될 때 제대로 삭제되도록 합니다.
  4. `package.json` 수정: 명령을 정의하려면 `contributes` 섹션에 다음을 추가합니다.
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. 설명:
    • `"commands"`: 확장 기능이 제공하는 명령을 정의합니다.
    • `"command": "my-extension.helloWorld"`: `extension.ts`에서 사용된 ID와 일치하는 명령 ID를 지정합니다.
    • `"title": "Hello World"`: 명령 팔레트에서 명령의 표시 이름을 설정합니다.

확장 기능 테스트

이제 확장 기능을 테스트할 차례입니다.

  1. F5 키 누르기: 확장 기능이 설치된 새 VS Code 창이 시작됩니다. 이것은 "확장 개발 호스트"입니다.
  2. 명령 팔레트 열기: `Ctrl+Shift+P`(macOS의 경우 `Cmd+Shift+P`)를 눌러 명령 팔레트를 엽니다.
  3. "Hello World" 입력: 명령 팔레트에 명령이 나열되어야 합니다.
  4. "Hello World" 선택: 명령을 클릭하면 실행되어 VS Code 창에 "Hello World" 메시지가 표시됩니다.

확장 기능 디버깅

디버깅은 확장 기능의 문제를 식별하고 수정하는 데 중요합니다. VS Code는 훌륭한 디버깅 지원을 제공합니다.

  1. 중단점 설정: 코드의 줄 번호 옆에 있는 편집기 여백을 클릭하여 코드에 중단점을 설정합니다.
  2. F5 키 누르기: 디버그 모드에서 확장 개발 호스트가 시작됩니다.
  3. 확장 기능 트리거: 디버깅하려는 코드를 트리거하는 명령 또는 작업을 실행합니다.
  4. 변수 및 호출 스택 검사: VS Code 디버거는 중단점에서 실행을 일시 중지하여 변수를 검사하고, 코드를 단계별로 실행하고, 호출 스택을 검사할 수 있습니다.

VS Code API 사용

VS Code API는 편집기와 상호 작용하기 위한 풍부한 인터페이스 및 기능 세트를 제공합니다. API의 주요 영역은 다음과 같습니다.

예: 코드 조각 확장 기능 만들기

기본 React 구성 요소를 만들기 위한 코드 조각을 추가하는 확장 기능을 만들어 보겠습니다.

  1. `snippets` 폴더 만들기: 프로젝트의 루트에 `snippets`라는 새 폴더를 만듭니다.
  2. 조각 파일 만들기: `snippets` 폴더 내에 `react.json` 파일을 만듭니다.
  3. 조각 정의 추가: `react.json`에 다음 JSON을 추가합니다.
    4. {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
    \n\t\t\t${2:Content}\n\t\t
    \n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Creates a basic React component"
	}
}
  4. 설명:
    • `"React Component"`: 조각 이름입니다.
    • `"prefix": "reactcomp"`: 조각을 트리거하는 접두사입니다. `reactcomp`을 입력하고 `Tab`을 누르면 조각이 삽입됩니다.
    • `"body"`: 조각의 코드 줄을 나타내는 문자열 배열입니다.
    • `${1:ComponentName}`: 구성 요소 이름을 빠르게 변경할 수 있는 탭 정지입니다.
    • `"description"`: 조각에 대한 설명입니다.
  5. `package.json` 수정: `contributes` 섹션에 다음을 추가합니다.
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. 설명:
    • `"snippets"`: 확장 기능이 제공하는 조각을 정의합니다.
    • `"language": "javascriptreact"`: 조각을 적용할 수 있는 언어를 지정합니다.
    • `"path": "./snippets/react.json"`: 조각 파일의 경로를 지정합니다.
  7. 조각 테스트: `.jsx` 또는 `.tsx` 파일을 열고 `reactcomp`을 입력합니다. `Tab`을 눌러 조각을 삽입합니다.

고급 확장 개발 기술

기본 사항을 숙지한 후에는 더 고급 확장 개발 기술을 탐색할 수 있습니다.

국제화 및 지역화(i18n 및 L10n)

글로벌 사용자를 대상으로 하려면 확장을 국제화하고 지역화하는 것을 고려하십시오. 여기에는 다양한 언어와 지역을 지원하도록 확장을 조정하는 것이 포함됩니다.

확장 게시

확장이 준비되면 다른 사람이 사용할 수 있도록 VS Code Marketplace에 게시할 수 있습니다.

  1. Azure DevOps 조직 만들기: 확장을 게시하려면 Azure DevOps 조직이 필요합니다. 아직 없는 경우 Azure DevOps 웹사이트에서 무료 계정을 만드십시오.
  2. `vsce` 도구 설치: VS Code Extension Manager(`vsce`)는 확장을 패키징하고 게시하기 위한 명령줄 도구입니다. npm을 사용하여 전역적으로 설치합니다.
    3. npm install -g vsce
  3. 게시자 만들기: 게시자는 Marketplace에서 확장 기능을 소유하는 ID입니다. `vsce create-publisher` 명령을 사용하여 게시자를 만듭니다. 게시자 이름과 Azure DevOps의 개인 액세스 토큰(PAT)을 제공해야 합니다.
  4. PAT(Personal Access Token) 생성: Azure DevOps에서 "사용자 설정" -> "개인 액세스 토큰"으로 이동하여 "Marketplace(게시)" 범위를 사용하여 새 PAT를 만듭니다.
  5. 확장 패키징: `vsce package` 명령을 사용하여 확장을 `.vsix` 파일로 패키징합니다.
  6. 확장 게시: `vsce publish` 명령을 사용하여 확장을 Marketplace에 게시합니다. 게시자 이름과 PAT를 제공해야 합니다.

확장 개발을 위한 모범 사례

고품질의 유지 관리 가능한 VS Code 확장을 만들려면 다음 모범 사례를 따르십시오.

커뮤니티 리소스

VS Code 확장 개발에 대해 자세히 알아보려면 다음 유용한 리소스를 참조하십시오.

결론

VS Code 확장을 개발하는 것은 코딩 환경을 사용자 지정하고, 생산성을 높이며, 솔루션을 글로벌 개발자 커뮤니티와 공유할 수 있는 강력한 방법입니다. 이 종합 가이드를 따르면 확장 개발 기술을 마스터하고 자신과 다른 사람을 위해 VS Code 환경을 향상시키는 혁신적인 도구를 만들 수 있습니다. 커뮤니티를 수용하고, 오픈 소스 프로젝트에 기여하고, 끊임없이 배우고 끊임없이 발전하는 VS Code 확장 개발 세계를 탐구하는 것을 잊지 마십시오. 행운을 빌며 즐거운 코딩하세요!