Prettier, ESLint, Husky, Lint-Staged и EditorConfig: инструменты для написания аккуратного кода

[Aquahawk]

Прикольно, можно переводы сравнить. habr.com/company/skillbox/blog/428231

[ru_vds]

Всё же решили оставить перевод, так как уже потратили на него ресурсы, а так может кто не видел. Но да, нам было бы интересно узнать, чей перевод лучше :)

[KhodeN]

А можно поставить WebStorm, там все эти инструменты интегрированы. Плюс настройка форматирования на порядок гибче.

[RuGrof]

Но не все используют WebStrom.

[KhodeN]

Там встроенный аналог prettifier (гораздо гибче), и inspect code (он не устарел, он просто другой). Остальное — да, органично интегрируется из node_modules.
Недавно появилась (в EAP) фича по кастомной сортировки css свойств.
Я пытался серьезно слезть с иглы jetbrains. Месяц сидел на VS Code. Но постоянно плевался, не находя нужные мне фичи. Он даже JS внутри HTML при выравнивании не учитывает настройки и выравнивает по своему. Обвешиваться десятками левыми расширениями на каждый чих тоже надоело.

[KhodeN]

Pretifier — обычный Format Code. Все настройки для неё в ветке «Code Style» для всех языков.

Inspect Code — это фича чисто jetbrains (она появилась задолго до любого линтера, кроме разве что крокфордовского JSLint).
В дополнение к ней есть интеграция с JSLint, JSHint, Closure Linter, JSCS, ESLint, TSLint (вот они могут браться из node_modules, и учитываются настройки из файлов-конфигов для них в проекте)

.editorconfig тоже встроенная поддержка

Но js внутри html — это плохо.

vue.js и svelte.js c Вами не согласятся) Есть такой паттерн «Single File Components», когда компонент представляет собой один файл с шаблоном, логикой и стилями

[KhodeN]

Я находил в настройках webstorm всё, что хотел. Там сотни параметров. Prettier такое даже не снилось. Я не против в принципе существования prettier, он лучше, чем вообще ничего. Но с форматированием в webstorm он находится в разных весовых категориях.

Проблема в том, что парсинг template string требует статического анализа. Поэтому jsx пока выигрывает.

Этот анализ уже реализован и во vue, и в svelte. Они хотя бы не требуют писать что-то похожее на html, как в JSX, который якобы html, но ненастоящий.

Я думаю, дальше дискутировать смысла нет, мы оба останемся при своих мнениях.

[Frimko]

вот только WebStorm уже как с год не может нормально интегрировать FlowJS с его магическими функциями. Народ бьется об ишью в их трекере, просит, умоляет. А брейнсам фиолетово.

[YemSalat]

Стоит так же отметить https://standardjs.com/
Линт + prettier в одном флаконе.

[kost]

Представьте свои ощущения, если бы к вам попал код проекта размером в 20000 строк, который вам надо было бы проверить и улучшить. А теперь представьте себе, что вам пришлось бы это делать вручную. Такая работа заняла бы, наверное, месяц. А с помощь вышеописанных средств автоматизации всё это делается секунд за тридцать.

Теперь представьте себе pull request с этими изменениями.