Для чего нужны линтеры?

Для чего нужны линтеры

Линтеры - это инструменты для анализа кода на предмет потенциальных проблем, стилистических ошибок и нарушений правил без выполнения кода. Они помогают писать более качественный, консистентный и безопасный код.

Основные функции линтеров

1. Поиск ошибок (Error Detection)

// Линтер найдёт эти ошибки
const x = 5;
const y = 10;

if (x = y) { // Ошибка: присваивание вместо сравнения
  console.log('Equal');
}

function unused() {
  const data = fetchData(); // Неиспользуемая переменная
}

const result = x + y; // x и y не определены (выше использовали const)
delete obj.property; // delete для переменных неправильно

2. Стиль кода (Code Style)

// Без линтера (хаос)
const add=(a,b)=>{return a+b}
const multiply =( a , b ) => { return a*b }
const divide=(a,b)=>a/b

// С линтером (консистентный стиль)
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;

3. Best practices

// Плохо: линтер предупредит
function fetchData() {
  fetch('/api/data')
    .then(res => res.json())
    .then(data => console.log(data))
    // Забыли .catch() - unhandled promise rejection!
}

var x = 5; // Используем var вместо let/const

const obj = { key: 'value' };
obj.key = 'new'; // Мутация объекта

// Хорошо
function fetchData() {
  fetch('/api/data')
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
}

const x = 5; // Используем const

const obj = { key: 'value' };
const newObj = { ...obj, key: 'new' }; // Не мутируем

Популярные линтеры для JavaScript/React

ESLint - основной линтер

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-var": "error", // Запретить var
    "no-unused-vars": "warn", // Предупреждение о неиспользуемых переменных
    "prefer-const": "error", // Предпочитай const
    "eqeqeq": "error", // Используй === вместо ==
    "semi": ["error", "always"] // Точки с запятой обязательны
  }
}

Prettier - форматер кода

Не ловит ошибки, но гарантирует единый стиль:

// .prettierrc.json
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "arrowParens": "always"
}

// До prettier:
const result = [1,2,3].map(x=>x*2)
function foo(){const y=5;return y}

// После prettier:
const result = [1, 2, 3].map((x) => x * 2);
function foo() {
  const y = 5;
  return y;
}

TypeScript + ESLint

Проверяет типы через линтер:

// .eslintrc.json для TypeScript
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-explicit-any": "error", // Запретить any
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/explicit-function-return-types": "warn"
  }
}

// Линтер найдёт ошибки
function example(value: unknown) {
  // @typescript-eslint/no-explicit-any ошибка
  const data: any = value;
  return data.property; // Небезопасно
}

На практике: workflow с линтерами

1. Во время разработки (IDE)

VS Code показывает ошибки в реальном времени:

// Красная волнистая линия появляется сразу
const unused = 42; // "unused is assigned a value but never used"

var x = 5; // "Unexpected var, use let or const instead"

if (x = 10) { // "Unexpected assignment in conditional"
  console.log(x);
}

2. Перед коммитом (pre-commit hook)

# package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "eslint --fix",
    "*.tsx": "eslint --fix && prettier --write"
  }
}

# Когда разработчик пытается сделать git commit,
# автоматически запускается linting

3. В CI/CD pipeline

#!/bin/bash
# .github/workflows/lint.yml

name: Lint
on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '18'
      - run: npm install
      - run: npm run lint
      - run: npm run type-check

# Если линтинг не пройдёт, PR не смёржится

Типичные правила ESLint

// no-var: запретить var
var x = 5; // ERROR
let y = 5; // OK

// no-unused-vars: неиспользуемые переменные
const user = fetchUser(); // ERROR если не используется

// eqeqeq: строгое сравнение
if (x == y) { } // ERROR
if (x === y) { } // OK

// no-console: запретить console в production
console.log('Debug'); // WARNING

// no-implicit-any: TypeScript any
function process(data: any) { } // ERROR
function process(data: unknown) { } // OK

// require-await: async функция должна иметь await
async function getData() {
  return 42; // WARNING: async без await
}

// no-floating-promises: обработка promise
fetch('/api/data')
  .then(res => res.json()); // WARNING: не обработана .catch()

Автоматическое исправление

# ESLint может исправить многие ошибки автоматически
npm run lint -- --fix

# До
const x=5; var unused = 10; const result=x+unused

# После
const x = 5;
const unused = 10;
const result = x + unused;

Проблемы без линтера

// 1. Несогласованный стиль
const userName="John" // Нет пробелов
const user_email = 'john@example.com' // Отличный стиль именования
const AGE=30 // Другой стиль

// 2. Неиспользуемый код
function oldFunction() {
  // Забыли удалить, но она не вызывается нигде
}

// 3. Потенциальные баги
function isEqual(a, b) {
  if (a = b) { // Баг! Присваивание вместо сравнения
    return true;
  }
  return false;
}

// 4. Неправильная обработка ошибок
fetch('/api/data')
  .then(res => res.json())
  .then(data => updateUI(data));
  // Нет catch - если запрос упадёт, ничего не произойдёт

// 5. Производительность
Object.keys(largeObject).forEach(key => {
  // Создаём новый массив при каждой итерации
});

Вывод

Линтеры нужны для:

1. Найти ошибки рано - до выполнения кода
2. Обеспечить консистентность - весь код в одном стиле
3. Предотвратить баги - предупредить об опасных паттернах
4. Улучшить производительность - найти неоптимальный код
5. Облегчить code review - не обсуждать стиль, говорить о логике
6. Обучение - рассказывают о лучших практиках

В современной разработке линтеры - это обязательный инструмент, а не опция. Вместе с форматером (Prettier) они значительно повышают качество кода и скорость разработки.