Правила для ES6 и современного синтаксиса

Современный JavaScript (ES6+) включает значительное расширение языка: стрелочные функции, классы, модули, деструктуризацию, шаблонные строки и новые способы работы с переменными. Корректная статическая проверка такого кода требует точной настройки парсера и набора правил, ориентированных на новые конструкции.

ESLint анализирует код через парсер и набор правил, которые могут быть как синтаксически-нейтральными, так и завязанными на конкретные возможности ECMAScript.

Настройка поддержки ECMAScript в конфигурации

Для корректного разбора ES6-кода требуется указание версии стандарта и типа модулей:

{
  "parserOptions": {
    "ecmaVersion": 2023,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": false
    }
  }
}

ecmaVersion

Параметр определяет версию ECMAScript:

  • 5 — базовый JavaScript без современных возможностей
  • 6 (2015) — стрелочные функции, классы, let/const, модули
  • 2017–2023 — async/await, optional chaining, nullish coalescing и др.

Использование значения latest позволяет включать актуальный стандарт без ручного обновления конфигурации.

sourceType

  • script — классические скрипты
  • module — ES-модули с import/export

Модули активируют дополнительные проверки области видимости и запрещают некоторые глобальные конструкции.

Управление переменными: let, const и var

Одним из ключевых аспектов ES6 является введение блочной области видимости.

Правило no-var

Запрещает использование var, стимулируя переход к let и const.

{
  "rules": {
    "no-var": "error"
  }
}

Правило prefer-const

Определяет переменные, которые не переназначаются:

{
  "rules": {
    "prefer-const": "error"
  }
}

Поведение:

  • если переменная не переопределяется → предлагается const
  • если есть reassignment → допускается let

Пример:

let value = 10;
console.log(value);

После правила:

const value = 10;
console.log(value);

Стрелочные функции и контекст this

ES6 вводит стрелочные функции, которые фиксируют лексическое значение this.

prefer-arrow-callback

Требует использования стрелочных функций в callback-ах:

{
  "rules": {
    "prefer-arrow-callback": "error"
  }
}

Пример трансформации:

setTimeout(function () {
  console.log("test");
}, 1000);

Предпочтительный вариант:

setTimeout(() => {
  console.log("test");
}, 1000);

no-confusing-arrow

Запрещает конструкции, где стрелочные функции могут быть неоднозначны:

{
  "rules": {
    "no-confusing-arrow": "error"
  }
}

Шаблонные строки

ES6 заменяет конкатенацию строк на template literals.

prefer-template

Правило заставляет использовать шаблонные строки вместо +:

{
  "rules": {
    "prefer-template": "error"
  }
}

Пример:

const message = "Hello " + name + "!";

После применения:

const message = `Hello ${name}!`;

Деструктуризация объектов и массивов

Деструктуризация повышает читаемость кода и уменьшает повторения.

prefer-destructuring

Правило требует использования деструктуризации:

{
  "rules": {
    "prefer-destructuring": "error"
  }
}

Пример:

const user = { name: "Alex", age: 30 };
const name = user.name;

После применения:

const { name } = user;

Для массивов:

const arr = [1, 2];
const first = arr[0];

С деструктуризацией:

const [first] = arr;

Spread и rest операторы

ES6 вводит операторы ... для работы с массивами и объектами.

ESLint не требует отдельных правил для базового синтаксиса, но включает проверки на избыточность и неправильное использование.

no-useless-escape (в контексте spread)

Хотя правило не специализировано под spread, часто используется в связке с проверками чистоты выражений.

Модули import/export

ES6 модульная система требует строгого анализа импортов.

no-duplicate-imports

Запрещает повторный импорт одного и того же модуля:

{
  "rules": {
    "no-duplicate-imports": "error"
  }
}

Пример:

import { map } from "lodash";
import { filter } from "lodash";

После анализа:

import { map, filter } from "lodash";

Классы ES6

Классы вводят синтаксический сахар над прототипами, но ESLint применяет дополнительные правила корректности.

no-useless-constructor

Запрещает пустые конструкторы:

{
  "rules": {
    "no-useless-constructor": "error"
  }
}

Пример:

class User {
  constructor() {}
}

Упрощение:

class User {}

class-methods-use-this

Проверяет методы классов, которые не используют this:

{
  "rules": {
    "class-methods-use-this": "error"
  }
}

Пример:

class MathUtil {
  sum(a, b) {
    return a + b;
  }
}

Если метод не использует состояние класса, предпочтительнее статическая функция:

class MathUtil {
  static sum(a, b) {
    return a + b;
  }
}

Объектные литералы и сокращённый синтаксис

ES6 вводит shorthand-свойства и методы.

object-shorthand

Правило требует использовать сокращённый синтаксис:

{
  "rules": {
    "object-shorthand": "error"
  }
}

Пример:

const name = "Alex";

const user = {
  name: name
};

После применения:

const user = {
  name
};

Также для методов:

const obj = {
  method: function () {
    return true;
  }
};

Сокращение:

const obj = {
  method() {
    return true;
  }
};

Параметры по умолчанию

ES6 поддерживает значения по умолчанию в функциях.

ESLint проверяет избыточные проверки и упрощения.

Пример:

function log(message) {
  message = message || "default";
}

Современный вариант:

function log(message = "default") {
}

Глобальные ограничения ES6-среды

Некоторые правила направлены на предотвращение ошибок при использовании новых возможностей языка:

no-const-assign

Запрещает переназначение const:

{
  "rules": {
    "no-const-assign": "error"
  }
}

no-class-assign

Запрещает изменение классов:

{
  "rules": {
    "no-class-assign": "error"
  }
}

Стандартная конфигурация ESLint включает набор правил, ориентированных на ES6:

{
  "extends": "eslint:recommended"
}

Дополнительно часто подключаются наборы:

  • style guide (Airbnb, Standard)
  • plugin:import/recommended
  • plugin:es6/recommended (исторические конфигурации)

Работа с современными возможностями ECMAScript

ESLint постепенно расширяет поддержку новых стандартов:

  • optional chaining (?.)
  • nullish coalescing (??)
  • dynamic import()
  • BigInt
  • top-level await

Большинство этих возможностей не требуют специальных правил, но зависят от версии ecmaVersion.

Конфигурация современных проектов

Типичная настройка для ES6+ проектов:

{
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-var": "error",
    "prefer-const": "error",
    "prefer-arrow-callback": "error",
    "prefer-template": "error",
    "object-shorthand": "error",
    "prefer-destructuring": "error",
    "no-duplicate-imports": "error",
    "class-methods-use-this": "error"
  }
}

Такой набор формирует единый стиль, ориентированный на современный синтаксис ECMAScript и минимизацию устаревших конструкций.

Оглавление