Расширение возможностей разработчиков с помощью автоматического форматирования кода Prettier

Мое путешествие

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

Настройка ESLint очень помогла в этом. ESLint имеет множество правил форматирования кода, которые включены в конфигурацию Airbnb ESLint. Но этого было мало - ESLint не мог все отформатировать. Может быть, в будущем так и получится, но до тех пор Prettier помогал мне решить эту проблему.

Красивее

Prettier - старший брат ESLint по форматированию. Если ESLint фокусируется в основном на качестве кода с некоторым форматированием кода, Prettier фокусируется исключительно на форматировании кода. Он намного более мощный, полностью исправляется автоматически и практически не требует настройки.

Prettier против ESLint

Но ESLint также может выполнять форматирование кода с включенными правильными правилами. Так что на первый взгляд Prettier кажется лишним. Но Prettier гораздо более эффективен и охватывает гораздо более широкий круг вопросов форматирования кода.

Например, в ESLint есть max-len, что приведет к ошибке, если длина строки больше 80 (при использовании конфигурации по умолчанию). Следовательно, следующая строка вызовет ошибку, поскольку объект определяется в одной строке.

const badFormat1 = {
  // the object definition below is all in one line
  firstName: 'John', lastName: 'Doe', username: 'johndoe', email: '[email protected]', phone: '+1 (234) 567-8900', age: 32, sex: 'male',
};

Но у ESLint нет способа автоматически исправить эту ошибку. Кроме того, этот же объект можно определить разными способами, и ESLint не сможет его исправить.

const badFormat2 = {
    firstName: 'John',
    // the object definition below is all in one line
    lastName: 'Doe', username: 'johndoe', email: '[email protected]', phone: '+1 (234) 567-8900', age: 32, sex: 'male',
};

Это приводит к несогласованности, которую ESLint не может устранить.

Но Prettier может. Независимо от того, как мы форматируем приведенный выше пример, Prettier автоматически «преобразит» код следующим образом.

const goodFormat = {
    firstName: 'John',
    lastName: 'Doe',
    username: 'johndoe',
    email: '[email protected]',
    phone: '+1 (234) 567-8900',
    age: 32,
    sex: 'male',
  };

Это всего лишь один пример. У Prettier есть множество способностей, которых нет у ESLint.

Настройка

Подобно ESLint, Prettier позволяет вам настраивать параметры форматирования, такие как ширина линии, ширина табуляции, точки с запятой, кавычки, скобки и многое другое. Эти конфигурации сохраняются в файле конфигурации prettier.config.js.

// prettier.config.js
module.exports = {
  singleQuote: true,
  arrowParens: 'avoid',
};

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

Когда я впервые перешел на Prettier, у меня тоже было это беспокойство. Я привыкла к своему стилю, а стиль Prettier был новым и необычным. Однако через несколько недель я к этому привык. И я никогда больше об этом не думал (думать об этом, чтобы написать эту статью, не в счет).

Интеграция ESLint

Prettier также может быть интегрирован в ESLint, поэтому вам не нужен отдельный процесс для его запуска. Prettier предоставляет для этого eslint-plugin-prettier и eslint-config-prettier. Плагин prettier делает правило prettier доступным для ESLint, которое впоследствии активируется с помощью рекомендованного расширения.

// .eslintrc.js
module.exports = {
  extends: [
    'airbnb',
    'plugin:prettier/recommended'
    'prettier/react',
  ],
};

К сожалению, это более красивое правило может конфликтовать с существующими правилами стилей ESLint. Конфигурация ESLint prettier решает эту проблему, отключая конфликтующие правила. В приведенном выше примере расширение airbnb включает плагин React ESLint, поэтому расширение prettier/react необходимо для отключения этих правил. Prettier также обеспечивает отключение других плагинов ESLint, таких как @typescript-eslint/eslint-plugin и eslint-plugin-vue с расширениями prettier/@typescript-eslint и prettier/vue соответственно. Поскольку эти расширения отключают правила предыдущих расширений, убедитесь, что они установлены последними, чтобы они могли переопределить предыдущие расширения.

Миграция

Красивее это полностью поправимо автоматически! Это упрощает миграцию. Используя Prettier CLI, npx prettier --check --write или автоматическое исправление ESLint, npx eslint . --fix, все ваши ошибки, даже если их десятки тысяч, будут исправлены в одно мгновение. Это делает интеграцию Prettier невероятно простой.

Последние мысли

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

Ресурсы