ビルドvscodeテーマ

目次

Creating a VSCode Theme Extension

Create Files

Package.json

Edit Colors

Images

Readme

Becoming a Publisher

Publish Theme

Updating

やあ、私はブリトニーです、そして、私はちょうど私の最初のテーマを公表しましたDeep Water vscode市場に.私もインストラクターですZTM Academy そして所有者、デザイナー、開発者bDesigned . 私によってより多くのdevのメモを見つけることができますConsole Logs .
TLDR:作成し、独自のVSCodeのテーマを公開するだけで下にチェックアウト.

Deep Water Theme
Deep Water Repo

VSCodeテーマ拡張の作成
テーマと拡張は何を作るかの大きな部分ですVisual Studio Code (VSCode) 使用するように素晴らしい.私は私のコードを変更するのが大好きです.あなた自身のVSCodeテーマを作成することは、時々経験に挑戦することができます.市場での出版にテーマを編集するから、私はプロセスを介して一歩一歩してください.始めましょう!

ファイルの作成
まず、テーマファイルを保持するディレクトリを作成する必要があります.

mkdir theme-name
cd theme-name

ある色のテーマの2つだけ必要なコンポーネントvscodepackage.json ファイルとテーマファイルjson 形式.エーreadme ファイルとロゴは常に良い追加ですので、我々は同様にそれらを作成されます.必要なファイルを作りましょう.ランnpm init -y を作成するディレクトリpackage.json . テーマと呼ばれるフォルダを作成するmkdir themes 端末で.次のステップは、最初に私のテーマを出版するとき、私に多くのトラブルを引き起こしました.これは文書化されていないがjson テーマのためのファイルは、それがVSCODE設定の範囲内で現れるために特定の方法と命名される必要があります.あなたのテーマフォルダの中に、あなたのテーマのDisplayNameという名前のファイルを-color-theme.json . あなたの名前がテストテーマであるならば、それはこのように見えなければなりませんTest Theme-color-theme.json . 順番にコマンドを示します.

npm init -y
mkdir themes
touch themes/Test Theme-color.theme.json

パッケージ.JSON
我々のためにpackage.json ファイルには、vscode拡張用のいくつかの必須フィールドがあります.アフターランニングnpm init -y , 以下のファイルに似たファイルが必要です.

我々は、スクリプトのセクションをリッピングすることができます他のフィールドは、あなたのテーマに合わせて変更することができます.内部にvscode拡張子に必要な追加のフィールドがありますpackage.json ファイル名publisher , engines , categories , and contributes , エーdisplayName フィールドもいいです.編集後package.json , 必要なフィールドを追加しましょう.

{
  "publisher": "bDesigned",
  "engines": {
    "vscode": "^1.0.0"
  },
  "categories": [
    "Themes"
  ],
  "contributes": {
    "themes": [
      {
        "label": "test-theme",
        "uiTheme": "vs-dark",
        "path": "./themes/theme-name.json"
      }
    ]
  },
  "displayName": "Theme Name"

エディットカラーズ
今、我々は我々のテーマに取り組むことができます.vscodeはsettings.json ワークスペースを編集するファイル.あなたがそれらを加えるように色を見るためにsettings.json それから私のtheme/theme-name.json 彼らが正しい色であることを確実とするために.で開くsettings.json クリックしてCTRL+SHIFT+P の場合はCMD+SHIFT+P Macでタイプsettings.json ポップアップボックスに.これでファイルが開きます.
あなたは既にあなたの中のものを持っているかもしれませんsettings.json , しかし、我々が編集する必要がある地域は以下です"workbench.colorCustomizations" and "editor.tokenColorCustomizations": {"textMateRules":[]} . これらのスコープを追加する混乱を緩和するために使用されるルールのvscodes項、私はカラーパレットを作成し、私のすべてに“名前”フィールドを追加"textMateRules" それは色やルールが設定されていると言う.下記は私のサンプルですsettings.json .

"workbench.colorCustomizations": {
    "activityBar.background": "#08131a",
    "activityBar.border": "#008c9644",
    "activityBar.foreground": "#008c96",
    "activityBarBadge.background": "#08131a",
    "activityBarBadge.foreground": "#008c96"
},
"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "Italic",
        "scope": [
          "comment",
        ],
        "settings": {
          "fontStyle": "italic"
        }
      },
      {
        "name": "Gray",
        "scope": ["comment"],
        "settings": {
          "foreground": "#4b6869"
        }
      },
    ]
}

私はイタリック体と色を個々のスコープに分けて、私は何かを変えたり削除したりしたい場合には別々にしておきます.後に、カラーパレットを考え出すには、"name" 各色のフィールド.これらのスコープのそれぞれに規則を追加するには、vscodeがどのような色にしたいのかを判断する必要があります.私は開発者に組み込まれて:エディターエディタートークンとスコープは、個々の項目が呼び出されたかを把握するために使用します.開発者の検査用エディタを検索することによって、再びコマンドパレットでそれを見つけることができます、そして、それは以下のものに類似している箱を思いつきます.


下の画像の左側には、TextMateスコープが表示され、右側に現在選択されている項目に合うスコープがあります.JavaScriptの機能を選択します.あなたの内側の色に追加するこれらのスコープを使用しますsettings.json . 通常、これらは言語に非常に特有です、しかし、ベースを使用することはほとんどの場合働くべきです.以下に例を示します.

"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "Dark Teal",
        "scope": [
          "storage.type"
        ],
        "settings": {
          "foreground": "#01779b"
        }
      }
    ]
}

今、あなたは色付けし、正しい色にその項目のスコープを追加する各事項を通過することができます.一旦それが好きであるならば、我々は規則を我々のtheme.json ファイル.あらゆる内部"workbench.colorCustomizations": { ...copyEverythingHere } 内部"textMateRules": [ ...copyEverythingHere ] にコピーする必要がありますtheme.json ファイル:

{
  "name": "Deep Water",
  "type": "dark",
  "colors": {
    ...pasteAll workbench.colorCustomizations here
  },
  "tokenColors": [
      ... pasteAll textMateRules here
  ]
}

イメージ
この後、テーマは技術的に公開する準備が整いました.しかし、あなたがそれが良いようにしたい場合は、アイコンとREADMEファイルを追加することができます.クリエイトアimages ルートディレクトリまたはmkdir images 端末で.のアイコンを作成し、任意のスクリーンショットpng フォーマット(SVGSはサポートされません)とイメージフォルダーに配置します.我々は、更新する必要がありますpackage.json アイコンを受け入れる.追加する"icon" キーの後にイメージパス"icon": "images/logo.png" .

リードミー
今すぐ追加することができますreadme.md ファイルをルートディレクトリにします.あなたのテーマについての情報を書き込み、それが目立つようにあなたのテーマの任意のスクリーンショットを追加します.また、いくつかのバッジをいくつかの才能のためにBadgen.net . テーマのサポートとスクリーンショットのテーマを示す言語を指定することを確認することは常に有用です.

出版社になる
VSCode Docs
市場でファイルを公開するには、Azureからのアクセストークンが必要です.あなたが行くことによって、このアカウントを作成することができますdev.azure.com/vscode . それが作成されると、我々は個人的なアクセストークンを取得する必要があります.これは、以下の画像のすべての方向に従うことを確認する権利を取得する詳細なプロセスです.物事は、組織では、すべてのアクセス可能な組織を選択してください.次に、市場オプションを開くには、カスタム定義をクリックし、すべてのスコープを示します.次に、市場を見つけることができるすべてのチェックボックス(読み取り、取得、発行、および管理)をクリックします.これのすべてが完了したら、Allureが彼らの終わりにそれを保存しないので、Createをクリックして、あなたのアクセストークンをどこかに保存するようにしてください.また、次の手順でアクセストークンをクリップボードにコピーします.


紺碧



発表テーマ
私たちは市場で公開するために設定されたazureアカウントを持っているので、私たちはvsce パッケージと出版社を作成します.あなたが既にアカウントセクションの下で出版者名を持つならばVSCode Marketplace , 作成部を省略し、既に作成した名前を使用できます.

npm i -g vsce
vsce create-publisher your-name 

ここでは、アカウントを作成するときにコピーしたアクセストークンを要求します.使えますCTRL+V WindowsまたはCMD+V Macでトークンを貼り付ける.発行者が設定された後、ログインすることができます.

vsce login your-publisher-name

にpackage.json ファイルpublisher フィールドはVSCEログインで使用されるユーザ名です.ダブルチェックのすべてをコピーしているsettings.json ルールのあなたのテーマの正しいセクションにjson ファイルとパッケージを拡張して公開することができます.

vsce package
vsce publish

エラーがない限り、あなたは現在、市場で発表されたパッケージを持っているべきです.それはあなたの仕事に約5分かかるテーマページへのリンクが表示されます.しかし、我々は更新しようとすると、何を待つか?vscodeは自動的に変更のためにrepoを追跡しません.

更新
あなたのテーマに変更を行う場合は、最初に私たちのバージョン番号をアップグレードする必要がありますpackage.json から1.0.0 to 1.0.1 . バージョンを更新した後、Githubに変更を押します.

git add .
git commit -m 'commit message'
git push

変更が押されると、gitでバージョンをタグ付けする必要があります.

git tag v1.0.1

一旦バージョンがタグ付けされるならば、我々はそれから更新された拡張を評判良くすることができます.

vsce publish

今、あなたは市場で完全に機能的なテーマを持っている必要があります!うまくいけば、あなたは読書を楽しんで、方法に沿ってものまたは2を学びました!