Пост🤔 Зачем нужен eslint?

🤔 Зачем нужен eslint? ESLint – это инструмент для автоматического анализа и исправления кода в JavaScript и TypeScript. Он помогает разработчикам следовать единым стилям кодирования, находить ошибки и предотвращать баги ещё до запуска кода. 🚩Почему ESLint полезен? Без линтера код может быть неаккуратным и содержать ошибки, которые сложно отловить. 🚩Проблемы без ESLint Разные стили написания кода Пропущенные точки с запятой или лишние пробелы Неиспользуемые переменные Ошибки, которые не выявляются во время компиляции (например, undefined переменные) 🚩Решение с ESLint: Автоматически находит ошибки и предупреждения Подсказывает лучшие практики Поддерживает кастомные правила Работает в IDE и CI/CD (автоматическая проверка) 🟠Как ESLint работает? ESLint использует набор правил, которые проверяют код. Если код нарушает эти правила – линтер выдаёт предупреждение или ошибку. function sayHello(name) { console.log("Hello, " + name) } sayHello("John") Пример исправленного кода (ESLint fix) function sayHello(name) { console.log(`Hello, ${name}`); } sayHello("John"); 🟠Как установить и настроить ESLint? Установка npm install eslint --save-dev Создание конфига npx eslint --init Пример .eslintrc.js (настройки ESLint) module.exports = { env: { browser: true, es6: true, }, extends: [ "eslint:recommended", // Базовые рекомендации "plugin:vue/vue3-recommended" // Рекомендации для Vue ], rules: { "no-unused-vars": "warn", // Предупреждать о неиспользуемых переменных "semi": ["error", "always"], // Обязательные точки с запятой "quotes": ["error", "double"], // Только двойные кавычки }, }; Запуск проверки кода npx eslint myfile.js Автоматическое исправление ошибок npx eslint myfile.js --fix 🟠ESLint в IDE (VS Code, WebStorm) Чтобы ESLint работал в VS Code, установите расширение ESLint и включите "editor.codeActionsOnSave" "editor.codeActionsOnSave": { "source.fixAll.eslint": true } 🟠ESLint в CI/CD (автоматическая проверка на сервере) В проектах ESLint можно запускать в GitHub Actions, Jenkins, GitLab CI и других CI/CD системах, чтобы не допускать ошибок в main ветку. "scripts": { "lint": "eslint src --fix" } Теперь перед коммитом можно запускать: npm run lint Ставь 👍 и забирай 📚 Базу знаний