5.5. CodeReady Workspaces での Visual Studio Code 拡張機能のテスト

手順

1. gist の Web ページに移動し、Red Hat CodeReady Workspaces の Try Bracket Pair Colorizer 拡張と 、Example VS Code 拡張機能で README.md ファイルを作成します。（ブラケット Pair Colorizer は一般的な VS Code 拡張機能です。）
2. Create secret gist ボタンをクリックします。

3. ブラウザーのナビゲーションバーの URL を使用して、gist リポジトリーのクローンを作成します。

   $ git clone https://gist.github.com/<your-github-username>/<gist-id>

   Copy to Clipboard Toggle word wrap

   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.

   Copy to Clipboard Toggle word wrap

   1

   各 gist には固有の ID があります。

4. ディレクトリーを変更します。

   $ cd <gist-directory-name> 

   1

   Copy to Clipboard Toggle word wrap

   1

   gist ID に一致するディレクトリー名。

5. VS Code marketplace または GitHub ページからプラグインをダウンロードし、プラグインファイルをクローン作成されたディレクトリーに保存します。

6. クローン作成されたディレクトリーに plugin.yaml ファイルを作成して、このプラグインの定義を追加します。

   バイナリーファイルの拡張を参照する 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/master/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"

   Copy to Clipboard Toggle word wrap

   1

   この拡張には基本的な Node.js ランタイムが必要であるため、plugin.yaml でカスタムランタイムイメージを追加する必要はありません。

   2

   {{REPOSITORY}} は pre-commit フックのマクロです。

7. メモリー制限およびボリュームを定義します。

   spec:
     containers:
       - image: "quay.io/eclipse/che-sidecar-java:8-0cfbacb"
         name: vscode-java
         memoryLimit: "1500Mi"
         volumes:
         - mountPath: "/home/theia/.m2"
           name: m2

   Copy to Clipboard Toggle word wrap

8. 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

   Copy to Clipboard Toggle word wrap

   1

   その他の devfile 定義も使用できます。この devfile の重要な情報は、この外部コンポーネントを定義する行になります。これは、外部参照がデフォルトのプラグインレジストリーの定義を参照する ID ではなく、プラグインを定義することを意味します。

9. 現在の Git ディレクトリーに 4 つのファイルがあることを確認します。

   $ ls -la
   .git
   CoenraadS.bracket-pair-colorizer-1.0.61.vsix
   README.md
   devfile.yaml
   plugin.yaml

   Copy to Clipboard Toggle word wrap

10. ファイルをコミットする前に、事前コミットフックを追加して {{REPOSITORY}} 変数を公開されている外部 raw gist リンクに更新します。

    1. 以下の内容で.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

       Copy to Clipboard Toggle word wrap

       フックは {{REPOSITORY}} マクロを置き換え、外部の未加工リンクを gist に追加します。

    2. スクリプトを実行可能にします。

       $ chmod u+x .git/hooks/pre-commit

       Copy to Clipboard Toggle word wrap

11. ファイルをコミットし、プッシュします。

    # Add files
    $ git add *
    
    # Commit
    $ git commit -m "Initial Commit for the test of our extension"
    [master 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

    Copy to Clipboard Toggle word wrap

12. gist の Web サイトにアクセスし、すべてのリンクに正しい公開 URL があり、{{REPOSITORY}} 変数が含まれていないことを確認します。devfile に到達するには、以下を実行します。

    $ echo "$(git config --get remote.origin.url)/raw/devfile.yaml"

    Copy to Clipboard Toggle word wrap

    または

    $ echo "https://<che-server>/#$(git config --get remote.origin.url)/raw/devfile.yaml"

    Copy to Clipboard Toggle word wrap