코드

Github

동기

번역을 위해 VS Code -> Chrome -> VS Code 하는 과정이 불편하다.

VS Code에서 바로 한글->영어 번역을 하고 싶다.

하지만 비용이 들지 않았으면 좋겠다.

요구사항

• 네이버 파파고 API
• VS Code Extension
  • 번역 문구를 입력받기 위한 수단
  • 네이버 파파고 API Client Id/Secret 입력받기 위한 수단

과정

아래의 링크를 참고하고 구글링을 열심히 하면서 개발하였습니다.

VS Code Extension Tutorial

스케폴딩 Cli 설치

npm install -g yo generator-code

프로젝트 셋팅

아래의 명령어를 실행하는 패키지 관리자를 선택하는데 pnpm은 안 하시는걸 추천합니다.

vsce package 하는 과정에서 문제가 발생할 수 있습니다.

yo code

개발환경

아래의 명령어를 실행해 파일 저장 시 재컴파일 되도록 준비

npm run watch

작업을 하면서 동작을 확인하고 싶을때마다

src/extension.ts파일 연 뒤 F5를 눌러 extension 테스트 환경 실행

특징

번역 문구를 입력받기 위한 수단

아래의 기능을 이용하면 번역 문구를 입력받기 위한 수단을 사용자에게 제공할 수 있습니다.

const input = await vscode.window.showInputBox({
  placeHolder: '번역할 문구 입력',
});

네이버 파파고 API Client Id/Secret 입력받기 위한 수단

VS Code Extension Context에 secrets 필드를 보면 SecretStorage라는 비밀정보를 저장할 수 있는 저장소를 제공합니다. 이걸 활용해 네이버 파파고 API Client Id/Secret을 입력 받아서 저장하는데 활용했습니다.

여기에 SecretStorage가 있습니다.

export function activate(context: vscode.ExtensionContext) {
  const secretStorage = context.secrets;

아래의 방식으로 Client Id/Secret을 입력받아 Secret Storage에 저장하도록 했습니다.

async function changeSecret({
  secretStorage,
  key,
  inputPlaceholder,
  errorMessage,
}: SecretOptions) {
  const secretInput = await vscode.window.showInputBox({
    placeHolder: inputPlaceholder || `${key} 등록`,
  });
  if (!secretInput) {
    throw new Error(errorMessage || `${key} 를 입력해주세요.`);
  }

  await secretStorage.store(key, secretInput);

  return secretInput;
}

조금이나마 VS Code Extension을 개발하시는 분께 도움이 되면 좋겠네요.