Вайбкодинг — это когда код вроде бы работает, но написан «по вайбу»: с кривыми отступами, странными именами переменных, копипастой и магическими числами. Такой код сложно поддерживать. Многие настоящие программисты с большим опытом добавляют себе в портфолио фразу «очищу ваш вайбкод». Но что, если я скажу, что и нейросети отлично помогают его чистить, особенно в небольших проектах?

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

«Переименуй переменные и функции в читаемые и осмысленные»

Грязный код

function a(b) {
  let c = []
  for (let i = 0; i  5) {
      c.push(b[i])
    }
  }
  return c
}

Результат

function filterNumbersAboveFive(numbers) {
  let result = [];
  for (let i = 0; i  5) {
      result.push(numbers[i]);
    }
  }
  return result;
}

Что изменилось: появились осмысленные названия — например, вместо a и b теперь filterNumbersAboveFive и numbers; код стал самодокументируемым.

«Убери дублирование и вынеси повторяющийся код в отдельные функции»

Грязный код

function validateEmail(email) {
  return email.includes('@') && email.length > 5
}
function validateUsername(username) {
  return username.length > 3 && username.length  5 && password.length 

Результат

function isLengthInRange(str, minLength, maxLength) {
  return str.length > minLength && str.length 

Что изменилось: повторяющийся код про длину вынесен в функцию — например, isLengthInRange, что уменьшило дублирование и упростило поддержку.

«Приведи отступы и форматирование к единому стилю»

Грязный код

function sum (a,b){
return a+b
  }

Результат

function sum(a, b) {
  return a + b;
}

Что изменилось: приведены отступы и пробелы — например, пробелы вокруг + и аккуратные скобки.

«Замени фиксированные числа на константы с понятными именами»

Грязный код

function getDiscount(price) {
  if (price > 999) {
    return price * 0.9
  }
  return price
}

Результат

const DISCOUNT_THRESHOLD = 999;
const DISCOUNT_RATE = 0.9;

function getDiscount(price) {
  if (price > DISCOUNT_THRESHOLD) {
    return price * DISCOUNT_RATE;
  }
  return price;
}

Что изменилось: магические числа вынесены в константы — например, DISCOUNT_THRESHOLD и DISCOUNT_RATE.

«Перепиши на современный синтаксис ES6+»

Грязный код

var arr = [1, 2, 3]
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

Результат

const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item);
}

Что изменилось: использованы современные конструкции — например, const вместо var и цикл for...of.

«Убери лишние проверки и оптимизируй условные конструкции»

Грязный код

function isAdult(age) {
  if (age >= 18) {
    return true
  } else {
    return false
  }
}

Результат

function isAdult(age) {
  return age >= 18;
}

Что изменилось: условие сведено к одной строке — например, if заменён на короткое логическое выражение.

«Сделай код декларативным и читаемым»

Грязный код

function getEvenNumbers(arr) {
  let result = []
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] % 2 === 0) {
      result.push(arr[i])
    }
  }
  return result
}

Результат

function getEvenNumbers(arr) {
  return arr.filter(num => num % 2 === 0);
}

Что изменилось: цикл заменён на декларативный метод массива — например, filter.

В итоге сложно сказать, как всё повернётся, и уволят ли всех программистов из-за того, что вокруг теперь нейросети. Но улучшить код можно — главное не перегибать палку и не отдавать всю работу железным мозгам. Удачи в разработке!

Полезные статьи — по почте

Подпишитесь на редакторскую рассылку о фронтенде, новых CSS-штучках и всём, что пригодится разработчику.

Присылаем одно письмо в неделю. Без спама и нейросетей.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники