Всегда чистый код: 5 инструментов для JavaScript-разработчика

1
6272
Добавить в избранное

Хотите научиться писать чистый код, но не знаете, с чего начать? Начните с хороших инструментов, которые сделают все за вас.

Всегда чистый код: 5 инструментов для JavaScript-разработчикаЕсли вы уже пытались покорить неприступную крепость «чистого кода», то знаете, что это совсем непросто. Мертвый код, неиспользуемые переменные, несоответствие типов, потенциально проблемные шаблоны… Нужно проследить за столькими вещами, что голова идет кругом, а руки опускаются.

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

Все это утомительно, беспокойно и просто бессмысленно. Забудьте об этом. В конце концов, вы же программист! Так переложите ответственность за чистый код на машину.

Давайте вместе разберемся с пятью лучшими инструментами в арсенале веб-разработчика: Prettier, ESLint, Husky, Lint-Staged и EditorConfig. Чтобы увидеть, как они используются на практике, загляните в этот репозиторий.

Prettier

Prettier – инструмент, который будет форматировать ваш код за вас. Примерно вот так:

У Prettier есть огромные преимущества:

  • Чистит весь код проекта. В качестве альтернативы можете самостоятельно пересмотреть 20 тысяч строк кода.
  • Без проблем настраивается под нужды конкретного проекта.
  • Позволяет сконцентрироваться на главном. Вы даже не представляете, сколько времени и энергии тратите на форматирование. Займитесь логикой приложения, а его красотой займется Prettier.
  • Облегчает жизнь новичкам. Благодаря настроенным правилам молодые программисты могут работать вместе с профессиональными разработчиками.

Настройка

Создайте директорию app и инициализируйте проект с помощью команды npm init -y. Дальше в примерах будет использоваться yarn, но вы можете продолжать управлять пакетами через npm.

Установите первый пакет:

package.json теперь выглядит так:

Через секунду мы разберемся, что делает строка "prettier": "prettier --write src/**/*.js" в секции scripts, но сначала создайте внутри директории приложения новую папку src, а внутри нее – файл index.js со следующим кодом:

Это выглядит ужасно, очень ужасно. Что вам теперь делать с этим уродливым кодом?

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

У нас уже почти все готово для реализации второго варианта, осталось лишь создать файл конфигурации для Prettier. Он называется prettier.config.js.

Пробежимся по настройкам:

  • printWidth следит, чтобы строчки кода были не длиннее 100 символов.
  • singleQuote меняет двойные кавычки на одинарные.
  • trailingComma расставляет висящие запятые после последнего свойства объектов.
  • bracketSpacing ставит пробелы после открывающей и перед закрывающей скобками объектных литералов.
  • jsxBracketSameLine помещает закрывающую угловую скобку > JSX-элемента на последнюю строчку:
  • tabWidth регулирует размер символа табуляции.
  • semi расставляет везде точки с запятой.

Вот список всех возможных опций Prettier.

Теперь давайте разберемся, как работает этот скрипт:

Он запускает Prettier, дает ему команду найти все файлы с расширением .js в директории src и отформатировать их. Запустите эту команду в терминале:

С нашим уродливым кодом происходит чудо:

Легким движением руки он превращается в чистый код. Круто, правда?

ESLint

Линтинг – это статический анализ кода, который позволяет обнаружить проблемные места или несоответствия определенному стилю. Для линтинга JavaScript мы будем использовать ESLint.

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

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

В настоящее время существует два популярных JS-стайлгайда, чтобы создавать чистый код: от Google и от Airbnb. Воспользуемся последним.

Настройка

Для начала обновите файл package.json:

Появилась пара новых скриптов и множество eslint-пакетов. Разберемся, зачем они нужны.

  • babel-eslint и eslint-plugin-babel необходимы для совместной работы ESLint и Babel.
  • eslint – главный модуль линтера.
  • eslint-config-airbnb – готовая конфигурация для использования стайлгайда Airbnb.
  • eslint-plugin-import предназначен для поддержки синтаксиса импорта/экспорта и управления путями к файлам. Подробнее можно прочитать в документации плагина.
  • eslint-plugin-jsx-a11y проверяет доступность JSX-кода.
  • eslint-plugin-prettier позволяет ESLint и Prettier работать вместе.
  • eslint-plugin-react добавляет специфические настройки линтинга для проектов React.

В этой статье не рассматривается модульное тестирование с помощью Jest/Enzyme. Но если вы его используете, вам могут пригодиться также пакеты eslint-config-jest-enzyme и eslint-plugin-jest.

С плагинами husky и lint-staged мы разберемся позже в разделе, посвященном автоматизации, а сейчас приступим к работе.

В корне приложения разместите файл конфигурации .eslintrc.js:

а также файл .eslintignore:

Разберем каждую секцию файла конфигурации отдельно:

  • env (environment) – среда выполнения кода. Это свойство подключает глобальные переменные и доступные фичи ECMAScript 6, браузера и Node.js.  Доступно множество сред, полный список – в документации.
  • extends – дополнительные конфигурации, последовательно расширяющие друг друга.
  • plugins – плагины, определяющие способ форматирования кода.
  • parser и parserOptions – в качестве дефолтного парсера ESList использует Espree, но мы подключаем babel, поэтому нужно подключить Babel-ESLint и настраиваем его для проекта.
  • rules – в этой секции можно переопределить любые правила.

В файле .eslintignore можно указать адреса, которые будут игнорироваться линтером, например, файлы git или конфигурация редактора кода.

Перейдем к новым командам из секции scripts:

  • yarn lint – проходит через все файлы в директории src/ и составляет подробный журнал ошибок, которые вы затем можете исправить.
  • yarn lint:write – действует аналогично, но ошибки исправляет самостоятельно, оставляя только чистый код.

Что ж, если вы дошли до этого раздела, вы молодец!

Автоматизация

Итак, мы настроили Prettier и ESLint, но чтобы запустить их, приходится каждый раз вводить команду в терминале. Было бы здорово автоматически проверять и форматировать код при сохранении файла в редакторе, а также при каждом коммите.

Линтинг при сохранении файла

Если вы работаете в  VS Code, это очень просто. Нужно лишь установить расширение ESLint. Загрузите его отсюда или откройте поиск с помощью ctrl+shift+x и введите там eslint.

После установки, создайте в корне проекта папку с именем .vscode, а внутри него – файл settings.json.

  • параметр editor.formatOnSave имеет значение false, чтобы конфигурация редактора не конфликтовала с ESLint и Prettier.
  • eslint.autoFixOnSave устанавливает проверку при каждом сохранении файла.

Работать стало удобнее, можно продолжать автоматизацию.

Husky

Husky дает возможность зацепиться за хуки git. Это значит, что вы можете выполнять некоторые действия перед тем, как изменения будут закоммичены и отправлены в удаленный репозиторий.

Сначала установите пакет husky:

и добавьте этот фрагмент в файл package.json:

Теперь перед каждым коммитом и пушем будет выполняться определенный скрипт или команду, например, запускать тесты или линтить код.

Lint-staged

Lint-staged помогает запускать линтеры в файлах, подготовленных к коммиту, чтобы неформатированный код не попадал в репозиторий.

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

Установите пакет lint-staged:

и добавьте этот фрагмент в файл package.json:

Теперь прежде чем выполнить команду git add и добавить файл в область подготовленных изменений, инструмент запустит скрипт линтинга для всех файлов с расширениями .js и .jsx.

Husky + Lint-staged

Финальный вариант файла package.json:

Теперь каждый раз, когда вы сохраняете изменения:

весь код будет проверен и отформатирован, так что ваш репозиторий будет чист.

EditorConfig

В корне проекта создайте файл .editorconfig и добавьте в него этот код:

Конфигурация EditorConfig применима для многих редакторов. Этот пример управляет пробелами и табуляцией, максимальной длиной строки и стилем перевода строки.

Исходный код проекта вы можете найти в этом git-репозитории.

Оригинал: These tools will help you write clean code, автор Adeel Imran.

Пишите чистый код:

Хотите получать больше интересных материалов с доставкой?

Подпишитесь на нашу рассылку:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




1 комментарий

Оставьте комментарий