Пожалуйста, посетите обновленную версию этого сообщения



Настройте ESLint и Prettier вместе для проектов React и React-native в Visual Studio Code
Руководство по настройке eslint с конфигурацией airbnb для линтинга и prettier для форматирования кода для реакции и реакции -врожденный в… medium.com



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

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

В этом процессе настройки предполагается, что мы используем приложение create-response-app для создания нового приложения React.

Шаг 1

  • Установите плагин ESLint Visual Studio Code от Дирка Баумера
  • Установить eslint глобально
npm install eslint -g
  • Установите плагин Prettier Visual Studio Code от Эсбена Петерсена

Шаг 2

  • Добавить следующие зависимости разработчиков
yarn add eslint-config-prettier eslint-plugin-prettier prettier  -D

Шаг 3

  • Создайте файл .eslintrc в корневой папке проекта.
  • Добавьте к нему следующие строки
{
  "extends": ["react-app", "plugin:prettier/recommended"]
}

Шаг 4

  • Обновите пользовательские настройки Visual Studio Code. Настройки кода Visual Studio можно вызвать с помощью Command +,
  • А затем добавьте следующие строки
"editor.formatOnSave": true,
"[javascript]": {
  "editor.formatOnSave": false,
},
"prettier.disableLanguages": [
  "js"
],
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"files.autoSave": "onFocusChange"

Это приведет к форматированию кода при сохранении файла или изменении фокуса.

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

Шаг 5. Дополнительный шаг для настройки ловушки перед фиксацией с использованием хаски, поэтапно и довольно быстро при фиксации файлов.

  • установить хаски, поэтапно и довольно быстро, как зависимости разработчика
yarn add husky lint-staged pretty-quick -D
  • добавить строчку в package.json в разделе скриптов
"scripts": {
  "precommit": "pretty-quick --staged"
}

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