VSコードテーマをつくって、発表してください.一歩一歩.

皆さんこんにちは
……ヘイマイケル!私たちは、テーマを構築する方法については、チュートリアルが必要はありません、100!
…….
私、私が私自身のテーマを構築していて、あなたが考えるかもしれないより簡単であるので、単に私のバージョンをしたかったです.

My theme, Serendipity

しかし、なぜそこに何千もの自分のテーマを構築する悩み?
例えば、私のケースでは、私の側のプロジェクトの2つに取り組んでいる間、私はインターネットのまわりでVSコードに取り組んでより多くの時間を費やします.Wicked Templates and Wickedblocks . しばらくしたら、あなたの目は傷つくつもりだので、あなたは不十分に細工されたテーマがある場合.
アカウントには、多くの時間をVSコードに取り組んで過ごすには、あなたが作成したり、好みや性格に適応することがあります.信じているかどうかは、これはあなたが生産的になり、快適な作業時に感じる.

手を汚しましょう.
まず、あなたが実際に使用するテーマをカスタマイズすることができます
したら、そこを編集することができます.JSONから始まる

{
  "workbench.colorCustomizations": {
    ---- Styles go here ----
  }
}

ここですべてのスコープを見ることができます.

https://code.visualstudio.com/api/references/theme-color

しかし、これは正直である悪夢です、あなたが多くのスコープがあるのを見ることができて、それがあなたにそれをするために年齢がかかるように.

ゼロから自分のテーマを作りましょう
必要となります.

ラップトップ

インストールコード

マイクロソフトアジュールアカウント

マイクロソフト

ギタブ口座

忍耐

次のようになります.

対コード

端末

コードデバッガ

ランダムだが便利なカラーツール

カラーパレットのために、あなたは私のツールを使いますColors & Fonts
または、より進んでいる何かのためにCoolors

第一に
コマンドラインツールをYo Code extension generator , それはあなたのテーマを構築するために必要なすべてのファイルを作成します.
ビルドだけでなく、これ以降では公開されません.

ターミナルウィンドウを開き、メインのGithubフォルダに移動します.

次に端末で実行します.

npm install -g yo generator-code

終了したら実行をインストールします.

yo code

すべてのオプションを取得します.
絹篩で篩うたよう:

新しいカラーテーマ

どのような拡張モジュールを作成しますか?(矢印キーを使用する)
新しい拡張モジュール( types script )
新しい拡張モジュール( JavaScript )
❯ 新しいカラーテーマ
新しい言語サポート
新しいコードスニペット
新しいキーマップ
新しい拡張パック
新しい言語パック(ローカライズ)
新しいWeb拡張モジュール( TypeScript )
新しいノートブックレンダラ
絹篩で篩うたよう:

いいえ、フレッシュスタート

インポートしたり、既存のテキストメイトカラーテーマを変換しますか?(矢印キーを使用する)
いいえ、フレッシュスタート
はい、既存のテーマをインポートするが、TMVistaファイルとして保管してください.
はい、既存のテーマをインポートし、Visual Studioのコードカラーテーマファイルにインラインで表示します.
それから、あなたはこの質問をされます.あなたがこのテーマを作成して、あなたがそれを命名する方法について考えることを望むかもしれません.

重要ステップ

Let's say you name it "A" this name you can change it afterwards, as the rest of answers you give but, if you change the identifier and you publish again, this will create a different theme on VS Code Marketplace

答え
拡張子の名前は?あなたのテーマの名前
?拡張子の識別子は何ですか?あなたのテーマの識別子
?拡張子の説明は?あなたのテーマの説明
?ユーザーに表示されるテーマの名前は何ですか?あなたのテーマの名前
その後、我々は出発点を必要としているヨコードを選択するので、選択したものを選択します.
基本テーマを選択します
❯ ダーク
ライト
ハイコントラスト

アンサー

Gitリポジトリの初期化?( y/n )
いつも働いているわけではないから.それで、私は単にその後押します.

あなたが望むようにそれを開いてください.

Visual Studioのコードを使用して新しいフォルダを開きますか?(矢印キーを使用する)
❯ で開くcode
スキップ

ファイル
これはyoコードで生成されたファイルです

いくつかのファイルを通過しましょう.
1vscode/起動.JSON
あなたはファイルを使用しませんが、それが何であるかについてわかっているためによいです.

The launch.json file is used to configure the debugger in Visual Studio Code.

2 .テーマ/テーマ.JSON
これは、あなたのテーマを作成するために取り組んでいるファイルです.今それはVSのコードのデフォルトのテーマのためのスタイルが含まれています.
3準拠
基本的に同様.ジティノル

A VSCODEIGNORE file is a text file used to exclude unnecessary files when packaging a Microsoft Visual Studio Code extension.

4 . changelog.MD
このchangelogを書くことができます、そして、あなたがそれを出版するならば、市場は直接それにリンクします.
5 .パッケージJSON
このファイルでは、私たちがpackして、市場でそれを出版することができるコードを書き加えて、書くつもりです.
6 . READMEMD
これはよく、私を読む.あなたが公開する前に編集する予定です.さもなければ、検出されるので、あなたはそうすることができません.
VSC拡張クイックスタート.MD
基本的に、すべてのファイルが、短い方法で何であるかをあなたに伝えています.

建物のテーマ
では、テーマフォルダの「JSON」ファイルに行きましょう


色の2セットが表示されます.
設定は主にUI用です

"colors": {
--- scopes go here ---
}

構文を設定します.

"tokenColors": [
--- scopes go here ---

]

それではどのようにスタイルを知っていますか?この場合、我々はF 5を押すことができます、あるいは、単にメニューに対するVSコードをナビゲートして、実行/スタート・デバッギングをクリックしてください.
これを行うと、JSONファイルにテーマ色を示すコードウィンドウが開きます.これで2つのVSコードウィンドウが開きます.
私のケースでは、左は私のVSコードです、そして、右は私がデバッグしているテーマです.

「エディタエディタとスコープの検査」ウィンドウを開いたときに

あなたはそれをアクティブにした後、エディタのスコープをクリックすることができますし、それについてのすべての情報をウィンドウをポップアップします.

ここから取得したい情報は、あなたが16進色が適用され、それを探して、色を変更することがわかりますtextmateスコープです.


あなたのテーマを発表
あなたのテーマを公開するには、いくつかの退屈な仕事をする必要がありますが、あなたのテーマを共有することができるほど面倒です.

サインアップするMicrosoft Azure DEVOPS

組織を作る

出版する

組織にサインアップし、組織する

サインアップ

一度に

Click on the icon next to your avatar and select personal access tokens

新しいトークン

Name it

組織

All accessible organizations

をクリックして“すべてのスコープを表示”、右下で、市場とチェックを探してください:

管理する

クリックしてアクセストークンを生成します

トークンをコピーして保存すると思うどこかに保存します.

市場の中

移動するMicrosoft Marketplace でログインします.

「Create Publisher」ページがあるはずです.

すべてのフィールドを埋めなさい.
その後、このページにリダイレクトされます.後でこのページを保存します.あなたのパスワードを覚えて.



我々のパッケージに戻ってください.JSON
パッケージ.YOOコードがあなたのためにそれを生成するとき、JSONファイルは完成しません、市場は他のスコープを必要とします、アイコン、キーワード、出版IDとそうします.
私が作ったこのテンプレートを使用して自由に感じる、基本的ですが、それはあなたが必要なすべてです.
< div >
<高橋潤子>p >
あなたが見ることができるように、光テーマの違いがあります
<> P >
クラスをハイライト表示する

"uiTheme": "vs-dark",
"uiTheme": "vs",

< div >
このように投稿したテーマをスタックしますbr/>
<> P >
クラスをハイライト表示する

 "contributes": {
    "themes": [
      {
        "label": "Your dark theme name",
        "uiTheme": "vs-dark",
        "path": "./themes/your-dark-theme-name.json"
      },
      {
        "label": "Your light theme name",
        "uiTheme": "vs",
        "path": "./themes/your-light-theme-name.json"
      }
    ]
  }

< div >
最初のテーマはデフォルトとしてデバッグされるものです.もし光をデバッグしたいなら、この場合はトップに置く必要がありますので、デバッガはデバッグするテーマを識別できます.p >
< H >

我々が市場に我々のテーマを押すことができるように、VSCEをインストールしましょう.
<高橋潤子>
<高橋潤子> <高橋潤子>
< P >npm install -g vsce

インストール後にログインする必要があります
< P >vsce login your-publish-id

ログインコードになります.以前に生成したトークンをペーストする必要があるときです.p >
あなたのテーマをパッケージ化するには
< P >vsce package

<高橋潤子>p >

Note: This file you also use to publish on openVSX

< P >実行中のテーマを公開する
< P >vsce publish

すべての場合には、端末MSGおよび/または電子メールを取得します.p >
あなたの出版社ページに行き、あなたのテーマが展開されているのを見るべきです.p >
< tag >メニューをクリックすることであなたのライブの拡張を探します.p >
< P >

<高橋潤子>
< P >vsce publish

< P >実行できます:< p/p >
< P >vsce publish minor

<高橋>p >
< H >

VSコードのテーマをインストールします.
<高橋潤子>
<高橋潤子> VSコードの拡張検索バーに行き、テーマを探してインストールしてロックを準備します.p >
< H >

質問があれば
<高橋潤子>
< url >ここで聞いてください.
<井上>