Форматирование стиля кода с помощью Prettier в React Native

Ускорьте работу своей команды, положив конец дискуссиям о форматировании кода

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

Введите Prettier, эксперт по форматированию кода. Prettier автоматически форматирует ваш код Javascript и JSX в соответствии с набором стилей, широко принятых в сообществе. Он также отлично работает с React Native и существующими инструментами.

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

Почему форматер кода

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

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

Основы

Начать работу с Prettier очень просто. Я предпочитаю сохранять версию локально в свой проект с помощью npm или yarn:

// npm
npm i --save-dev prettier
// yarn
yarn install --dev prettier

Затем я добавляю сценарий в свой package.json, чтобы настроить локальный двоичный файл для запуска Prettier в моем проекте. Примечание. Важно заключать капли в кавычки, чтобы Prettier разворачивал их.

"scripts": {
  "prettier": "prettier 'src/**/*.js'"
}

Вам нужно будет изменить скрипт, чтобы он соответствовал исходным файлам вашего проекта. Если есть правила, которые вы не хотите применять к своему проекту, вы можете дать Prettier параметры. Хотя их можно передавать как флаги интерфейса командной строки, мы добавили параметры в наш package.json.

"prettier": {
  "jsxBracketSameLine": true,
  "semi": false,
  "singleQuote": true
}

На этом этапе вы сможете запустить Prettier с npm run prettier и увидеть все изменения, которые он вносит в ваш проект. 🎉

Интеграция с ESLint

В нашем проекте у нас уже был включен ESlint, и мы все еще хотели получать уведомления об этих предупреждениях и ошибках. К счастью, есть несколько плагинов, которые упрощают интеграцию.

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

// npm
npm i --save-dev eslint-plugin-prettier eslint-config-prettier
// yarn
yarn install --dev eslint-plugin-prettier eslint-config-prettier

Затем мы модифицируем наш .eslintrc, чтобы использовать эти дополнения. Примечание. prettier должен стоять после любых других конфигураций, определенных в extends.

"extends": [
  "standard",
  "prettier",
  "prettier/flowtype",
  "prettier/react",
  "prettier/standard"
],
"plugins": [
  "react",
  "react-native",
  "flowtype",
  "prettier",
  "standard"
],

Мы также добавили рекомендуемый сценарий для сообщения .eslintrc правил, конфликтующих с Prettier. После запуска мы удалили все конфликтующие правила, чтобы позволить Prettier выполнять работу.

"scripts": {
    "eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check"
  }

Автоматическое форматирование нового кода

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

Чтобы наш код форматировался во время работы, мы добавили Prettier plugin for VSCode. Большинство редакторов должны иметь плагины Prettier, доступные для включения аналогичного формата при сохранении.

Предполагая, что вы используете git, мы проверяем, отформатированы ли все поэтапные файлы с помощью шага предварительной фиксации. Мы будем использовать husky и lint-staged, чтобы добавить это в наш проект.

// npm
npm i --save-dev husky lint-staged
// yarn
yarn install --dev husky lint-staged

Затем добавляем шаг в наш package.json:

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "prettier --write",
      "git add"
    ]
  }
}

Вот и все! С этими изменениями вы получите лучшее, что предлагает Prettier. Нам действительно нравятся изменения, внесенные в наш проект, и то, сколько времени мы экономим, не беспокоясь о форматировании при написании кода.

Спасибо за прочтение!

Подпишитесь на нашу еженедельную новостную рассылку React Native, чтобы каждую неделю получать лучшие ресурсы по React Native в свой почтовый ящик. 🙂

Форматирование стиля кода с помощью Prettier в React Native