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

手順

1. gist Webページに移動し、README.md ファイルを作成します。これには、説明 Try Bracket Pair Colorizer extension in Red Hat CodeReady Workspaces およびコンテンツ Example VS Code extension を含みます。(Bracket 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 ファイルを作成し、このプラグインの定義を追加します。

   .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/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. ファイルをコミットする前に、pre-commit フックを追加して、{{REPOSITORY}} 変数を公開されている外部の未加工 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>/f?url=$(git config --get remote.origin.url)/raw/devfile.yaml"

    Copy to Clipboard Toggle word wrap