^ TypeScript, 자바스크립트, 커피스크립트로 확장자 쓰기이것은 결코 논쟁이 있다는 것을 의미하지 않는다.
official docs for the VS Code API은 TypeScript를 대상으로 하고 all of the examples은 TypeScript를 사용하여 작성합니다.마이크로소프트는 VS 코드와 타자 스크립트의 배후이기 때문에 예상을 뛰어넘지 않는다.이러한 문서를 읽은 경우 JavaScript로 확장을 구성할 수 있는지 여부를 잘 모를 수 있습니다.
만약 당신이 더 경험이 있다면, 당신은 "duh"라고 말할 수 있습니다. 이것은 분명히 electron 응용 프로그램입니다.그러나 모든 사람이 이런 경험을 가지고 있는 것은 아니다. 만약 이 사실이 사람들에게 소홀히 된다면 그것은 수치일 것이라고 나는 생각한다.이미 알고 있는 언어로 코드 편집기를 공격할 수 있는 것은 좋은 기회이다.당신이 자주 사용하는 물건을 맞춤형으로 제작하는 것은 커다란 보답을 가져올 것이다.🏆
따라서 본고의 목적은 공식 예시를 위해 자바스크립트 대체 방안을 제공하고 구축 확장에 대해 견해와 의견을 제공하는 것이다.나처럼 확장자를 쓰고 싶을 수도 있지만 타자 스크립트를 모를 수도 있다.내가 단지 가려운 곳을 긁고 싶을 때, 타자책을 배우는 것은 나에게 있어서 시행착오이다.나는 한 항목에서 너무 많은 새로운 것을 받아들이면 낙담과 실패를 초래할 것이라고 생각한다.
다음은 환매 협의의 예이다.

로폴 / vscode javascript 확장

JavaScript로 작성된 VS 코드 확장 예

VS 코드 확장 예

이 저장소에는 JavaScript로 작성된 샘플 확장이 포함되어 있습니다.
VS 코드 문서 examples은 TypeScript로 작성되었습니다.이 재구매 계약의 목적은 명확하고 간단한 JavaScript 대안을 제공하는 것입니다.
각 폴더에는 VS Code API 또는 VS 코드 Contribution Points의 주제를 설명하는 전체 확장자가 포함되어 있습니다.
각 예제에서 다음을 볼 수 있습니다.

기능 설명

사용법을 보여 주는gif 또는 화면 캡처

사용 VS 코드 API 목록 및 기여도

VS 코드 웹 사이트에 링크된 설명서(

)
너는 이 안내서 Writing VS Code extensions in JavaScript을 읽고 빨리 일어나 달리기를 할 수 있다.이것은 중요한 명칭 공간을 명확하게 개술하고 API의 일부 용어를 분해했다.그것은 본 환매 협의 중의 일부 예를 포함한다.

선결 조건

Node과...
View on GitHub
나는 마이크로소프트 환매 협의의 형식을 복제했지만, 큰 예외가 하나 있다.그들은 세 개의 짧은 필드가 있는 예시를 열거한 표를 가지고 있으며, 나는 모든 예시를 위해 화면 캡처, 설명, 기타 관련 필드를 포함하는 간단한 부분을 만들었다.

JavaScript 예제(L), TypeScript 예제(R)
그럼 어때요?
UI의 어느 부분과 관련된 예가 있는지 이해하기 어려우므로 확실하지 않으면 각 폴더를 클릭해야 합니다.UI를 설명하는 좋은 설명서가 없습니다.깊이 파헤치지 않으면 progress이 어디에 사는지, 혹은 webview이 무엇인지 짐작할 수 없을 것이다.최근 문서에서 이 점을 개선하기 위한 노력이 있었지만, 이러한 정보는 여전히 전파되고 있어, 더 많은 화면 캡처가 필요할 수도 있다.
이 문제를 해결하는 데 도움을 주기 위해서 나는 a more complete introductory guide을 썼다.나는 문서에서 API 아키텍처에 대한 명확한 개요와 API를 실제 UI와 연결하는 것이 정말 부족하다는 것을 알았다.UI의 일부분을 수정하기 위해 어떤 함수를 사용할지 추측할 수도 있습니다.API의 아키텍처 개요 섹션에서 확인할 수 있습니다.이 설명서에서는 프로젝트를 설정하는 방법과 API를 설명하는 방법에 대해 설명합니다.
JavaScript로 작성된 작고 비교적 간단한 확장 예시를 원한다면 Marky Stats의 원본 코드를 보십시오.확장 플러그인은 이벤트 가격 인하 문서에 대한 통계 정보를 제공하는 상태 표시줄을 추가했습니다. (아래와 같습니다.)

API 이해에 관한 한 마디.

TypeScript 예제를 자세히 살펴보면 앞의 두 가지는 Webview과 Webview View이다.이것은 잘못이 아니다.그것들은 두 종류의 다른 물건이다.그것들은 API에서 이렇게 명명되었다.🤔

설명서에는 API의 다양한 측면을 다루는 guides section의 상세도와 선명도가 나와 있습니다.webview API guide은 가장 상세한 버전 중 하나로 문제를 해결할 수 있습니다.나는 일이 어떻게 돌아가는지 알고 싶어서 사방을 뒤지는 것을 발견했다.🕵️
webview의 고급 JavaScript 예를 보려면 확장된 Snippets Ranger의 소스 코드를 보십시오.

보통 좋은 예를 보는 것이 API reference을 보는 것보다 쉽다.너는 함수 설명에서 가장 적은 정보를 얻을 수 있을 뿐이다.

나는 viewType이 도대체 무엇인지 이해하기 위해 하나의 예를 보아야 한다.🤦 실제로 ID입니다. API의 다른 부분을 탐색할 때 이 점을 기억하십시오.너는 탁구를 몇 번 쳐서 네가 필요로 하는 모든 답을 찾을 수 있다.
나는 이런 대제품을 생산하는 어떤 사람에게도 가혹하게 대하고 싶지 않다.좋은 API를 구축하기는 어렵지만, 문서는 보통 많은 다른 것들을 바탕으로 하는 마지막 일이다.하지만 확장 API를 파악하기가 매우 어렵다는 것을 알았다.직감을 느끼지 못하다.
물론 나일 수도 있지만, 나 혼자라고 생각하지 않아!좋은 API는 함수 이름을 찾을 필요가 없이 쉽게 알아맞힐 수 있다.나는 많은 것을 조사해야 한다.
나는 결국 다른 쪽으로 돌파했다.이제 나는 API의 대부분 내용을 잘 이해한다고 말할 수 있지만, 이러한 지식은 고된 노력을 통해 얻은 것이다.나는 확장을 할 때 확실히 즐거웠지만 좌절감도 가득했다.

게시 확장에 대한 단어

확장을 패키지화하고 게시하기 위해 vsce이라는 CLI 툴이 있습니다.그것은 사용하기 쉽다.이것은 확장 설치로 사용할 수 있는 vsix 패키지를 만들 것입니다.

cd myExtension
vsce package
# myExtension.vsix generated

Publishing Extension 가이드는 어떻게 확장을 발표하는지 배우는 기초를 포함하지만 사람들이 이 과정에서 확실히 문제를 만났다(나는 확실히 만났다).나는 문서에 공헌을 해서 몇 가지 절차를 더욱 명확하게 하려고 했다.
이것은 결코 복잡하지 않지만, 너는 반드시 엄격하게 이 절차를 따라야만 성공할 수 있다.Microsoft 계정이 있어야 하며,azure 대시보드에서 설정을 선택해야 합니다.게시자 ID 및 키를 사용하여 vsce 게시 확장을 사용할 수 있습니다.
문제는 두 가지 절차가 독단적인 것 같아서 뭔가를 빠뜨리고 싶을 수도 있다는 것이다.안내서의 설명에 따라 복선상자를 선택하십시오!문제가 발생하면 언제든지 vsix 파일을 https://marketplace.visualstudio.com/manage/의marketplace 대시보드에 업로드할 수 있습니다.

VS 코디움의 시장 점유율은 Open VSX Registy이다.자가 등록 이후 등록 과정에 변화가 생겼지만 마이크로소프트의 과정보다 등록 과정이 더 원활하고 절차가 적으며 필요한 정보가 더 적다는 것을 알게 되었다.현재 Eclipse기금회의 일부로 here for more info on publishing으로 읽힌다.
이 github action을 사용하여 두 시장의 확장을 자동으로 발표합니다. main지점이 업데이트될 때 발표를 촉발합니다.VisualStudio marketplace에만 발표하려면 다른github 작업이 있습니다.

묶음에 관한 단어

모든 JavaScript 항목과 마찬가지로 원하는 바인딩기를 사용할 수 있습니다.번들은 몇 개의 모듈만 장착할 수 있는 확장 로드 속도를 크게 높일 수도 있습니다.나는 Marky Stats에서 이 점을 보았다. 그것은 3개의 짧은 모듈이 있는데, 이것은 적재 시간을 높였다.이것은 최적화라는 것을 명심해라. 만약 당신이 초보자라면 이렇게 할 의무가 있다고 생각하지 마라.빨리!
웹팩과 ESBuild를 어떻게 사용하는지 토론한 guide이 있다.대부분의 경우 간단한 설정 하나로 충분합니다. 만약 webview을 만들었다면, 설정은 이미지와 CSS 파일을 처리하는 데 더 많은 작업을 해야 합니다.만약 당신이 실제 예를 보고 싶다면, 대부분의 my published extensions명이 웹 패키지를 사용할 것이다.

결론

JavaScript로 확장을 구축하기 위해 제가 제공한 정보가 귀하께 더욱 온화한 학습 곡선을 제공해 드릴 수 있기를 바랍니다.이것은 재미있고 유익한 경험일 수 있지만, API를 파악하는 데는 인내심과 끈기가 필요하다.만약 당신에게 문제가 있다면, 당신은 환매 협의의 문제를 제기할 수 있고, 가능하다면, 나는 당신을 도울 것입니다.나는 곧 너의 재계약을 볼 수 있기를 바란다.🤓
읽어주셔서 감사합니다!제 RSS feed을 마음대로 구독하시고 소셜미디어에서 이 글을 공유해 주십시오.💌
너는 나에게 감사의 뜻으로 ko-fi으로 커피 한 잔을 사 줄 수 있다.🙂