vscode 확장 팩을 빌드하고 게시하는 방법

5122 단어 vscodecodequalityproductivity
한 번의 간단한 설치만으로 살 수 없는 VSCode 확장 세트가 있다면 좋지 않을까요? 이 게시물을 마치면 자신만의 VSCode 확장 팩을 만들 수 있으므로 VSCode의 마켓플레이스를 통해 팀 또는 개발 커뮤니티와 공유할 수 있습니다.

VSCode에서 강력한 기능을 사용하고 싶다면 내 확장 팩here을 설치할 수 있습니다...🦸

VSCode에는 확장 팩을 빠르게 생성하는 데 사용할 수 있는 멋진 CLI가 있습니다.

1단계 - 패키지를 설치합니다.



먼저 webapps용 스캐폴딩 도구인 yeoman과 VSCode용 yeoman의 generator 플러그인을 설치해 보겠습니다.
npm install -g yo generator-code

2단계 - 익스텐션 팩 만들기



다음으로 VSCode 확장 팩을 생성할 디렉터리/폴더에서 yo 명령을 실행해 보겠습니다.
yo code
그러면 새 프로젝트를 사용자 지정하기 위한 일련의 질문이 표시됩니다. 우리의 경우 "어떤 유형의 VSCode 확장을 만들고 있습니까?""새 확장 팩"을 선택합니다.


로컬에 패키지로 설치하려는 확장이 이미 있을 가능성이 큽니다. 이 시나리오에서는 "Y"를 누릅니다.

팩에 이름을 지정하고 식별자는 그대로 둡니다.

패키지에 대한 설명을 입력하십시오. 확장에 대한 리포지토리를 유지하려면 "예"를 누르십시오. 그러나 필수가 아니므로 아래 스크린샷과 같이 "아니오"를 입력할 수 있습니다.

이것은 우리를 위한 확장 팩을 생성했어야 합니다. 이제 사랑하는 VSCode 편집기에서 이 디렉토리를 열어 풍미를 더할 수 있습니다.

Step-3 나만의 것으로 만들기



이제 코드가 생성되고 폴더 구조가 제자리에 있으므로 확장 팩의 루트 디렉터리에서 "확장 매니페스트"라고도 하는 package.json 파일을 엽니다. 그것에서 우리는 확장을 변경할 수 있습니다. 문서extension manifest에서 자세한 내용을 확인할 수 있습니다.
package.json 파일에서 확장 팩에 게시자 이름과 아이콘 경로를 추가해 보겠습니다.

    {
        "name": "myextensionpack",
        "displayName": "myExtensionPack",
        "description": "My extension pack",
        "version": "0.0.1",
        "publisher": "DeejayDev",
        "icon": "my-icon.png",
    ...

`

게시자 이름 및 아이콘이 VSCode 편집기의 확장 화면 및 VSCode's marketplace에 표시됩니다.

참고: 아이콘은 최소 128x128이어야 합니다.

확장 프로그램에서 VSCode's marketplace을 사용자 정의할 수도 있으므로 그렇게 해 보겠습니다. 여전히 내부package.json에서 확장 페이지에 테마를 추가하겠습니다.

`

{
  ...
  "galleryBanner": {
    "color": "#399e64",
    "theme": "dark"
  }
}

`

확장을 패키징하기 전에 README.md 파일을 편집하고 변경 사항을 저장해야 합니다. 여기에서 확장 기능에 대한 자세한 정보를 제공합니다.

마지막으로 마켓플레이스를 통해 또는 로컬에서 공유하려는 설치 가능한 파일을 만들어야 합니다. 그러기 위해서는 The Visual Studio Code Extension Manager(vsce)를 설치해야 합니다.
npm i -g vsce
확장 프로그램의 루트 디렉터리에서 다음 명령을 실행해야 합니다.vsce package
확장 프로그램에 대한 리포지토리를 만들지 않았으므로 경고 메시지가 표시되면 "예"라고 말할 수 있습니다.

그리고 그것!

패키지를 로컬로 설치하거나 VSCode 마켓플레이스에 게시하려는 경우 these steps에 따라 설정해야 합니다. 하지만 VSCode extensions marketplace으로 이동하여 "확장 프로그램 게시"를 클릭하고 그렇지 않은 경우 로그인합니다.

새 게시자를 만든 다음 "+ 새 확장"을 클릭하고 "Virtual Studio Code"를 선택합니다. 그런 다음 vsce package와 함께 패키징한 (VSIX) 파일을 드래그 앤 드롭합니다. 새 업로드가 게시되는 데 시간이 걸릴 수 있습니다.

결론



올바른 확장 세트를 결합하면 코딩을 배우는 초보자와 숙련된 개발자에게 매우 도움이 될 수 있습니다. 저에게는 오타 걱정 없이 코딩할 수 있고, AI 기반 코드 제안 등... 생산성이 높아집니다.

그래서 생산적인 웹 개발자를 위한 Ultimate Web Development Pack을 생각해 냈습니다. 이 팩에 VSCode 확장을 추가하려면 contribution 페이지로 이동할 수 있습니다.
자바 서열화로 대상 깊이 Clone 진행
Entity framework 캐스케이드 제거 고려 사항

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage