Зачем нужен eslint?

ESLint – это инструмент для автоматического анализа и исправления кода в JavaScript и TypeScript. Он помогает разработчикам следовать единым стилям кодирования, находить ошибки и предотвращать баги ещё до запуска кода.

Почему ESLint полезен?
Без линтера код может быть неаккуратным и содержать ошибки, которые сложно отловить.

Проблемы без ESLint
- Разные стили написания кода
- Пропущенные точки с запятой или лишние пробелы
- Неиспользуемые переменные
- Ошибки, которые не выявляются во время компиляции (например, undefined переменные)

**Решение с ESLint:**
- Автоматически находит ошибки и предупреждения
- Подсказывает лучшие практики
- Поддерживает кастомные правила
- Работает в IDE и CI/CD (автоматическая проверка)

Как ESLint работает?
ESLint использует набор правил, которые проверяют код. Если код нарушает эти правила – линтер выдаёт предупреждение или ошибку.

function sayHello(name) {
  console.log("Hello, " + name)
}

sayHello("John")

function sayHello(name) {
  console.log(`Hello, ${name}`);
}

sayHello("John");

npm install eslint --save-dev

npx eslint --init

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

Frontend Interview - собеседования по Javascript / Html / Css

Зачем нужен 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

👉 @frontendInterview

hottg.com/frontendInterview/4538

1.6K viewsApr 14 at 09:04