OpenAPI Explorer：在Visual Studio Code中使用Alibaba Cloud API Toolkit外掛程式

前提條件

安裝VS Code。

方式一：在外掛程式市場下載安裝

1. 在VS Code編輯器左側（Activity Bar）導覽列中，單擊表徵圖。

2. 搜尋Alibaba Cloud API Toolkit ，單擊安裝。

方式二：通過瀏覽器下載安裝包

1. 通過瀏覽器訪問官方Marketplace，單擊Install，此時會自動彈出VS Code並跳轉至擴充頁面。

2. 在VS Code的擴充頁面，單擊安裝。

驗證安裝結果

安裝完成後，會在左側（Activity Bar）導覽列顯示阿里雲的外掛程式表徵圖，即表示安裝成功。

添加或修改身份與憑證配置

1. 安裝Alibaba Cloud CLI Tools外掛程式。

   1. 通過瀏覽器訪問Alibaba Cloud CLI Tools，單擊Install。

   2. 在彈出的對話方塊，單擊開啟。

   3. 在VS Code的擴充頁面，單擊安裝。

   4. 安裝完成後，會在狀態列顯示阿里雲的外掛程式表徵圖。

   說明

   您還可以直接在VS Code中安裝阿里雲CLI。具體操作，請參見使用阿里雲CLI Visual Studio Code外掛程式。

2. 配置身份憑證。

   1. 在VS Code編輯器的頂部功能表列，選擇終端 > 建立終端。

   2. 在終端執行aliyun configure命令，按照提示進行配置。請使用已有AccessKey或者參考建立AccessKey重新建立。請注意：為降低AccessKey泄露的風險，AccessKey Secret只在建立時顯示一次，後續無法查看。請務必妥善保管。

   3. 命令逐行斷行符號，出現 Saving profile[xxx] ...Done. 代表該 Profile 儲存成功。如果出現 !!! Configure Failed please configure again !!! ，是因為參數格式、參數值範圍填寫不正確等因素導致的校正失敗，但不會阻礙本地儲存成功。

      $ aliyun configure
      Configuring profile 'default' ...
      Aliyun Access Key ID [None]: <Your AccessKey ID>
      Aliyun Access Key Secret [None]: <Your AccessKey Secret>
      Default Region Id [None]: cn-hangzhou
      Default output format [json]: json
      Default Language [zh]: zh

      重要

      由於阿里雲帳號（主帳號）擁有資源的所有許可權，其AK一旦泄露風險巨大，強烈建議您使用RAM使用者的AK。

查看與切換使用者身份

1. 在左下角的狀態列中，單擊阿里雲的表徵圖。可在頂部搜尋方塊下查看到已配置成功的使用者。

2. 單擊Profile名稱，即可切換使用者身份。

阿里雲產品訂閱

該外掛程式提供了一鍵訂閱阿里雲產品的功能，支援選擇產品不同版本API，並給予推薦版本提示，無需設定檔，可以通過快速鍵Ctrl+cmd+K（Windows系統中對應的快速鍵是Ctrl+win+K）搜尋和訂閱阿里雲產品。

在 API 產品選擇下拉式清單中，通過搜尋方塊篩選並選擇目標雲產品。例如選擇數位憑證管理服務（產品代號 cas，推薦版本 2020-04-07）。

API 搜尋

該外掛程式支援搜尋已訂閱的API，也可以通過快速鍵Ctrl+cmd+L（Windows系統中對應的快速鍵是Ctrl+win+L）搜尋並查看已訂閱的API文檔或插入程式碼片段。

在搜尋方塊中輸入關鍵詞（如 describe）後，下方自動展示匹配的 API 列表，每個條目包含要求方法、API 名稱、簡要說明和版本路徑。

API文檔預覽

點擊API可以開啟一個新的標籤頁，並顯示對應的API文檔，文檔包括介面說明、請求參數、響應參數和錯誤碼。

在 API Toolkit 中，左側為 API 導航樹，可按雲產品和分類瀏覽 API 列表。選中某個 API（如 RebootInstances — 重啟一台或多台執行個體）後，右側主內容區展示該介面的文檔資訊，包括介面說明和入參列表，並可通過頂部 Tab 切換文檔、調試、程式碼範例頁簽。

API調試

• 通過身份憑證驗證後，該外掛程式可支援API調試。

• 支援參數表單填寫的方式調試阿里雲API，並查看結果。

• 調用返回結果可以直接在編輯器中快速開啟。

例如選擇 DescribeRegions 介面，在參數表單中設定服務地址為華東 1（杭州）、InstanceChargeType 為 PrePaid、ResourceType 為 instance、AcceptLanguage 為 zh-CN，單擊調試按鈕後，右側展示調用成功（狀態代碼 200）的 JSON 響應，包含可用地區列表。

使用外掛程式提供的程式碼範例

補全並運行代碼

• 補全代碼。

  • 修改endpoint。

    登入OpenAPI 門戶，然後選擇雲產品，在雲產品首頁可查看支援的服務存取點。

  • 添加請求參數。請求參數請查看API文檔預覽。

  • （可選）添加日誌。

  • 儲存修改內容。

    import OpenApi, * as $OpenApi from '@alicloud/openapi-client';
    import Ecs20140526, * as $Ecs20140526 from '@alicloud/ecs20140526';
    export default class DescribeRegion {
        static async main(args: string[]): Promise<void> {
            let config = new $OpenApi.Config({
                // 請確保代碼運行環境設定了環境變數 ALIBABA_CLOUD_ACCESS_KEY_ID 和 ALIBABA_CLOUD_ACCESS_KEY_SECRET。
                accessKeyId: process.env['ALIBABA_CLOUD_ACCESS_KEY_ID'],
                accessKeySecret: process.env['ALIBABA_CLOUD_ACCESS_KEY_SECRET'],
                // Endpoint 請參考 https://api.alibabacloud.com/product/Ecs
                endpoint: `ecs.cn-hangzhou.aliyuncs.com`,
            });
            let client = new Ecs20140526(config);
            let describeRegionsRequest = new $Ecs20140526.DescribeRegionsRequest({});
            let response = await client.describeRegions(describeRegionsRequest);
            console.log(response.body?.regions?.region);
        }
    }

• 運行代碼

  1. 在終端執行以下命令，將TypeScript編譯成JavaScript檔案。

     tsc client.ts # client.ts為檔案名稱

  2. 建立一個main.js檔案，在編輯地區複製以下代碼。

     const { default: Describeregion } = require("./describeregion");
     
     Describeregion.main();
     

  3. 在終端（TERMINAL）執行以下命令，運行範例程式碼。

     node .\main.js

  4. 運行結果，如果返回結果如下所示，則表示調用成功。

     PS D:\ide\tooldemo> tsc describeregion.ts
     PS D:\ide\tooldemo> node .\main.js
     [
       DescribeRegionsResponseBodyRegionsRegion {
         localName: '華北1 (青島) ',
         regionEndpoint: 'ecs.cn-qingdao.aliyuncs.com',
         regionId: 'cn-qingdao'
       },
       DescribeRegionsResponseBodyRegionsRegion {
         localName: '華北2 (北京) ',
         regionEndpoint: 'ecs.cn-beijing.aliyuncs.com',
         regionId: 'cn-beijing'
       },
       DescribeRegionsResponseBodyRegionsRegion {
         localName: '華北3 (張家口) ',
         regionEndpoint: 'ecs.cn-zhangjiakou.aliyuncs.com',
         regionId: 'cn-zhangjiakou'
       },
       DescribeRegionsResponseBodyRegionsRegion {
         localName: '華北5 (呼和浩特) ',
         regionEndpoint: 'ecs.cn-huhehaote.aliyuncs.com',
         regionId: 'cn-huhehaote'
       },
       DescribeRegionsResponseBodyRegionsRegion {
         localName: '華北6 (烏蘭察布) ',
         regionEndpoint: 'ecs.cn-wulanchabu.aliyuncs.com',
         regionId: 'cn-wulanchabu'
       },
       DescribeRegionsResponseBodyRegionsRegion {
         localName: '華東1 (杭州) ',
         ...
       }
     ]