Ревью и оптимизация кода на Javascript, React и Next.js

Содержание

Кому нужен этот промт и как он работает?
Готовый к использованию промт
Как использовать промт и на что обратить внимание
Примеры использования
Пример ответа нейросети
Итог: зачем использовать этот промт?

Кому нужен этот промт и как он работает?

Этот промт создан для фронтенд-разработчиков и ревьюеров кода, которые работают с Javascript, особенно с Vanilla Javascript, React и Next.js. Он помогает создавать оптимизированный, читаемый и кроссбраузерный код, снижая количество ошибок и улучшая производительность сайтов.

Используя данный промт, вы можете автоматически получать улучшенные версии вашего кода, добавлять подробные комментарии по запросу или получать подробные объяснения работы кода. Это облегчает процесс ревью, ускоряет исправление и улучшение фронтенд-кода, а также облегчает командную работу.

Готовый к использованию промт

Ты опытный фронтенд инженер и код-ревьюер, специализирующийся на Javascript, особенно Vanilla Javascript, React и Next.js. Твоя задача — всегда предоставлять оптимизированный код, который:

- легко читается другими разработчиками, с комментариями, объясняющими основную функциональность (только по запросу /comment),

- оптимизирован для производительности сайта, быстро выполняется и не содержит избыточных частей,

- соответствует требованиям к кроссбраузерной совместимости,

- предотвращает ошибки и ведет их отслеживание.

Взаимодействуй со мной через следующие команды, после которых будет идти блок кода:

/optimize — оптимизируй код согласно правилам, полностью перепиши его, никогда не удаляй части, которые я позже добавлю обратно. Объясни внесённые оптимизации.

/comment — перепиши код, добавляя комментарии внутрь, полностью, без удаления частей.

/explain — подробно объясни предоставленный код.

Не выполняй оптимизацию без команды /optimize, не добавляй комментарии без /comment, не объясняй без /explain.

Если задача понятна, ответь:

"Привет, я DevIA, твой личный ревьюер кода. Чем могу помочь?

- Напиши /optimize + код для оптимизации

- Напиши /comment + код для добавления комментариев

- Напиши /explain + код для подробного объяснения"

Как использовать промт и на что обратить внимание

Для запуска оптимизации, комментирования или объяснения кода отправьте команду с блоком кода.

Всегда используйте команды строго по назначению: /optimize для оптимизации, /comment для добавления комментариев и /explain для объяснений.
Не отправляйте код без команд, иначе промт не отреагирует.
Обратите внимание, что оптимизация не удаляет код, чтобы вы могли позже добавить свои части обратно без потерь.
Результаты зависят от корректности исходного кода и поставленной задачи. В сложных случаях может потребоваться дополнительное уточнение.

Примеры использования

Этот раздел демонстрирует, как можно применять промт для реальных задач в кодировании.

Пример 1. Оптимизация простого React-компонента

Задача — получить более быстрый и чистый код React-компонента без избыточных элементов.

/optimize

function MyComponent(props) {

const { items } = props;

return (

<ul>

{items.map((item, index) => (

))}

</ul>

);

}

Пример 2. Добавление комментариев в Vanilla Javascript функцию

Необходимо получить подробные пояснения внутри кода, чтобы упростить его понимание для команды.

/comment

function debounce(func, wait) {

let timeout;

return function(...args) {

clearTimeout(timeout);

timeout = setTimeout(() => func.apply(this, args), wait);

};

}

Пример ответа нейросети

Ниже приведён пример вывода нейросети на запрос оптимизации React-компонента.

✅ Example:

Оптимизированный компонент MyComponent теперь использует деструктуризацию пропсов и тернарный оператор для обработки пустых списков, а также добавлены комментарии (если запрошено). Это повышает читаемость и предотвращает возможные ошибки при рендеринге пустых массивов.

1
2
3
4
5
6
7
8
9
10
11

function MyComponent({ items }) {
  return (
    <ul>
      {items && items.length
        ? items.map((item, index) => (
          <li key={index}>{item}</li>
        ))
        : <li>Список пуст</li>}
    </ul>
  );
}

Примечание: результат приблизительный и может меняться в зависимости от кода и запроса.

Итог: зачем использовать этот промт?

Данный промт автоматизирует процесс проверки и улучшения frontend-кода на Javascript, ускоряет работу разработчиков и снижает число ошибок. Он помогает создавать качественный, производительный и легко поддерживаемый код без лишних усилий.