Conecté ChatGPT en el complemento vscode, que resolvió el problema de nombrar variables de código

El complemento lowcode se ha iterado durante casi 3 años. Como mi herramienta de productividad, generalmente uso lowcode para algunos trabajos físicos sin cerebro, como administrar scaffolding, generar páginas CURD, generar tipos TS de acuerdo con documentos de interfaz, generar simulacros, etc.

Con la ayuda de la función de material de bloque de lowcode, las páginas CURD se pueden generar rápidamente, pero hace un tiempo, al hacer algunas necesidades financieras, la nomenclatura de variables se convirtió en un problema. Una lista tiene más de diez o veinte campos, y la mayoría de ellos son esos Es un sustantivo abstracto que ni siquiera sabes lo que significa cuando miras chino. Mientras lo hacía, usé simple y crudamente column1 ~ column20 para nombrar (no sé cómo traducirlos uno por uno de todos modos).

Un colega mencionó "deje que ChatGPT haga el nombramiento de las variables", y luego comencé a estudiar el nombramiento de ChatGPT:

Parece que el problema no es grande, y luego la API de ChatGPT está conectada al complemento de código bajo.

Durante el proceso de desarrollo, investigué varios complementos de ChatGPT con una cantidad relativamente grande de cargas y descargas en vscode. Son básicamente lo mismo. Todos agregan opciones fijas para analizar código, refactorizar código, escribir pruebas unitarias para código y encontrar defectos para el código en el menú contextual. Si quiero que ChatGPT traduzca las variables chinas en el código que seleccioné al inglés, necesito copiar y pegar el código y escribir Prompt cada vez.

Con la ayuda de la función de fragmento de código original de lowcode, la función de solicitud preestablecida se realiza casi sin esfuerzo, de la siguiente manera:

En la actualidad, lowcode ya admite el acceso a la API oficial de openai y también puede utilizar algunos servicios de transferencia de pago en China. A continuación se describe cómo utilizarlo.

Configurar ChatGPT

Plantilla de aviso preestablecido

Con la función de fragmento de código original de lowcode, puede preestablecer solicitudes a voluntad, admitir la sintaxis de la plantilla EJS y crear rápidamente solicitudes como análisis de código, refactorización de código y adición de comentarios al código.

Tire hacia abajo y configure el campo chatGPT:

CommandPrompt es el contenido que se envía después de seleccionar una plantilla en el menú contextual y es compatible con la sintaxis de plantilla de EJS.

viewPrompt es el contenido que se envía después de hacer clic en el botón Ask ChatGPT en el fragmento de código o en la página de detalles de visualización del material del bloque.

Función de generación de código Lowcode combinada con ChatGPT

Al configurar y generar la interfaz CURD, si se utilizan todos los nombres chinos, se generará el siguiente código de acuerdo con la plantilla:

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>;

Después del procesamiento de ChatGPT:

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>;