I connected ChatGPT in the vscode plugin, which solved the problem of naming code variables

The lowcode plugin has been iterated for almost 3 years. As my productivity tool, I usually use lowcode for some brain-less brick-and-mortar work, such as managing scaffolding, generating CURD pages, generating TS types according to interface documents, generating mocks, and so on.

With the help of lowcode's block material function, CURD pages can be quickly generated, but when doing some financial-related needs a while ago, variable naming became a problem. A list has more than ten or twenty fields, and most of them are those It's an abstract noun that you don't even know what it means when you look at Chinese. As I was doing it, I simply and crudely used column1 ~ column20 to name (I don't know how to translate them one by one anyway).

A colleague mentioned "let ChatGPT do the naming of variables", and then I started to study the naming of ChatGPT:

It seems that the problem is not big, and then the ChatGPT API is connected to the lowcode plug-in.

During the development process, I researched several ChatGPT plug-ins with a relatively large number of vscode uploads and downloads. They are basically the same. They all add fixed options for analyzing codes, refactoring codes, writing unit tests for codes, and finding defects for codes in the right-click menu. If I want ChatGPT to translate the Chinese variables in the code I selected into English, I need to copy and paste the code and write Prompt every time.

With the help of lowcode's original code snippet function, the preset Prompt function is realized almost effortlessly, as follows:

At present, lowcode already supports access to the official API of openai, and can also use some paid transfer services in China. The following describes how to use it.

Configure ChatGPT

Preset Prompt template

Using lowcode's original code snippet function, you can preset prompts at will, support EJS template syntax, and quickly create prompts such as analyzing code, refactoring code, and adding comments to code.

Pull to the bottom and configure the chatGPT field:

commandPrompt is the content sent after selecting a template from the right-click menu, and supports EJS template syntax.

viewPrompt is the content sent after clicking the Ask ChatGPT button on the code snippet or block material visualization details page.

Lowcode code generation function combined with ChatGPT

When configuring and generating the CURD interface, if all Chinese names are used, the following code will be generated according to the template:

import { reactive, ref } from "vue";

interface ITableListItem {
  id: string;
  成本中心编码: string;
  成本中心名称: string;
  账套编码: string;
  银行核算编码: string;
  订单号: string;
  订单金额: string;
  确收时间: string;
  "劳务成本-不含税": string;
}

interface IFormData {
  成本中心编码?: string;
  成本中心名称?: string;
  账套编码?: string;
  银行核算编码?: string;
  订单号?: string;
  订单金额?: string;
  确收时间?: string;
  "劳务成本-不含税"?: string;
}

const defaultFormData: IFormData = {
  成本中心编码: undefined,
  成本中心名称: undefined,
  账套编码: undefined,
  银行核算编码: undefined,
  订单号: undefined,
  订单金额: undefined,
  确收时间: undefined,
  "劳务成本-不含税": undefined,
};

export const useModel = () => {
  const filterForm = reactive<IFormData>({ ...defaultFormData });

  const tableList = ref<(ITableListItem & { [propName: string]: unknown })[]>(
    [],
  );

  const pagination = reactive<{
    page: number;
    pageSize: number;
    total: number;
  }>({
    page: 1,
    pageSize: 10,
    total: 0,
  });

  const loading = reactive<{ list: boolean }>({
    list: false,
  });

  return {
    filterForm,
    tableList,
    pagination,
    loading,
  };
};

export type Model = ReturnType<typeof useModel>;

After ChatGPT processing:

import { reactive, ref } from "vue";

interface ITableListItem {
  id: string;
  costCenterCode: string;
  costCenterName: string;
  accountingCode: string;
  bankAccountingCode: string;
  orderNumber: string;
  orderAmount: string;
  confirmedTime: string;
  laborCostExcludingTax: string;
}

interface IFormData {
  costCenterCode?: string;
  costCenterName?: string;
  accountingCode?: string;
  bankAccountingCode?: string;
  orderNumber?: string;
  orderAmount?: string;
  confirmedTime?: string;
  laborCostExcludingTax?: string;
}

const defaultFormData: IFormData = {
  costCenterCode: undefined,
  costCenterName: undefined,
  accountingCode: undefined,
  bankAccountingCode: undefined,
  orderNumber: undefined,
  orderAmount: undefined,
  confirmedTime: undefined,
  laborCostExcludingTax: undefined,
};

export const useModel = () => {
  const filterForm = reactive<IFormData>({ ...defaultFormData });

  const tableList = ref<(ITableListItem & { [propName: string]: unknown })[]>(
    [],
  );

  const pagination = reactive<{
    page: number;
    pageSize: number;
    total: number;
  }>({
    page: 1,
    pageSize: 10,
    total: 0,
  });

  const loading = reactive<{ list: boolean }>({
    list: false,
  });

  return {
    filterForm,
    tableList,
    pagination,
    loading,
  };
};

export type Model = ReturnType<typeof useModel>;