М. Пацианский - Основы Redux

реакта.

Исходный код

8

ESLint и Prettier

ESLint и Prettier
Кратко о библиотеках:

ESLint
Линтер - это помощник по части "здоровья" кода. Вы определяете список правил и в
дальнейшем, при настроенном плагине в вашем редакторе, он как Microsoft Word
"проферка орфографии" проверяет все, что вы написали.
Например, определили переменную, но нигде не используете? Сработает правило: nounused-vars (долой неиспользуемые переменные) и переменная будет подчеркнута.

Когда вы видите "подчеркивание", и после наведения видите в скобочках название
правила - не нужно бежать гуглить. Нужно идти на сайт eslint.org и там в "поиск"
вставлять текст ошибки, будет быстрее.

9

ESLint и Prettier

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

10

ESLint и Prettier

Стало:

Я думаю преимущества очевидны, поэтому давайте настроим необходимые
ускорители повседневной разработки.

Настройка
Линтер встроен в create-react-app, но для работы в связке с Prettier, а так же для
подсветки кода во время написания в VS Code нужна небольшая донастройка.
Для начала установите пакеты:
npm install eslint-config-prettier eslint-plugin-prettier prettier lint-staged husky -save-dev

Все пакеты в целом понятны зачем, кроме lint-staged и husky

11

ESLint и Prettier

husky - упрощает работу с git hooks ("пре-коммит" (момент, когда вы собираетесь
делать коммит) легко настроить с помощью этой "собаки")
lint-staged - пакет, который позволяет вам сделать обработку командой из
терминала только тех файлов, которые собираются улететь в коммит.
Husky и lint-staged - сладкая парочка для борьбы с плохим кодом в нашем
репозитории. Например, мы можем настроить, что если ESLint вернул ошибку, то
коммит будет автоматически отменен. Вернемся к этому позже.
Итак, настройка eslint, создайте следующий файл в корне проекта:
.eslintrc
{
"extends": [
"react-app",
"prettier"
],
"rules": {
"jsx-quotes": [
1,
"prefer-double"
]
},
"plugins": [
"prettier"
]
}

Достаточно скромный конфиг, который "наследует" стандартные правила (их много) из
react-app и prettier (это глобальные конфиги, один встроен в create-react-app, второй
мы установили посредством пакета eslint-config-prettier)
Затем я переопределил одно правило: jsx-quotes (для имен классов внутри JSX будут
ставиться двойные кавычки. Не могу сказать, насколько это важно на сегодняшний
день, но раньше у меня были конфликты с преттиром без этого правила).
Вы можете переопределить в списке любые правила, которые вас интересуют. Список
можно найти в документации, но проще просто начать работать и по ходу пьесы
смотреть на "подчеркивания". Те, которые вас не устраивают - переопределяйте.
Последняя опция в конфиге - использование плагинов. Мы используем плагин prettier
(пакет eslint-plugin-prettier), чтобы не было конфликтов между "помощниками"
(напоминаю, у нас их два: prettier и eslint).
После настройки конфига, вам нужно настроить ваш редактор. Я приведу пример
только для Visual Studio Code.

12

ESLint и Prettier

Добавьте в файл с настройками, следующие строки:
"editor.formatOnPaste": false,
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": true,
},
"[html]": {
"editor.formatOnSave": false,
},
"[json]": {
"editor.formatOnSave": false,
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,

Напоследок, для корректной работы вам потребуется парочка плагинов из маркетплейса (eslint и prettier).
Мой список плагинов:

Конфиг может быть настроен различными способами, например, взгляните на эти два
видео:
Add ESLint & Prettier to VS Code for a Create React App
How to Setup VS Code + Prettier + ESLint

Настроим prettier (нам так же нужен конфигурационный файл):
.prettierrc

13

ESLint и Prettier

{
"useTabs": false, // использовать табы? нет (я за пробелы)
"printWidth": 80, // длина строки - 80
"tabWidth": 2, // длина "таба" - 2 пробела
"singleQuote": true, // использовать одинарные кавычки - да!
"trailingComma": "es5", // запятая в последней строке - да
"jsxBracketSameLine": false, // закрывающийся jsx в этой же --">