TypeScript에서 CircleCI의 상태를 표시하는 VSCode 확장을 만들었습니다.

타이틀대로 TypeScript에서 "CircleCI Status"라는 빌드 상태를 표시할 수 있는 VSCode 확장 기능을 만들어 공개했습니다!
「Circle CI」라든지로 검색하면 나온다고 생각하므로, 꼭 사용해 보세요! (아이콘이 아직 없기 때문에 약간 외롭습니다)

Marketplace
ぁtps://마르케 tp.ゔぃすあ lsつぢお。 이 m/있어 ms? 있어 m 핥기=쿠로모카. 시 rc

GitHub
htps : // 기주 b. 코 m / 쿠로 모카 / 시 rc 〇 s ss

기능의 일부의 스쿠쇼입니다.


원래는 공부회의 이야기의 재료로서 만들고 있었습니다만, 이 때는 아직 완성되어 있지 않고 개발중이었습니다.
We Are JavaScripters! @36th에서 등단 해왔다 #wejs

기능

세세하게는 GitHub의 README 에 쓰고 있습니다만, 조금씩 이하와 같은 것이 VSCode상 할 수 있게 됩니다.

최근 빌드 성공 및 실패와 같은 상태 표시

최근 빌드 다시 실행

과거 빌드 나열 및 CircleCI 빌드 페이지 링크

사용 기술

TypeScript를 처음 사용했습니다. TypeScript는 접하고 싶다고 생각하면서 좀처럼 기회에 좋지 않았기 때문에, 사용하는 계기로서 VSCode의 확장 기능의 개발을 해 보았습니다.
처음에 Your First Extension 에 쓰여진 제너레이터로 편지지를 만들어, 그것을 바탕으로 TypeScript로 커스터마이즈 해 나가는 흐름으로 진행했습니다.

CircleCI API

CircleCI의 상태를 표시하기 위해 API를 사용하고 있습니다. 이하의 공식 문서를 참고로 했습니다.
h tps : // / rc ぇ시. 코 m / 두 cs / 아피 / # 시 rc ぇ 시 아피

여담입니다만 개발중은 v1.1 베이스의 내용이었으므로 코드상에서도 v1.1 의 엔트리 포인트를 호출하고 있습니다만, 정확히 최근 v2 에서 업데이트하고 싶습니다).

확장 개발 공개

게시하기 전에 Marketplace 페이지에 표시되는 GitHub 리포지토리, 검색 키워드 등을 package.json에 정의합니다. Extension Manifest 에 상세하게 쓰여져 있습니다. 특히 publisher 필드는 공개하는데 필수인 것 같고, 조금 번거로웠습니다.
공개 작업에 대해서는 Publishing Extension 를 참고로 했습니다.

마지막으로

TypeScript 처음이었습니다만, 어떻게든 움직이는 것이 만들 수 있어 우선 좋았습니다!
평상시는 PHP를 쓰고 있어 그 때도 VSCode를 사용하고 있습니다만, TypeScript를 쓰고 있으면 보완이 굉장히 효과가 있으므로 매우 쾌적하게 코딩할 수 있었습니다.
앞으로는 워크플로우 기능이나 Bitbucket에의 대응등을 해 나가고 싶다-라고 생각하고 있으므로, 앞으로도 워치 해 가면 다행입니다!