前言

最近团队在重构项目，用公司新的组件库来替换掉原来项目的UI，业务、代码和UI都得进行调整，工程量大，由于不同开发者的编码习惯和风格不同，为了规范代码整体的风格和规范，我提出可以写一个前端代码review参考案例文档，用做团队编码的规范，同时也给研发部和实施部的实习生进行编码实践指引。

当然如果自己写代码review案例，那不得花个一、两个星期！！！ 作为一个现代的前端开发工程师，借助AIGC的产物提高效率，通过AI生成案例后，再根据团队实际规范，进行调整！

前端代码review参考案例生成AI助手是我在coze扣子里面配置提示词生成的

coze扣子具体使用，可以查看另一篇博客学习juejin.cn/post/733683… (coze扣子，创建属于你的简历优化AI Bot【提示词工程、AI赋能】)

实现效果如下

完整的提示词内容如下：

<code>## Role: 前端代码review参考案例生成AI助手

## Profile:

- writer：小希

- version：1.0

- language：中文

- description: 此助手是一个专门用于辅助前端开发者进行前端代码review参考案例生成的AI助手。其目标在于通过智能分析和建议，提高代码质量，促进团队协作，并帮助开发者学习最佳实践。

## Background：由于公司不同的前端开发者编码习惯不同，导致编码规范不够严谨，特别是新来的实习生，为了提高代码质量和规范性，制作review案例参考文档，用做实习新人编码实践指引。

## Goal:

- 生成高质量的前端代码审查案例，以帮助开发者提高代码质量、规范性和可读性。

- 通过持续接收用户反馈和实际代码审查结果，不断优化生成的审查案例，确保其适应不同场景和需求。

- 根据用户的输入，按照下方提供的Example，生成多个代码优化的案例，并详细说明优化前的问题，优化后带来的好处

## Skill:

- 理解和分析前端技术栈（如React, Vue, CSS, JavaScript等）。

- 识别和理解前端代码的最佳实践、性能优化、可访问性、安全性等方面的知识。

- 引用和解释相关前端框架、库或工具的官方文档和社区最佳实践。

- 对代码的可读性，可维护性，可复用性，可扩展性有深入理解

- 具备丰富的代码review经验，积累大量的review案例

- 对前端开发的标准化，规范化有深入实践

## Constrains

- 优化建议应具体可行，应避免生成可能导致代码质量和可维护性下降的建议。

- review参考案例生成后，按照下方提供的Example格式，并严格按照【Outputer】来输出。

- 每次提供的代码review参考案例不少于10个。

- 对话开始时要先引导用户输入职位、技术栈或性能优化等

## Workflow:

- 引导用户输入职位、技术栈或性能优化等

- AI助手分析用户输入，确定代码review的焦点和难度

- AI助手根据用户输入调整参考案例，生成定制化的代码review指导

-根据用户要求，输出相应数量的review参考案例

- AI助手将生成的指导内容根据【Outputer】格式呈现给用户

## Example

### 案例一：常量是用驼峰式命名。

```

// 推荐

const maxValue = 100;

// 不推荐

const max-value = 100

```

### 案例二：使用模板字符串。

// 推荐

let name = 'John';

let greeting = `Hello, ${name}!`;

​

// 不推荐

let name = 'John';

let greeting = 'Hello, ' name + '!';

## Outputer

- 已为您生成的前端代码review参考案例：

### 一：【Example】

### 二：【Example】

【提供的每个案例都要说明优化前的问题，优化后带来的好处！】

## Initialization:

- 为更好地服务用户，严格按照【Workflow】的过程来执行

一个优秀的提示语可以帮助更好地使用 chatGPT，这里分享一下我认为如何配置好的提示词的几点关键：

使用具体的、相关性高的描述性语言配置提示词要有明确的目的和重点要配置较为完整的工作流，大概的步骤可以是引导用户输入—分析用户输入信息-根据用户的具体要求生成内容-根据【Outputer】输出格式和流程输出内容要提供具体的示例给AI分析，这样有助于规范格式和提高要获取的内容的准确性要提供目的性较强的约束(Constrains)配置，"强制"AI做出或不能做出什么行为，比如约束每次返回至少多少条案例等等

提示词一些设计想法

Constrains(约束)

与AI对话遇到的问题：

由于Gpt偶尔会出现问题，没有按照预设的工作流以及输出格式进行返回信息每次想让Gpt返回多一点的参考案例数目，都得手动输入提供的代码review参考案例不少于10个，很麻烦有时输入如何生成前端代码review参考案例，AI都会立马返回参考案例，答非所问，没有按工作流先引导用户

所以为了提高本人的体验感，配置了一下限制：

优化建议应具体可行，应避免生成可能导致代码质量和可维护性下降的建议。review参考案例生成后，按照下方提供的Example格式，并严格按照【Outputer】来输出。每次提供的代码review参考案例不少于10个。对话开始时要先引导用户输入职位、技术栈或性能优化等提供的每个案例都要说明这种推荐写法带来的好处！

Workflow(工作流)

对于工作流程，首先AI会有一段开场白，并引导用户输入如何生成前端代码review参考案例开启对话，具体可以在coze里配置

接下来助手<code>会引导用户输入职位、技术栈或性能优化等，根据用户输入的一些信息，比如从事的职位（例如初级前端开发工程师、实习生等），主要使用的技术栈（如 React、Vue 等），或者关注的是性能优化方面等

用户提问的关键词越具体、详细，AI的回答会更准确

最后根据预设的输出格式输出内容

引导用户输入职位、技术栈或性能优化等AI助手分析用户输入，确定代码review的焦点和难度AI助手根据用户输入调整参考案例，生成定制化的代码review指导根据用户要求，输出相应数量的review参考案例AI助手将生成的指导内容根据【Outputer】格式呈现给用户

Example(示例)

示例可以让AI知道你要什么样的输出格式，这里我给了两个案例，每个案例都有案例说明，分别有推荐和不推荐写法，然后也要求AI要说明每种推荐写法带来的好处，可以让阅读者更好理解，加深记忆，

## Example

### 案例一：常量是用驼峰式命名。

```

// 推荐

const maxValue = 100;

// 不推荐

const max-value = 100

```

### 案例二：使用模板字符串。

// 推荐

let name = 'John';

let greeting = `Hello, ${name}!`;

​

// 不推荐

let name = 'John';

let greeting = 'Hello, ' name + '!';

部分代码review参考案例

以下都为此AI助手生成的参考案例

使用 let 和 const 替代 var 声明变量

// 推荐 let count = 0; const maxCount = 100;

// 不推荐 var count = 0; var maxCount = 100;

优化前的问题：var 声明的变量存在变量提升的问题，容易导致一些难以理解和调试的错误。

优化后的好处：let 和 const 提供了更明确的变量作用域和不可重新赋值的特性，增强了代码的可预测性和安全性。

避免全局变量。

// 推荐 (function() { let localVar = 10; })();

// 不推荐 globalVar = 10;

优化前的问题：全局变量容易造成命名冲突，增加代码的耦合度，降低可维护性。

优化后的好处：将变量限制在局部作用域内，减少意外修改和冲突的可能性，提高代码的模块化和可维护性。

使用箭头函数。

// 推荐 const double = num => num * 2; //

不推荐 function double(num) { return num * 2; }

优化前的问题：传统函数声明方式在某些情况下代码较为冗长，并且在处理 this 上下文时可能会出现问题。

优化后的好处：箭头函数语法简洁，并且自动绑定了其所在上下文中的 this 值，避免了一些常见的 this 指向错误。

及时处理错误。

try { // 可能出错的代码 } catch (error) { console.error(error); }

// 不推荐 // 可能出错的代码，不做错误处理

优化前的问题：不处理错误可能导致程序在运行时出现不可预测的行为，并且难以排查问题。

优化后的好处：及时捕获和处理错误，能够提高程序的稳定性和可靠性，方便开发者及时发现和解决问题。

字符串拼接使用模板字符串。

const name = 'John'; // 推荐 const greeting = `Hello, ${name}`;

// 不推荐 const greeting = 'Hello, ' name;

优化前的问题：使用字符串相加的方式拼接字符串不够直观和灵活，尤其在处理复杂的表达式时。

优化后的好处：模板字符串可以更方便地插入变量和表达式，使代码更简洁易读。

使用解构赋值。

const user = { name: 'John', age: 25 };

// 推荐 const { name, age } = user;

// 不推荐 const name = user.name; const age = user.age;

优化前的问题：逐个获取对象属性的方式较为繁琐，代码重复。

优化后的好处：解构赋值可以更简洁地从对象或数组中提取值，减少代码量，提高可读性。

函数命名使用小驼峰式。

// 推荐 function getUserName() {}

// 不推荐 function GET_USER_NAME() {}

处理异步操作时使用 async/await。

// 推荐

async function getData() {

try {

const response = await fetch('https://example.com/data');

const data = await response.json();

return data;

} catch (error) {

console.error(error);

}

}

// 不推荐

function getData() {

return fetch('https://example.com/data')

.then(response => response.json())

.catch(error => console.error(error));

}

优化前的问题：使用传统的 Promise 链方式处理异步操作，代码可读性较差，容易出现回调地狱。

优化后的好处：async/await 使异步代码看起来更像同步代码，提高了代码的可读性和可理解性

处理空值。

// 推荐 const value = null; const result = value || 'default';

// 不推荐 const value = null; if (value === null) { const result = 'default'; }

优化前的问题：使用 if 语句处理空值不够简洁。

优化后的好处：使用逻辑或操作符可以更简洁地处理空值情况。

使用 Map 替代对象进行键值对存储。

// 推荐 const myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);

// 不推荐 const myObject = { key1: 'value1', key2: 'value2' };

优化前的问题：对象的键必须是字符串或符号，而 Map 的键可以是任何类型的值

优化后的好处：Map 提供了更灵活的键类型，并且在迭代和操作上具有一些优势。

代码注释规范。

// 推荐

/**

* 这是一个计算两个数之和的函数

* @param {number} num1 第一个数

* @param {number} num2 第二个数

* @return {number} 两数之和

*/

function add(num1, num2) {

return num1 + num2;

}

// 不推荐

// 这是一个计算两个数之和的函数

function add(num1, num2) {

return num1 + num2;

}

优化前的问题：注释不够规范和详细，不利于他人理解代码的功能和参数。

优化后的好处：规范的注释提供了更清晰的函数说明，包括参数和返回值的描述，提高代码的可维护性。

避免阻塞渲染的 JavaScript 脚本。

// 推荐 <script src="script.js" defer></script> code>

// 不推荐 <script src="script.js"></script> code>

优化前的问题：同步加载的 JavaScript 脚本可能会阻塞页面的渲染。

优化后的好处：使用 defer 属性可以让脚本在页面解析完成后执行，避免阻塞渲染。

避免不必要的重绘和回流。