Linting: ESLint, Prettier, правила форматирования

Почему линтинг — это не роскошь, а необходимость 🧹

Представь: ты пишешь код, и всё работает. Но через месяц возвращаешься к проекту и видишь мешанину из разных стилей — где-то пробелы, где-то табы, кавычки то двойные, то одинарные. А коллеги и вовсе добавляют var в 2024 году!

Линтинг решает эти проблемы:
- Единый стиль кода — как корпоративный дресс-код, но для JavaScript.
- Раннее обнаружение ошибок — например, неиспользуемых переменных или undefined.
- Сохранение времени — меньше споров в пул-реквестах.

ESLint: твой личный код-ревьюер 🔍

ESLint — это статический анализатор кода, который проверяет твой JavaScript на соответствие правилам.

Установка:

npm install eslint --save-dev
npx eslint --init  # Создаст конфиг

Пример .eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: "eslint:recommended",
  rules: {
    "no-console": "warn",       // Предупреждает о console.log
    "semi": ["error", "always"] // Требует точку с запятой
  }
};

💡 Совет: Используй extends: "eslint:recommended" для базовых правил. Для React добавь плагин eslint-plugin-react.

Prettier: красота без компромиссов ✨

Prettier — это не линтер, а форматтер. Он не ищет ошибки, а делает код единообразным.

Установка:

npm install prettier --save-dev

Пример .prettierrc:

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2
}

Запуск форматирования:

npx prettier --write .

⚠️ Важно: ESLint и Prettier могут конфликтовать. Используй eslint-config-prettier, чтобы отключить правила ESLint, которые перекрывает Prettier.

Гармония ESLint + Prettier: как подружить их 🎻

1. Установи оба инструмента:

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

2. Настрой .eslintrc.js:

module.exports = {
  extends: ["eslint:recommended", "plugin:prettier/recommended"],
  rules: {
    "prettier/prettier": "error"
  }
};

3. Добавь скрипт в package.json:

"scripts": {
   "lint": "eslint .",
   "format": "prettier --write ."
}

Теперь npm run lint проверит код, а npm run format — красиво отформатирует.

Кастомизация правил: твой код — твои правила ⚙️

Правила ESLint делятся на три уровня:
- "off" или 0 — выключено.
- "warn" или 1 — предупреждение.
- "error" или 2 — ошибка.

Пример жёсткого конфига:

rules: {
  "no-var": "error",          // Только let/const
  "eqeqeq": "error",          // Запрет == в пользу ===
  "indent": ["error", 2]      // Два пробела для отступа
}

🛠 Профи-настройка: Для TypeScript используй @typescript-eslint/eslint-plugin. Для React — eslint-plugin-react-hooks.

Интеграция с IDE: линтинг на лету 🚀

VS Code:
1. Установи расширения ESLint и Prettier.
2. Включи автоформатирование при сохранении:

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"

Теперь код будет автоматически проверяться и форматироваться при сохранении файла.

Что дальше?

Попробуй добавить линтинг в свой текущий проект — даже если он маленький.
Исследуй готовые конфиги от Airbnb или Google.
Настрой pre-commit хуки через Husky, чтобы грязный код не попадал в репозиторий.

Линтинг — это не про ограничения, а про свободу от хаоса. Как сказал один умный человек (возможно, это был Данила Бежин): «Хороший код — это код, который выглядит так, будто его написал один человек, даже если над ним работали сто».

Теперь твоя очередь сделать код идеальным! 🔥