5.5. CodeReady Workspaces での Visual Studio Code 拡張機能のテスト
Visual Studio Code (VS Code) 拡張機能はワークスペースで機能します。VS Code 拡張機能は、Che-Theia エディターコンテナー、またはその前提条件を満たした独自の分離され、事前に設定されたコンテナーで実行されます。
本セクションでは、ワークスペースを使用して CodeReady Workspaces で VS Code 拡張をテストする方法と、VS Code 拡張の互換性を確認し、特定の API が利用可能かどうかを確認する方法を説明します。
extension-hosting サイドカーコンテナーおよび devfile での拡張機能の使用は任意です。
5.5.1. GitHub gist を使用した VS Code 拡張機能のテスト
各ワークスペースには独自のプラグインセットを使用できます。プラグインの一覧、およびクローンを作成するプロジェクトの一覧は、devfile.yaml
ファイルで定義されます。
たとえば、Red Hat CodeReady Workspaces ダッシュボードから AsciiDoc プラグインを有効にするには、以下のスニペットを devfile に追加します。
components: - id: joaopinto/vscode-asciidoctor/latest type: chePlugin
デフォルトのプラグインレジストリーにないプラグインを追加するには、カスタムプラグインレジストリーをビルドします。https://access.redhat.com/documentation/ja-jp/red_hat_codeready_workspaces/2.13/html-single/administration_guide/index#customizing-the-registries.adoc、または GitHub および gist サービスを使用してください。
前提条件
- CodeReady Workspaces の実行中のインスタンスがある。CodeReady Workspaces のインスタンスをインストールするには、「CodeReady Workspaces のインストール」を参照してください。
- GitHub アカウント。
手順
-
gist Webページに移動し、
README.md
ファイルを作成します。これには、説明Try Bracket Pair Colorizer extension in Red Hat CodeReady Workspaces
およびコンテンツExample VS Code extension
を含みます。(Bracket Pair Colorizer はよく使用される VS Code 拡張機能です。) - Create secret gist ボタンをクリックします。
ブラウザーのナビゲーションバーの URL を使用して、gist リポジトリーのクローンを作成します。
$ git clone https://gist.github.com/<your-github-username>/<gist-id>
git clone
コマンドの出力例git clone https://gist.github.com/benoitf/85c60c8c439177ac50141d527729b9d9 1 Cloning into '85c60c8c439177ac50141d527729b9d9'... remote: Enumerating objects: 3, done. remote: Counting objects: 100% (3/3), done. remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 Unpacking objects: 100% (3/3), done.
- 1
- 各 gist には固有の ID があります。
ディレクトリーを変更します。
$ cd <gist-directory-name> 1
- 1
- gist ID に一致するディレクトリー名。
- VS Code marketplace または GitHub ページ からプラグインをダウンロードし、プラグインファイルをクローン作成されたディレクトリーに保存します。
クローン作成されたディレクトリーに
plugin.yaml
ファイルを作成し、このプラグインの定義を追加します。.vsix
バイナリーファイルの拡張を参照するplugin.yaml
ファイルの例apiVersion: v2 publisher: CoenraadS name: bracket-pair-colorizer version: 1.0.61 type: VS Code extension displayName: Bracket Pair Colorizer title: Bracket Pair Colorizer description: Bracket Pair Colorizer icon: https://raw.githubusercontent.com/redhat-developer/codeready-workspaces/crw-2-rhel-8/dependencies/che-plugin-registry/resources/images/default.svg?sanitize=true repository: https://github.com/CoenraadS/BracketPair category: Language firstPublicationDate: '2020-07-30' spec: 1 extensions: - "{{REPOSITORY}}/CoenraadS.bracket-pair-colorizer-1.0.61.vsix" 2 latestUpdateDate: "2020-07-30"
メモリー制限およびボリュームを定義します。
spec: containers: - image: "quay.io/eclipse/che-sidecar-java:8-0cfbacb" name: vscode-java memoryLimit: "1500Mi" volumes: - mountPath: "/home/theia/.m2" name: m2
plugin.yaml
ファイルを参照するdevfile.yaml
を作成します。apiVersion: 1.0.0 metadata: generateName: java-maven- projects: - name: console-java-simple source: type: git location: "https://github.com/che-samples/console-java-simple.git" branch: java1.11 components: - type: chePlugin id: redhat/java11/latest - type: chePlugin 1 reference: "{{REPOSITORY}}/plugin.yaml" - type: dockerimage alias: maven image: quay.io/eclipse/che-java11-maven:nightly memoryLimit: 512Mi mountSources: true volumes: - name: m2 containerPath: /home/user/.m2 commands: - name: maven build actions: - type: exec component: maven command: "mvn clean install" workdir: ${CHE_PROJECTS_ROOT}/console-java-simple - name: maven build and run actions: - type: exec component: maven command: "mvn clean install && java -jar ./target/*.jar" workdir: ${CHE_PROJECTS_ROOT}/console-java-simple
- 1
- その他の devfile 定義も使用できます。この devfile の重要な情報は、この外部コンポーネントを定義する行になります。これは、外部参照が (デフォルトプラグインレジストリーの定義を参照する ID ではなく) プラグインを定義することを意味します。
現在の Git ディレクトリーに 4 つのファイルがあることを確認します。
$ ls -la .git CoenraadS.bracket-pair-colorizer-1.0.61.vsix README.md devfile.yaml plugin.yaml
ファイルをコミットする前に、pre-commit フックを追加して、
{{REPOSITORY}}
変数を公開されている外部の未加工 gist リンクに対して更新します。以下の内容で
.git/hooks/pre-commit
ファイルを作成します。#!/bin/sh # get modified files FILES=$(git diff --cached --name-only --diff-filter=ACMR "*.yaml" | sed 's| |\\ |g') # exit fast if no files found [ -z "$FILES" ] && exit 0 # grab remote origin origin=$(git config --get remote.origin.url) url="${origin}/raw" # iterate on files and add the good prefix pattern for FILE in ${FILES}; do sed -e "s#{{REPOSITORY}}#${url}#g" "${FILE}" > "${FILE}.back" mv "${FILE}.back" "${FILE}" done # Add back to staging echo "$FILES" | xargs git add exit 0
フックは
{{REPOSITORY}}
マクロを置き換え、外部の未加工リンクを gist に追加します。スクリプトを実行可能にします。
$ chmod u+x .git/hooks/pre-commit
ファイルをコミットし、プッシュします。
# Add files $ git add * # Commit $ git commit -m "Initial Commit for the test of our extension" [main 98dd370] Initial Commit for the test of our extension 3 files changed, 61 insertions(+) create mode 100644 CoenraadS.bracket-pair-colorizer-1.0.61.vsix create mode 100644 devfile.yaml create mode 100644 plugin.yaml # and push the files to the main branch $ git push origin
gist の Web サイトにアクセスし、すべてのリンクに正しい公開 URL があり、
{{REPOSITORY}}
変数が含まれていないことを確認します。devfile に到達するには、以下を実行します。$ echo "$(git config --get remote.origin.url)/raw/devfile.yaml"
または
$ echo "https://<che-server>/#$(git config --get remote.origin.url)/raw/devfile.yaml"