첫 번째 Visual Studio 코드 확장을 만드는 방법

첫 번째 Visual Studio 코드 확장을 만드는 방법

2022-06-01 last update

26 minutes reading Development VS Code Applications

소개


Visual Studio Code는 Microsoft가 Windows, Linux, macOS에서 제공하는 코드 편집기입니다.그것은 편집기의 다른 기능에 사용할 수 있도록 Visual Studio Code Marketplace 설치를 통해 확장할 수 있습니다.당신이 필요로 하는 확장을 완전히 만족시킬 수 없을 때, 자신의 확장을 만들 수 있습니다.
이 문서에서는 첫 번째 Visual Studio 코드 확장을 만듭니다.

선결 조건


이 강좌를 완성하려면 다음이 필요합니다.
  • 의 최신 버전을 다운로드하여 설치합니다.
  • 노드.js가 컴퓨터에 설치되어 있습니다Visual Studio Code.
  • 이 강좌는 노드 v14.4.0, npm v6.14.5, yo v3.1.1과 generator-code v1.2.16을 통해 검증되었다.

    단계 1 - 설치 도구


    Visual Studio 코드 팀은 확장을 만드는 데 필요한 모든 시작 프로그램 파일을 생성하는 데 사용할 생성기를 만들었습니다.
    VS 코드 확장을 개발하려면 두 개의 다른 npm 패키지가 필요합니다.
  • How To Install Node.js and Create a Local Development Environment - yo 명령행 인터페이스에 사용됩니다.
  • Yeoman - Visual Studio 코드 확장을 작성하는 데 사용되는 요만 생성기.
  • Visual Studio 코드의 내장 터미널 generator-code 을 사용하여 npxyo 로컬 복사본을 실행하고 명령generator-code을 실행하여 새 프로젝트를 초기화할 수 있습니다.
    1. npx -p yo -p generator-code yo code
    그러면 Yeoman에서 코드 생성기가 실행됩니다.

    2단계 - 첫 번째 확장 만들기


    이제 첫 번째 확장을 만들 수 있습니다.
    그리고 프로젝트에 대한 몇 가지 질문에 대답할 것입니다.TypeScript와 JavaScript 사이에서 생성할 확장 유형을 선택해야 합니다.이 강좌에서 JavaScript를 선택합니다.

    그리고 더 많은 문제에 직면하게 될 것입니다.이 강좌에서는 다음 옵션을 선택합니다.
    ? What type of extension do you want to create? New Extension (JavaScript)
    ? What's the name of your extension? testytest
    ? What's the identifier of your extension? testytest
    ? What's the description of your extension? This is a test extension
    ? Enable JavaScript type checking in 'jsconfig.json'? Yes
    ? Initialize a git repository? Yes
    ? Which package manager to use? npm
    
    이 프로세스가 완료되면 시작하는 데 필요한 모든 파일이 있습니다.가장 중요한 두 파일은 다음과 같습니다.
  • yo code
  • package.json
  • extension.js를 열어 봅시다.이름, 설명 등을 보실 수 있습니다.그리고 두 가지 부분이 중요합니다.
  • package.json: 확장된 이벤트 목록을 활성화합니다.확장은 로드 지연이므로 활성화 이벤트 중 하나가 발생하기 전에는 활성화되지 않습니다.
  • activationEvents: 사용자가 확장을 통해 실행할 수 있는 명령 목록을 제공합니다.
  • 우리는 곧 돌아와서 이 문제들을 토론할 것이다.
    소포json
    {
      // ...
      "activationEvents": [
        "onCommand:testytest.helloWorld"
      ],
      "main": "./extension.js",
      "contributes": {
        "commands": [
          {
            "command": "testytest.helloWorld",
            "title": "Hello World"
          }
        ]
      },
      // ...
    }
    
    commands 파일도 볼 수 있습니다.이것이 바로 우리가 확장을 위해 코드를 작성해야 하는 곳이다.여기에 견본 코드가 좀 있으니, 우리가 분해해 보자.
    아래 강조 표시된 줄에서 우리의 명령은 VS 코드에 등록되어 있습니다.이 이름extension.jshelloWorld의 명령과 같습니다.일부러 그런 거야.package.json 사용자가 사용할 수 있는 명령을 정의했지만 package.json 파일에 이 명령의 코드가 등록되어 있습니다.
    확대회사 명
    // ...
    
    /**
     * @param {vscode.ExtensionContext} context
     */
    function activate(context) {
      console.log('Congratulations, your extension "testytest" is now active!');
    
      let disposable = vscode.commands.registerCommand('testytest.helloWorld', function () {
        vscode.window.showInformationMessage('Hello World from testytest!');
      });
    
      context.subscriptions.push(disposable);
    }
    
    // ...
    
    이 예시에서 이 명령은 사용자에게'Hello World'메시지를 표시하는 것이다.

    3단계 - 디버그 확장


    현재 우리는 확장을 실행할 수 있도록 필요한 모든 파일을 설치했다.extension.js 폴더는 VS 코드가 프로젝트의 각종 프로필을 저장하는 곳입니다.이 예에서는 디버그 설정을 포함하는 Hello World 을 포함합니다.
    .vscode/시작.json
    // ...
    {
      // ...
      "configurations": [
        {
          "name": "Run Extension",
          "type": "extensionHost",
          "request": "launch",
          "runtimeExecutable": "${execPath}",
          "args": [
            "--extensionDevelopmentPath=${workspaceFolder}"
          ]
        },
        // ...
      ]
    }
    
    여기서 우리는 디버깅을 할 수 있다.화면 왼쪽에 있는 디버그 탭을 열고 재생 아이콘 을 클릭합니다.

    VS 코드의 새 (디버깅) 인스턴스가 열립니다.

    VS 코드의 이 디버깅 인스턴스를 열면 Mac에서 .vscode 또는 Windows에서 launch.json 명령 팔레트를 열고 Hello World를 실행할 수 있습니다.

    오른쪽 아래에 "Hello World"메시지가 표시됩니다.

    단계 4 - 분할 편집


    코드를 작성하기 전에 COMMAND+SHIFT+P 파일의 CTRL+SHIFT+P 부분을 다시 봅시다.마찬가지로, 이 절은 이벤트 목록을 포함하고 있으며, 언제 발생하든지 간에, 이 이벤트들은 우리의 확장을 활성화할 것입니다.기본적으로 명령을 실행할 때 활성화되도록 설정됩니다.
    이론적으로 이 사건은 무엇이든지, 더욱 구체적으로 말하면 activationEvents 무엇이든지.활성화 이벤트를 package.json 로 설정하면 VS 코드가 시작될 때 확장자가 로드됩니다.이것은 반드시 필요한 것이 아니라 단지 주석일 뿐이다.
    소포json
    {
      // ...
      "activationEvents": [
        "*"
      ],
      // ...
    }
    
    우리는 필요한 서류가 있다. 우리는 어떻게 디버깅하는지 안다.이제 확장을 구축하겠습니다.만약 우리가 이 확장자가 HTML 파일을 만들 수 있기를 희망한다면, 이 파일에는 이미 템플릿 코드가 있고, 우리의 프로젝트에 추가될 것이다.
    우선 명령의 이름을 업데이트합시다.*에서 명령 이름을 * 에서 extension.js 로 업데이트합니다.
    확대회사 명
    // ...
    
    /**
     * @param {vscode.ExtensionContext} context
     */
    function activate(context) {
      console.log('Congratulations, your extension "testytest" is now active!');
    
      let disposable = vscode.commands.registerCommand('testytest.createBoilerplate', function () {
        vscode.window.showInformationMessage('Hello World from testytest!');
      });
    
      context.subscriptions.push(disposable);
    }
    
    // ...
    
    이제 명령의 변경 사항을 사용하여 extension.helloworld 파일을 업데이트합니다.
    소포json
    {
      // ...
      "activationEvents": [
        "onCommand:testytest.createBoilerplate"
      ],
      "main": "./extension.js",
      "contributes": {
        "commands": [
          {
            "command": "testytest.createBoilerplate",
            "title": "Create Boilerplate"
          }
        ]
      },
      // ...
    }
    
    이제 우리의 기능을 작성합시다.우리가 해야 할 첫 번째 일은 가방 몇 개가 필요하다는 것이다.우리는 extension.createBoilerplate (파일 시스템) 및 package.json 모듈을 사용할 것이다.
    확대회사 명
    const fs = require('fs');
    const path = require('path');
    
    현재 폴더의 경로를 더 가져와야 합니다.명령 내부에 다음 코드 세그먼트를 추가합니다.
    확대회사 명
    if (!vscode.workspace) {
      return vscode.window.showErrorMessage('Please open a project folder first');
    }
    
    const folderPath = vscode.workspace.workspaceFolders[0].uri
      .toString()
      .split(':')[1];
    
    템플릿 HTML 코드를 파일에 쓰기 위해 변수에 저장해야 합니다.다음은 템플릿 HTML입니다.
    확대회사 명
    const htmlContent = `<!DOCTYPE html>
    <html lang="en">
    <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>Document</title>
      <link rel="stylesheet" href="app.css" />
    </head>
    <body>
      <script src="app.js"></script>
    </body>
    </html>`;
    
    지금 우리는 파일을 써야 한다.파일 시스템 모듈의 fs 함수를 호출하여 폴더 경로와 HTML 내용에 전달할 수 있습니다.
    path 모듈을 사용하여 폴더 경로를 만들 파일 이름과 조합합니다.그리고 리셋 내부에서 오류가 있으면 사용자에게 표시합니다.그렇지 않으면 템플릿 파일이 성공적으로 작성되었음을 사용자에게 알립니다.
    확대회사 명
    fs.writeFile(path.join(folderPath, 'index.html'), htmlContent, (err) => {
      if (err) {
        return vscode.window.showErrorMessage('Failed to create boilerplate file!');
      }
      vscode.window.showInformationMessage('Created boilerplate files');
    });
    
    다음은 전체 함수의 모양입니다.
    확대회사 명
    //...
      let disposable = vscode.commands.registerCommand(
        'testytest.createBoilerplate', async function () {
        // The code you place here will be executed every time your command is executed
    
        if (!vscode.workspace) {
          return vscode.window.showErrorMessage('Please open a project folder first');
        }
    
        const folderPath = vscode.workspace.workspaceFolders[0].uri
          .toString()
          .split(':')[1];
    
        const htmlContent = `<!DOCTYPE html>
    <html lang="en">
    <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>Document</title>
      <link rel="stylesheet" href="app.css" />
    </head>
    <body>
      <script src="app.js"></script>
    </body>
    </html>`;
    
        fs.writeFile(path.join(folderPath, 'index.html'), htmlContent, (err) => {
          if (err) {
            return vscode.window.showErrorMessage(
              'Failed to create boilerplate file!'
            );
          }
          vscode.window.showInformationMessage('Created boilerplate files');
        });
    
        // ...
      }
    // ...
    
    새로운 개발의 확장을 계속 디버깅합니다.그런 다음 명령 팔레트를 열고 Create Boilerplate를 실행합니다.

    명령을 실행하면 새로 생성된 path 파일과 메시지가 표시됩니다.

    결론


    어떤 API를 사용하고 어떻게 사용하는지에 대한 자세한 내용은 Visual Studio 코드 writeFile 를 참조하십시오.
    Extension API documentation.