Линтинг — JS: Настройка окружения

У кода есть множество разных характеристик, по которым можно судить, насколько хорошо он написан. Среди них есть одна базовая, с которой начинают все разработчики — это стиль написания. Сравните два варианта оформления кода:

// Без форматирования
const  find_sum = (a,b) =>
{
const c = a+b; return c;
}

// С форматированием
const findSum = (a, b) => {
  const sum = a + b;
  return sum;
}

Второй вариант читается значительно проще. Чем больше будет кода, тем больше будет различий. Хороший стиль кодирования — базовое требование к коду в коммерческой разработке. Это важно, в том числе для упрощения командной разработки. Как правило, в одном проекте работает от нескольких до десятков программистов и крайне важно, чтобы им было легко читать код друг друга не спотыкаясь о неправильное форматирование.

Универсальным решением этой задачи сейчас стала утилита prettier, которая берет весь код в файле и полностью переформатирует его так как нужно в соответствии со своими правилами. Однако этого недостаточно и можно пойти гораздо дальше. Prettier форматирует код, но не вникает в его семантику (назначение). Например, в JavaScript хорошим тоном считается использовать === вместо ==. Так значительно безопаснее и так мы защищаемся от случайных ошибок преобразований типов. Prettier не может автоматически заменять == на === потому что это может сломать код.

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

В JavaScript-мире особой популярностью пользуется линтер eslint. Количество правил, по которым он проверяет код, исчисляется сотнями. Посмотрите на этот небольшой участок кода:

let a = 5;
a++;

С точки зрения форматирования здесь все хорошо, а что скажет линтер? Eslint выдаст три предупреждения:

• Identifier name 'a' is too short id-length. Слишком короткое имя.
• Unary operator '++' used no-plusplus. Используется инкремент, что опасно.
• 'a' is assigned a value but never used no-unused-vars. Переменная не используется, а значит она либо не нужна, либо в коде ошибка.

Ссылки выше ведут на страницы конкретных правил, где подробно объясняется, почему так код писать не нужно и как его писать нужно. Изучать правила eslint очень полезно, они прививают хорошие практики написания кода.

Установка и настройка Eslint

Eslint устанавливается как dev зависимость прямо в проект:

npm install --save-dev eslint

После установки его надо настроить, иначе он не будет выполнять проверки. Для этого нужно запустить команду инициализации. Во время настройки eslint задаст много разных вопросов. Ниже примеры ответов, которые подходят в нашей ситуации:

npx eslint --init

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm (JS Modules)
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No
✔ Where does your code run? · Node
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · YAML
Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:

eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2
✔ Would you like to install them now with npm? · Yes

Один из главных вопросов во время установки — каким стилевым стандартом мы будем пользоваться. В JavaScript по историческим причинам нет одного общепризнанного стандарта. Существует как минимум три популярных, и eslint задает вопрос какой из них нужно использовать. На текущий момент самый популярный это airbnb и на Хекслете используется именно он. Каждый раз, когда выполняется проверка кода в редакторе Хекслета, запускается eslint и его рекомендации выводятся в одной из нижних вкладок.

В результате настройки eslint создаст файл, который нужно добавить в репозиторий:

# .eslintrc.yml
env:
  browser: true
  es2020: true
extends:
  - airbnb-base
parserOptions:
  ecmaVersion: 11
  sourceType: module
rules: {}

И последний шаг — запуск eslint:

# Обратите внимание на точку, это указание текущей директории и всех поддиректорий
npx eslint .

Если ошибок нет, то eslint молча завершит свою работу. Если ошибки есть — выведет список с указанием того, что нужно поправить.

Выбор пунктов Browser/Node выполняется по клавише пробела, а подтверждение по Enter

Кроме нахождения ошибок eslint может их исправлять. По крайней мере те ошибки, которые могут быть исправлены с гарантией сохранения работоспособности. Для этого нужно добавить флаг --fix в запуск:

npx eslint --fix .

Самостоятельная работа

1. Установите eslint в проект hexlet-js
2. Выполните инициализацию с правилами airbnb
3. Запустите линтер на файлах проекта, исправьте замечания
4. Подключите eslint к своему редактору
5. Добавьте все изменения на гитхаб

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Урок «Как эффективно учиться на Хекслете»
• Вебинар «Как самостоятельно учиться»