Для чего нужны форматтеры?

Для чего нужны форматтеры

Форматтеры (code formatters) — это инструменты автоматизации, которые приводят код к единому стилю. Они переформатируют исходный код в соответствии с заранее определёнными правилами, не меняя функциональность.

Основные форматтеры в экосистеме JS/TS

1. Prettier — самый популярный

Prettier — это опинионированный форматтер кода (по умолчанию имеет строгие правила):

// ДО форматирования (неаккуратный код)
const user={id:1,name:"Alice",email:"alice@example.com",role:"admin",isActive:true};
function calculateSum(a,b,c){return a+b+c;}

// ПОСЛЕ Prettier
const user = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
  role: "admin",
  isActive: true
};
function calculateSum(a, b, c) {
  return a + b + c;
}

Конфигурация (.prettierrc.json):

{
  "semi": true,
  "singleQuote": false,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

2. ESLint — линтер (проверка стиля + логические ошибки)

ESLint проверяет и сообщает об ошибках:

// ESLint предупредит о проблемах
function test() {
  var x = 1;  // ESLint: используй const/let вместо var
  console.log(x);  // ESLint: удали console перед продакшном
  if (true == x) { }  // ESLint: используй === вместо ==
}

unused_variable = 5;  // ESLint: переменная не используется

3. EditorConfig — стандартизация на уровне редактора

# .editorconfig
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.{js,ts,jsx,tsx}]
indent_style = space
indent_size = 2

[*.md]
indent_size = 4
max_line_length = off
trim_trailing_whitespace = false

Зачем нужны форматтеры

1. Единство стиля кода

В команде разработчиков каждый пишет по-разному:

// Разработчик 1 (табы, длинные строки)
function getUserData(userId){
    return fetch(`https://api.example.com/users/${userId}`).then(r=>r.json()).then(d=>({...d, formatted: new Date().toISOString()}));
}

// Разработчик 2 (пробелы, короткие строки)
function getUserData( userId ) {
  return fetch(
    `https://api.example.com/users/${userId}`
  )
    .then( response => response.json() )
    .then( data => ({
      ...data,
      formatted: new Date().toISOString()
    }) );
}

// Форматтер приводит к единому стилю
function getUserData(userId) {
  return fetch(`https://api.example.com/users/${userId}`)
    .then((r) => r.json())
    .then((d) => ({
      ...d,
      formatted: new Date().toISOString(),
    }));
}

2. Сокращение code review времени

Без форматтера код review фокусируется на стиле:

Rereview comment: "Fix indentation on line 42"
Review comment: "Use double quotes instead of single"
Review comment: "Add space after if statement"

С форматтером все style-замечания исчезают, и review фокусируется на логике:

Review comment: "This function violates SRP, split it"
Review comment: "Edge case not handled when userId is null"
Review comment: "Consider using Promise.all instead of then chain"

3. Предотвращение git-конфликтов

Без форматтера разработчики переформатируют файлы вручную:

// Разработчик A
- const data = { a: 1,b: 2 };
+ const data = { a: 1, b: 2 };

// Разработчик B
- const data = { a: 1,b: 2 };
+ const data = {
+   a: 1,
+   b: 2
+ };

// КОНФЛИКТ! В git видны огромные changes из-за стиля

С форматтером:

prettier --write .
# Все файлы переформатируются одинаково
# Git видит только реальные изменения

4. Автоматизация и экономия времени

# Вместо ручного форматирования
prettier --write src/

# Или в pre-commit hook (husky + lint-staged)
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": ["eslint --fix", "prettier --write"]
  }
}

5. Новички быстро привыкают к стилю

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

// Новичок пишет как ему удобно
const user={id:1,name:"Bob",email:"bob@example.com"};
if(user.id>0)console.log("Valid");

// После npm run format
const user = {
  id: 1,
  name: "Bob",
  email: "bob@example.com",
};
if (user.id > 0) {
  console.log("Valid");
}

// Идеально! Стиль соответствует команде

Лучшие практики

1. Prettier + ESLint вместе

Отключи конфликтующие правила ESLint и оставь форматирование Prettier:

{
  "extends": [
    "eslint:recommended",
    "prettier"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

2. Настрой pre-commit hook

npm install --save-dev husky lint-staged
npx husky install

{
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": ["eslint --fix", "prettier --write"],
    "*.json": ["prettier --write"],
    "*.md": ["prettier --write"]
  }
}

3. Настрой IDE

В VS Code (.vscode/settings.json):

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Типичные ошибки

Ошибка 1: Борьба с форматтером

# Ты переформатировал руками
# Потом Prettier переформатировал по-своему
# Потом ты опять переформатировал
# -> Бесконечный цикл

# Решение: доверься форматтеру и настрой его один раз

Ошибка 2: Слишком строгие правила

{
  "semi": true,
  "printWidth": 60,  // Слишком коротко, код разбит на много строк
  "tabWidth": 4,     // Слишком много отступа
}

// Лучше использовать дефолты Prettier (80 символов, 2 пробела)

Итог

Форматтеры нужны для:

• Единства стиля кода в команде
• Сокращения time-to-code-review
• Предотвращения style-конфликтов в git
• Автоматизации работы
• Быстрой onboarding новых разработчиков

Best Practice:

• Используй Prettier для форматирования
• Используй ESLint для проверки логики
• Настрой pre-commit hooks
• Дай форматтеру автоматически форматировать на save

Форматтеры — это не развлечение, это необходимость в профессиональной разработке.