VS Codeの33の拡張機能、その開発、およびそれらの管理方法についてのストーリー

本日の翻訳である資料の著者は、VS Codeの33の拡張機能を作成しました。 彼は、このエディターが好きな人、拡張機能の開発とサポートの方法を共有することにしました。 さらに、彼は自分のプロジェクトについて簡単に話しました。 おそらくあなたはそれらの中であなたにとって役立つ何かを見つけるでしょう。

拡張機能の書き方

私は生産的な仕事と自動化が大好きなので、VS Codeの拡張機能を開発するためのよく組織化されたプロセスを開発しました。 このプロセスの主要なコンポーネントについて説明します。

▍ツール

テンプレートを使用して新しいプロジェクトをすばやく開始するのに役立つ非常にシンプルなツールを作成しました。 対応するユーティリティは次のように機能します。

• 入力としてフォルダを受け入れます（これは「テンプレート」と呼ばれるものです）。
• handlebarsパッケージを使用してすべてのファイルを処理し、見つかった各プレースホルダー（ {{name}}
  
  
  
  ）の代わりに何を使用するかについての質問を処理するプロセスで尋ねます。
• その結果、彼女は新しいフォルダを作成します。ファイルには、質問に対する回答として入力されたものが含まれています。

yeomanユーティリティを使用してテンプレートを操作することを考えましたが、私のニーズのために、それは不合理に複雑に思えます。 khaosツールを使用しましたが、サポートされておらず、テンプレートを自動的に更新しません。使用する必要があるたびに手動で更新することは特に便利ではありません。

▍テンプレート

これが、私がtemplate-vscode-extensionを使用して、VS Codeの新しい拡張機能の開発を開始する方法です。









新しいプロジェクトを作成する



プログラムの質問への回答が入力された後、VS Codeの「Hello、world！」などの機能拡張を自由に使用できます。 テンプレートには多くのヘルパー関数が含まれていますが、それが判明したように、拡張機能を開発するときによく使用します。 特に、テンプレートは、 .vscode



フォルダーからのユーザー構成ファイルのロード、コマンドの自動登録をサポートし、アクティブなファイルに基づいて現在のルートディレクトリを見つけ、他の同様の問題を解決できます。



時計を戻すことができれば、おそらくすべての拡張機能開発プロジェクトでこれらの関数のコピーを作成するのではなく、これらのすべてのヘルパー関数をスタンドアロンパッケージ（ vscode-utils



など）にvscode-utils



ます。 しかし、残念ながら、何十もの拡張機能を作成することを知りませんでした。 今、私は私の拡張機能のすべてのプロジェクトで対応するコードを更新する時間を費やさなければなりません。



VS Codeの拡張機能を開発する予定がある場合は、おそらく私のものをベースにして、独自のテンプレートを作成することをお勧めします。

▍役に立つドキュメント

開発プロセス中、API VS Codeのドキュメントは常に手元にあります 。 最初は、大きなページであるこのドキュメントを操作することは特に便利ではありませんが、少し時間をかけてすぐに確認して、どのAPIが利用可能かを理解できれば、使いやすいでしょう。 一般に、利用可能なAPIのセットに非常に満足していることに気付くことができます。



ところで、VS Codeの拡張機能を開発する場合、ドキュメントのこのセクションを読むことは非常に役立ちます。

I開発した拡張機能について

私はさまざまな問題を解決するために拡張機能を開発しています。それらについては以下で説明します。 さらに、これらの拡張機能の一部は、他の拡張機能の開発に役立ちます。

私の拡張機能

私が言ったように、私は生産性を目指して努力しているので、私の拡張の多くは労働生産性の向上を目指しています。 私は自転車の絶え間ない発明に対処しないようにし、それらの共同使用が問題を引き起こさないように、さまざまなエクステンションの間で機能の明確な分離を達成しようとします。



これが良いか悪いかはわかりませんが、VS Codeの拡張機能を作成したいです。 さらに、自動化できるタスクのストリームが枯渇することはありません。 そのため、最初の拡張機能を作成した後、2番目、3番目の拡張機能を作成し、結果として最大33に到達しました。



次に、拡張機能について簡単に説明します。 それらのページでそれらについての詳細を見つけることができます。

extensions拡張機能を作成するための拡張機能

1番 デバッグマネージャー

Debug Manager拡張機能を使用すると、タスクや構成ファイルを作成しなくても、ターミナルからでもデバッグを実行できます。 不要なファイルでリポジトリを詰まらせたくないので、この拡張機能を作成しました（たとえば、タスクを使用するのは誰ですか？）。 ターミナルからデバッガを起動することは非常に便利な機能であり、VS Code自体に含める必要があると思います。









ターミナルからデバッガーを実行する

2番 StatusBarデバッガー

StatusBar Debugger拡張機能は、プログラムステータスバーにデバッグコントロールを追加します。 これは、標準のデバッグパネルよりもはるかに便利です。 また、VS Codeがより多くのデバッグデータを提供する場合 、私の拡張機能はさらに改善されます。

番号3。 .VSIXをインストールする

Install .VSIX拡張子を使用すると、



パネルから直接.vsix



ファイルをインストールできます。 この拡張子の理由は、そのようなファイルの標準インストール手順が不便であるという事実でした。

番号4。 バンプ

Bump拡張機能を使用すると、プロジェクトのバージョン番号を増やして、変更ログに新しいデータを入力できます。 このツールは、独自の内部ロジックに従って動作しますが、カスタマイズできます。 まともな拡張機能には変更ログが必要であるという事実のために作成しましたが、これはそのような拡張機能の開発者が手動でジャーナルに入力する必要があるという意味ではありません。 これは私のお気に入りの拡張機能の1つです。 いつかGitHubリリースの自動化を有効にしたいので、それに基づいてコマンドラインツールを作成することになるでしょう。









バンプ拡張の使用

5番 画像を最適化する

画像の最適化拡張機能を使用すると、ユーザーが選択した外部アプリケーションを使用して、プロジェクトで使用可能な画像を最適化できます。 1つのチーム-そしてそれは終わった。

▍プロジェクト管理

No. 6。 プロジェクト+

Projects +拡張機能は、 プロジェクトの管理に使用されます。 豊富な機能があり、構成でき、プロジェクトを自動的に検出します。 この種の最も広く使用されている拡張機能の1つはProject Managerですが、約100のリポジトリがあり、それらを管理するための適切なツールが必要です。その1つは、無制限のネストレベルのグループのサポートです。









プロジェクトと拡張機能の使用

▍ToDoリストの管理

番号7。 Todo +

Todo +拡張機能により、todoリストの操作が簡単になります。 使いやすくカスタマイズ可能な強力なツールです。 TODO



ファイルの構文の強調表示が必要ない場合、または標準の組み込みの強調表示に満足できる場合は、素敵なTodo Tree拡張機能を試すことができます。









Todo +およびプロジェクトレベルの情報を使用した構文の強調表示

番号8。 ハイライト

Highlight拡張は、高度な正規表現構文強調ツールです。 これは、todoリスト、注釈などを操作するのに役立ちます。 TODO Highlight拡張機能はこの分野で非常に人気がありますが、私の拡張機能はより汎用性が高く、はるかに強力です。 さらに、おそらくより高速に動作します。

9番 マークダウンtodo

Markdown Todo拡張機能を使用すると、 マークダウンファイル内のToDoリストを簡単に操作できます。 特別なことは何もありませんが、マークダウンファイル内でTodo +の機能を使用できます。

10番 プロジェクト+ Todo +

Projects + Todo +拡張機能を使用すると、いわばプロジェクトを分析し、1つのファイルにすべてのtodoファイルを集約した結果を鳥瞰図で確認できます。 プロジェクト管理にProjects +拡張機能を使用し、Todoリストの操作にTodo +を使用する場合、この拡張機能のおかげで、すべての（または一部の）プロジェクトからTodoリストを1か所で収集できます。

filesファイルを開くための拡張

私にとって重要なことは、異なるアプリケーションまたはWebページをすばやく切り替える機能です。 そのため、このような問題の解決を簡単にするVS Codeの一連の拡張機能を作成しました。

11番 アプリケーションで開く

アプリケーションで開く拡張機能を使用すると、デフォルトアプリケーションまたは開発者が使用することを決定したアプリケーションで任意のファイルを開くことができます。 これは普遍的な拡張です。

12番 ブラウザで開く

ブラウザーで開く拡張機能は、エディターにコマンドを追加します。このコマンドを使用すると、任意のブラウザーで、または使用可能なすべてのブラウザーですぐに、現在のファイルまたはプロジェクトを開くことができます。

13番 コードで開く

Open in Code拡張機能により、VS CodeとVS Code Insiderを簡単に切り替えることができます。

14番 ファインダーで開く

Finderで開く拡張機能は、Finderファイルマネージャーで現在のファイルまたはプロジェクトを開くように設計されています。

15番 GitHubで開く

Open in GitHub拡張機能を使用すると、github.comで現在のプロジェクトまたはファイルを開くことができます。 この問題を解決するための拡張機能は多数ありますが、試したところ、必要のない機能が多すぎることがわかりました。

16番 gittowerで開く

Open in GitTower拡張機能は、 GitTowerで現在のプロジェクトを開くコマンドをエディターに追加します 。

番号17。 マーケットプレイスで開く

Open in Marketplace拡張機能は、VS Codeの拡張機能ディレクトリで現在のプロジェクトを開くチームをエディターに装備します。

番号18。 node_modulesで開く

node_modules拡張機能で開くを使用すると、選択したテキストまたはnode_modules



フォルダー内の任意の行に対応するモジュールを検索して、 node_modules



フォルダーを開くことができます。 開発者が使用するモジュールをよりよく理解したい場合に役立ちます。

19番 npmで開く

NPMで開く拡張機能を使用すると、npmディレクトリのモジュールページを開くことができます。 モジュールのヘルプ情報を表示するために使用すると便利です。

20番 船で開く

Open in Ship拡張機能は、Shipで現在のプロジェクトを開くコマンドをエディターに追加します。 残念ながら、Shipは動作を停止しました。 したがって、現在、プロジェクトの問題について受け取った情報を忘れないように、 Notyで特別なリマインダーシートを使用する必要があります。

21番 ターミナルで開く

ターミナルで開く拡張機能により、ターミナルで現在のプロジェクトを簡単に開くことができます。

番号22。 送信で開く

Open in Transmit拡張機能を使用すると、現在のファイルまたはプロジェクトをTransmitで開くことができます。

▍さまざま

番号23。 ブラウザの更新

Browser Refresh拡張機能を使用すると、VS CodeからwithoutRを直接押すことで、ブラウザーに切り替えることなく、ブラウザーのページを更新できます。 この拡張機能は、対話型の再読み込みオプションを使用できない場合や、 browser-sync



せずにページbrowser-sync



更新する必要がない場合に役立ちます。

番号24。 コマンド

コマンド拡張機能を使用すると、ステータスバーから任意のコマンドを呼び出すことができます。 引数の受け渡しがサポートされています。









コマンドによって作成されたカスタムコマンド

番号25。 差分

Diff拡張機能を使用すると、開いているファイルを比較できます。 code-diff path1 path2



が遅すぎるため、この拡張機能を作成しました。

26番 Gitファイルの履歴

Gitファイル履歴拡張機能は、現在のファイルと以前のバージョンの違いの分析を簡素化します。 この問題を解決する多くの拡張機能がありますが、それらを試してみたところ、それらは不必要な機能で混雑しているか動作不能であることが判明しました。

番号27。 Githubの通知

安全で構成可能なGitHub Notifications拡張機能は、ステータスバーにGitHubの通知に関する情報を表示することを目的としています。

28番 モノカイナイトテーマ

Monokai Night ThemeはMonokaiテーマに基づくミニマルなダークテーマです。 既存のトピックから自分に合ったものを選べなかったという事実のために作成しました。









モノカイナイトテーマ

29番 いいえ[サポートされていません]

No [Unsupported]拡張は、エディターヘッダーから「[Unsupported]」行を削除することを目的としています。 この拡張機能は既に廃止されているため、 代わりにFix VSCode Checksumsをお勧めします。 残念ながら、 これとこの議論の後でも、迷惑な碑文「[Unsupported]」は消えていません。

30番 複数のファイルを開く

Open Multiple Files拡張機能を使用すると、特定のフォルダー内のすべてのファイルを同時に開くことができます。 必要に応じて、ファイルをテンプレートでフィルタリングできます。

31番 検索-すべての結果を開く

[ 検索-すべての結果を開く]拡張機能を使用すると、1つのコマンドですべての検索結果を同時に表示できます。

番号32。 端末マネージャー

ターミナルマネージャー拡張機能は、複数のターミナルでの作業（たとえば、ターミナル内のいくつかのコマンドの実行）を一度に自動化します。 ターミナルマネージャーは私の最初の拡張機能だったと言わなければなりません。 ターミナルを使用する場合-試してみることをお勧めします。

33番 送信する

Transmit拡張機能は、Transmitとの対話を整理するためのいくつかのコマンドをエディターに装備します。

拡張機能管理

複数のリポジトリを管理するのは大変な作業です。 どうやってやるのか教えてあげましょう。

commit定期的なコミット

遅かれ早かれ、サポートされているすべてのリポジトリに何らかの変更を加える必要があるときが来ます。 これは、多くのリポジトリが同じコミットを行わなければならないという事実に要約されます。 すぐに退屈なタスクに変わります。



この問題の解決を自動化するために、 autogit-多くのリポジトリに適用されたときにコマンドを実行できるツールを作成しました。









autogitを使用してコマンドを実行する



autogit



を使用する新しい方法を常に見つけています。 たとえば、最近、このツールを使用して、VS Codeの拡張機能のコードが保存されているすべてのリポジトリで次の変更を行いました。

• webpack
  
  
  
  ビルドしwebpack
  
  
  
  。 これにより、起動速度が約80％向上しました。
• package-lock.json
  
  
  
  無視しpackage-lock.json
  
  
  
  。 このファイルは、コミット履歴を詰まらせるだけです。 このトピックに関する優れた資料を次に示します。
• tsconfig.json
  
  
  
  更新しtsconfig.json
  
  
  
  。 言語の新機能、特に非同期関数を集中的に使用します。 トランスピレーションのターゲットが<= es5
  
  
  
  設定されている場合、これらは非常に遅い構造にトランスポーズされます。 VS Codeは最新のコードを理解するため、これは必要ありません。
• TSLintをアンインストールします 。 基本的に、私はリンターのヒントに注意を払っていないことがわかったので、この機会を取り除きました。
• 参考資料での高解像度ロゴの使用。 以前は128x128のロゴを使用していましたが、参照資料の外観を改善するために、より良い画像を使用しました。 写真自体が奇跡であるとは言えませんが、それは別の話です。

1つのリポジトリでこのような変更を行うのはそれほど長くはありませんが、33に達すると、自動化ツールなしで生活するのははるかに困難です。

description説明とキーワードをGitHubと同期する

ここで説明していることは実行する必要はありませんが、説明とキーワードの同期を自動化するツールは私を傷つけません。 このタスクは、 autogitおよびautogit-command-github-syncツールのツールで処理できます。









説明とキーワードをautogitと同期する



しかし、 autogit-command-github-publishは、新しいリポジトリを自動的に作成するための私のツールです。

▍レポート

いくつかの拡張機能を作成してすぐに、それらの人気度、時間の経過とともにダウンロード数がどのように変化するかについて興味を持ちました。 特定の開発者のすべての拡張機能に関する情報は、特別ページで見つけることができます。 たとえば、 ここに私のページがあります。 ただし、このページには、最後のチェック以降に行われた拡張機能のダウンロード数などの情報は表示されません。 それがrssaを作成した理由です。 これは、URLでアクセス可能なものへの変更を追跡できるツールです。









rssaが受信したデータ



テキストは良いですが、データをグラフで表示する方がはるかに良いでしょう。 現在、この問題を解決するツールを開発していますが、まだ公開していません。 たとえば、 rssa



を使用して取得したデータに基づいて作成されたTodo +拡張機能のダウンロードスケジュールのように見えます。









Todo +ダウンロードスケジュール



ここでは、いくつかの場所で、ダウンロード数の急激な増加を見ることができます。 拡張アップデートのインストールはシステムによってダウンロードと見なされるため、これはアップデートが公開されるときに発生します。 これにより、誰でも何百万回もダウンロードして拡張機能の作成者になり、作成して多くの更新プログラムを公開できるという事実につながります。 ところで、これはVS Codeの拡張カタログの問題の 1つです。

まとめ

かつて、VS Code向けに公開された拡張機能の数に関しては、Microsoftに次いで2位だったと思いました。 しかし、判明したように、それらのいくつかは私のものよりも2つ以上持っています。 したがって、拡張機能を作成し続けます。



親愛なる読者！ VS Codeの拡張機能を作成しますか？