💻 私は自分のVisual Studioのコード拡張パックをリリースし、ここであなたもすることができます方法です!

導入
ボックスのVisual Studioのコードは、多くの機能があり、すでに幻想的に見えます.それでも、あなたの家のように、それはあなたの家のように感じるようにしたい🏡.
そのためには、拡張機能、テーマ、およびアイコンをインストールできます.人々は、彼らがインストールしたか、あまりにも多くの拡張子がインストールされている拡張子を忘れて、それらをアンインストールするためにそれを痛めるの罰金.
たぶんあなたの穴チームは、Visual Studioのコードで動作し、あなたのチームと拡張機能を共有します.また、新しい同僚のオンボードプロセスに役立つことができます.
あなたはRemove Development 拡張子をインストールし、リモートセットアップに多くの拡張モジュールをインストールします.
このように、拡張パックは多くの方法で有用であり、あなたの人生をより簡単で生産性にすることができます.

マイエクステンションパック
上記のすべての理由のために、私は私の拡張パックを出版しました.LampeWebDev's extension pack
あなたが同じテーマ、アイコンと拡張子を持っているならば、私は時間の大部分を使います、その拡張パックをインストールしてください!色とアイコンのテーマを変更し、行くには良いです!

拡張パックの作成方法

請求
する必要がありますnodejs with npm , git and Visual Studio Code あなたのマシンにインストールされます.これらのインストールは非常にオペレーティングシステムに依存します.

拡張パックテンプレートの生成
Visual Studioのコードチームは、Visual Studioのコード拡張機能の開発に大きなツールを提供します.Visual Studioコードの拡張機能を開発するときに使用する必要があります.
つのNPMパッケージをインストールする必要があります.最初のものはyoeman(NPMパッケージ)ですyo ), そして第2のものはgenerator-code パッケージ.Yoemanは、新しいプロジェクトをキックオフするのに役立ちますNPMパッケージです.Yoemanはいわゆる発電機を必要とします.これらのジェネレータは、あなたが次に呼び出すことができますYoemanのための新しいキックオフオプションのようです.

必要なパッケージをインストールする

npm install -g yo generator-code

セットアップによってはこのコマンドを実行する必要があるでしょうsudo または管理権.

いいえ、あなたはKoStartビジュアルStudioのコード拡張子に教えてヨットを呼び出すことができます

yo code

今すぐ選択する必要がありますNew Extension Pack . Yoemanさんは質問をする.下記の例でそれらを見ることができます.

拡張パックの追加

ユニークな拡張名
それを行うには2つの方法があります.つはブラウザにあり、もう一方はVisual Studioのコード拡張タブにあります.一意のパッケージ名は、ドットで区切られた名前とパッケージ名から成ります.<AuthorName>.<PackageName>

Visual Studioコードで拡張子のページを開くと、パッケージ名の右側に一意のパッケージ名が表示されます

あなたが行くときVisual Studio code Marktplace そして、あなたが探している拡張子を検索し、アドレスバーの一意の名前を見ることができる拡張子の詳細ページに移動します.

パッケージへの拡張モジュールの追加.JSONファイル
あなたのエクステンションのユニークな名前を知っていて、コピーするので、あなたはpackage.json Yoemanによる拡張パックの生成フォルダのファイル.にpackage.json ファイルを検索する必要がありますextensionPack キー.このキーは一意の拡張名を持つ文字列の配列でなければなりません.
次のようになります.

{
    ...
    "extensionPack": [
        "robbowen.synthwave-vscode",
        "laurenttreguier.vscode-simple-icons",
        "visualstudioexptteam.vscodeintellicode",
        ...
    ],
    ...
}

拡張パックにあるすべての拡張モジュールを追加します.

拡張パックのテスト
我々の拡張モジュールが本当にインストールされるかどうかチェックする必要があります.このために、我々は満たされて、保存される必要がありますpackage.json ファイル.どちらでもいいF5 またはCTRL+SHIFT+P とタイプDebug: start debugging .
新しいVisual Studioのコードウィンドウが表示され、「拡張」タブに移動すると、拡張パックと拡張モジュールが表示されます.すべてが大丈夫ならチェックしてください.
このステップは私のために働いていたRemote Development WSLまたはSSHのようなセッション.

READMEを編集します.mdとchangelog.MD
ReadMeファイルを書くのは良い習慣です.私がここでするのは、使用した拡張子を持つリストを作成し、それらにリンクを追加することです.
小さなテンプレートを作りました.

# <Name of the Extension>

## Included Extensions

### Theme and Icons

 - [Name of the Extension](LINK)
 - ...

### Generic

 - [Name of the Extension](LINK)
 - ...

### Framework Specific

 - [Name of the Extension](LINK)
 - ...

changelogだけでなく、変更されている他の人が更新されたものを維持するために便利ではなく、あなたが変更したものを覚えています.
以下はテンプレートです.

# Change Log

All notable changes to the "<PACKAGE NAME>" extension pack will be documented in this file.

## [X.Y.Z]

- Changed something

## [0.0.1]

- Initial release

両方のファイルを保存することを忘れないでください.

拡張モジュールの発行
今、私たちは、あなたのエクステンションが働いていることを知っています.

必要な口座
あなたが必要になりますMicrosoft account for this . あなたは1つを作成することができますhere .
その後、発行管理ページに移動するマイクロソフトアカウントを作成する必要があります.そこへ行くhere . それがあなたのためにつくられないならば、あなたは新しい出版者をつくる必要があります.あなたは再び2つの場所であなたの出版社名を見つけることができます.

開けるpackage.json 拡張パックのフォルダにあるファイルをキーの下に追加しますpublisher . 私にとってはこんな感じです

    "publisher": "lampewebdev",

きちんとしなさいpackage.json ファイル
バージョンを変更する1.0.0 あなたが望むならば.
アイコンはすべてを丸めるし、デザイナーを作成する必要はありません.多くのロゴジェネレータがオンラインです.私の好きなのはHatchful . あなたのロゴをつくって、PNGまたはJPEGファイルをあなたの拡張パック・フォルダに入れてください.これを追加する必要がありますpackage.json ファイルも.

    "icon": "icon.png",

あなたのパッケージをリポジトリにオンラインで公開するのは良い習慣です.GitのURLを通してアクセスできる限り、GitTub、GitLab、BitbucketやプライベートGit Repoで行うことができます.
Git URLをコピーしてpackage.json . 次のエントリを追加する必要があります.

  ...
  "repository": {
        "type": "git",
        "url": "<GIT_URL>"
    },
  ...

あなたの作成vsix ファイル
vsixはこのファイルがVisual Studioコードの拡張子であることを指定するファイル拡張子であり、現在の拡張モジュールを作成する必要があります.
もう一つのNPMパッケージをインストールする必要があります.呼称vsce

npm install -g vsce

あなたは多分必要sudo またはインストールする管理権vsce 世界的に.
次に、拡張パックのフォルダに端末で移動し、次のコマンドを実行します.

vsce package

コマンドは新しいファイルを作成します.

市場への拡張モジュールのアップロード
今、私たちはファイルを市場にアップロードする必要があります.クリックhere . クリック+ New Extension , ドロップダウンが表示されます.Visual Studioのコードをクリックしてモーダルウィンドウを開き、そのモードにVsixファイルをドラッグアンドドロップする必要があります.
現在、市場は残りを行います!数分後、あなたは、バージョンの近くに緑のチェックマークが表示されます.これは、あなたの拡張パックが正常に世界に公開されていることを意味します!
エクステンション名をクリックすると、拡張モジュールのパブリックパッケージに表示されます.
それだ!これで、拡張パックを公開しました!

結論
あなたのチームのために拡張パックを持つことは有益なことでありえます、そして、あなたはあなたとあなたのチームのために1つをつくることについて考えなければなりません.
また、しばしばあなたのワークステーションを変更したり、リモート環境で動作する場合、これはあなたを得ることができると時間がない実行します.
拡張機能をチェックアウトできます.LampeWebDev's extension pack
ここでコードをチェックアウトできます.lampewebdevs-extension-pack

あなたが私のために以下をすることができるならば、それは私を助けます!
行って、私のためにフォローを残してください!ほんの数人がそうするならば、これは私に世界を意味するでしょう!❤❤❤😊
👋うーんMedium | |