2.3. Начало работы с конфигами дополнительных инструментов

Возьмём готовый конфиг webpack из предыдущего модуля — тот, что был инициализирован из терминала, и добавим к нему несколько дополнительных пакетов.

Будем использовать:

  • ESLint — статический анализатор кода в соответствии с правилами, внесёнными в его конфиг;
  • Babel — транскомпилятор кода, преобразующий синтаксис ES6 в ES5;
  • Prettier — форматировщик кода.

Небольшое отступление. Для работы Prettier при сохранении файла (быстрая команды Ctrl + S) необходимо:

  • При использовании VS Code: открыть вкладку settings в редакторе кода и кликнуть на иконку со скриншота ниже. Вы попадёте в конфиг редактора в формате .json — здесь нужно прописать "editor.formatOnSave": true.

Настройка VS Code
Настройка VS Code

  • При использовании IDE WebStorm — открыть настройки (быстрый вход Ctrl + Alt + S), перейти во вкладку actions on save и выбрать поле prettier.

Инициализация конфигурации ESLint

Открываем терминал и вводим команду npm init @eslint/config.

После ввода команды появится перечень вопросов:

How would you like to use ESLint — как бы вы хотели бы использовать ESLint?

  • to check syntax only — только для проверки синтаксиса;
  • to check syntax and find problems — для проверки синтаксиса и поиска проблем;
  • to check syntax, find problems, and enforce code style — для проверки синтаксиса и поиска проблем с соблюдением определённого стиля.

What type of modules does your project use — какие типы модулей предпочтительно использовать в данном проекте?

Выбираем EcmaScript.

Which framework does your project use — какой фреймворк используется в проекте?

Does your project use TypeScript — используется ли в вашем проекте TypeScript?

Where does your code run — где будет работать ваш код: в браузере или в среде Node.js?

How would you like to define a style for your project — стиль кода вашего приложения?

Выбираем guide.

Which style guide do you want to follow — какому из стилей вы бы хотели следовать?

На выбор дают четыре гайда по написанию кода. В большинстве случаев выбирают AibBnb, но вы можете попробовать и другие.

What format do you want your config file to be in — в каком формате вы хотите получить конфигурационный файл?

Выбирайте любой:

  • .js,
  • .json,
  • .yml

Каким пакетным менеджером вы пользуетесь:

  • yarn,
  • npm,
  • pnpm (в видео продемонстрировано использование пакетного менеджера pnpm).

После установки дополнительных зависимостей появится файл .eslintrc<выбранный вами формат>, об основных полях которого мы поговорим в следующем шаге.

Наглядный пример быстрого развёртывания ESLint

Конфигурационный файл eslintrc

Поговорим о полях конфигурационного файла ESLint в формате .js.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: 'airbnb-base',
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {},
};
  • module.exports — эта директория отвечает за работу всего конфига (в формате объекта);
  • env — переменная окружения, где код будет выполняться:
    • browser — в браузере;
    • es2021 — используя синтаксис JS редакции 2021 года;
  • extends — от чего мы наследуемся (в данном случае выбран стайлгайд — airbnb);
  • overrides — в формате массива строк можно указывать, какие типы файлов будут служить нам в качестве шаблона настроек;
  • parserOptions — опции компилятора:
    • ecmaVersion — версия синтаксиса, выбираем последнюю;
    • sourceType — типы источников (модули);
  • rules — самое часто конфигурируемое поле. В него вносят правила, которых должен придерживаться разработчик при написании кода. Например, нужно ли ставить двойные или одинарные кавычки, точку с запятой после объявления переменных, отступы между блоками кода, общую длину строк в функциях или что-то ещё.

Подробнее о настраиваемых правилах можно почитать в официальной документации ESLint.

Конфигурационный файл prettierrc

Форматировщик кода Prettier также можно настраивать под проект, если его нужно «подружить» с ESLint. Рассмотрим его основные и часто используемые поля.

module.exports = {
  trailingComma: 'all',
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  printWidth: 120,
  arrowParens: 'always',
  endOfLine: 'auto',
  bracketSpacing: false,
  embeddedLanguageFormatting: 'auto',
  insertPragma: false,
};
  • trailingComma — запятые везде;
  • tabWidth — задаёт кол-во отступов для табуляции;
  • semi — точка с запятой везде;
  • singleQuote — одинарные кавычки;
  • printWidth — количество символов в строке;
  • arrowParens — отступ между круглыми скобками;
  • endOfLine — конец строки;
  • bracketSpacing — отступы между фигурными скобками;
  • embeddedLanguageFormatting — автоматическое обнаружение языков программирования, в котором он будет работать.

Подробнее о настраиваемых правилах можно почитать в официальной документации Prettier.

Конфигурационный файл babelrc

Мы будем конфигурировать инструмент на протяжении нескольких модулей, потому что он сложен в понимании.

У Babel есть своя документация — на английском языке.

Сейчас мы не станем рассматривать основные поля конфига, а поговорим немного о полифилах. Разберём, что это такое.

JavaScript постоянно развивается, появляются новые возможности, которые поддерживаются не всеми браузерами. И тут на помощь приходят те самые полифилы — они переписывают новый код в поддерживаемый.

Приведём небольшой пример в виде IE — встроенного браузера Windows (до 10-й версии), который перестал поддерживаться в 2022 году. Из-за сложной структуры и собственного движка браузер был трудно поддерживаемым. Из-за этого новые возможности JS в нём не работали — приходилось писать огромное количество полифилов для работоспособности кода.