曾經辛苦造的輪子，現在能否用 ChatGPT 替代呢？

上一篇文章 我在 vscode 插件里接入了 ChatGPT，解決了代碼變數命名的難題 中，展示瞭如何在 vscode 插件中使用 ChatGPT 解決代碼變數命名的問題。vscode 插件市場中有很多的翻譯插件，但是在一些使用場景里是遠遠比不上 ChatGPT 的，比如只翻譯一段 json 數據里的指定欄位。那麼 ChatGPT 還能做什麼呢？能否取代已經存在的輪子？

以 lowcode 插件中的功能為例，看看能不能用 ChatGPT 替代。

根據 JSON 生成 API 請求方法

首先複製一段 json，比如：

{
    "code": 200,
    "msg": "",
    "result": {
        "records": [
            {
                "id": "1a2b3c4d5",
                "costCenterCode": "ccx002",
                "costCenterName": "財務部",
                "accountingCode": "ac0887",
                "bankAccountingCode": "bk1290",
                "orderNumber": "od1089",
                "orderAmount": "6158.36",
                "confirmedTime": "2023-02-07T13:47:34.552Z",
                "laborCostExcludingTax": "4629.05"
            }
        ],
        "total": 200
    }
}

不使用 ChatGPT

使用 ChatGPT

可以發現，幾乎達到了一樣的效果，只是 ChatGPT 會慢一點。不使用 ChatGPT 時，插件內部是直接調用庫將 json 轉成 ts 類型，還做了一些邊界處理，比如如果複製的是 json 變數而不是標準的 json 數據，需要將 json 變數變成 json 數據。使用 ChatGPT 對數據就沒有很嚴格的要求，可以是 json 變數，也可以是 json 數據。

非 ChatGPT 的模板

<%- type %>

export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params {
  id: number;
}
  
export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data {
	xx: string;
}
  
export function <%= rawSelectedText %>(
  params: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params,
  data: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data,
) {
  return request<I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result>({
    url: `xxxx`,
    method: 'GET',
    params,
    data,
  });
}

ChatGPT 的模板

<%- rawClipboardText %> 
根據這段 json 生成 ts 類型，名字為 I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result
和下麵的代碼一起返回
export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params {
	id: number;
}
export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data {
	xx: string;
}
export function <%= rawSelectedText %>(
	params: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params,
	data: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data,
) {
    return request<I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result>({
        url: `xxxx`,
        method: 'GET',
        params,
        data,
    });
}
返回 markdown 代碼塊

模板會使用 ejs 進行編譯。

根據 JSON 生成 MOCK 方法

也是先複製一段 json 數據。

不使用 ChatGPT

插件內部是直接遍歷 json，把這一段代碼通過字元串拼出來。

使用 ChatGPT

這裡使用 ChatGPT 的時候，很難讓它輸出不需要修改就能直接使用的代碼，如上的代碼里輸出了一段無關的內容。

// 調用方法 
getMockData().then(data => { console.log(data); });

ChatGPT 使用的模板：

<%- rawClipboardText %> 
生成一個 js 方法，方法名為 <%= rawSelectedText || 'getRandomData' %>，
方法內部使用 mock.js 生成跟上面的 json 一樣欄位的數據，如果有數組則生成10個元素，
最終的數據使用 Promise.resolve 返回
返回 markdown 代碼塊

根據 JSON 生成 TS 類型

先複製一段 json 數據

不使用 ChatGPT

使用 ChatGPT

根據 JSON 生成 TS 類型-去除介面名稱

這個用處是：後端介面可以連調的時候替換原有自己預先寫的介面類型。

不使用 ChatGPT

使用 ChatGPT

根據 TS 類型生成 API 請求方法

使用場景：後端沒有給介面文檔，前端根據原型和設計稿抽象出數據模型，根據數據模型生成 mock 的 API 請求方法（mock數據通過真實後端服務提供）。

只複製類型體，不要類型名稱，比如：

{
    records: {
      id: string;
      costCenterCode: string;
      costCenterName: string;
      accountingCode: string;
      bankAccountingCode: string;
      orderNumber: string;
      orderAmount: string;
      confirmedTime: string;
      laborCostExcludingTax: string;
    }[];
    total: number;
  }

不使用 ChatGPT

使用 ChatGPT

因為只是將剪貼板里的內容在模板里做了一下拼裝，完全用不到 ChatGPT。

模板如下：

export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result {
	code: number;
	msg: string;
	result: <%- rawClipboardText %>
}

export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params {
	id: number;
}
  
export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data {
	xx: string;
}
  
export function <%= rawSelectedText %>(
	params: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params,
	data: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data,
) {
    return request<I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result>({
        url: `xxxx`,
        method: 'GET',
        params,
        data,
    });
}

根據 TS 類型生成 MOCK 方法

使用場景：後端沒有給介面文檔，前端根據原型和設計稿抽象出數據模型，根據數據模型生成 mock 方法（mock 數據沒有通過後端服務提供）。

只複製類型體，不要類型名稱，比如：

{
    records: {
      id: string;
      costCenterCode: string;
      costCenterName: string;
      accountingCode: string;
      bankAccountingCode: string;
      orderNumber: string;
      orderAmount: string;
      confirmedTime: string;
      laborCostExcludingTax: string;
    }[];
    total: number;
  }

不使用 ChatGPT

使用 ChatGPT

根據 JSON 生成 KOA MOCK

使用場景：mock 數據由 koa 服務提供，根據 json 生成 koa 路由。

不使用 ChatGPT

使用 ChatGPT

根據 TS 類型生成 MOCK

使用場景：後端沒有給介面文檔，前端根據原型和設計稿抽象出數據模型，根據數據模型生成 koa mock 服務。

只複製類型體，不要類型名稱，比如：

{
    records: {
      id: string;
      costCenterCode: string;
      costCenterName: string;
      accountingCode: string;
      bankAccountingCode: string;
      orderNumber: string;
      orderAmount: string;
      confirmedTime: string;
      laborCostExcludingTax: string;
    }[];
    total: number;
  }

不使用 ChatGPT

使用 ChatGPT

根據 TS 類型生成組件文檔

這也是曾經造的輪子 typescript-to-markdown，一個 utools 插件。

效果如圖：

使用 ChatGPT

可以看出來，並不是很完美。

總結

ChatGPT 很難輸出不需要修改直接粘貼到編輯器中就能用的代碼，相比於我們硬編碼寫的插件，在效率上還是有所欠缺。但是藉助插件來管理 ChatGPT Prompt 模板，複製粘貼還是比上官網或者其它客戶端快很多的。

文章沒有提到拉取 YAPI 介面文檔生成代碼的功能，因為 ChatGPT 並不能去拉取介面獲取數據，最近在研究 LangChain，藉助這玩意兒或許可以實現。

Prompt 模板

上面所有的模板已經共用，通過如下方式可以下載到你的項目中：