Как интегрировать Prettier с ESLint и stylelint

1656571089 kak integrirovat prettier s eslint i stylelint

автор Абхишек Джайн

или Как больше никогда не беспокоиться о стилизации кода

2NnxX8zdoJFw9uQM9ez2epHwX3Z26IQQjmt-
Фото NordWood Themes на Unsplash

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

Но со временем это может вызвать определенные трудности для разработчиков команды, которые считают дополнительным умственным бременем вручную добавлять точку с запятой, новую строку, отступления и т.д. только для соответствия правилам lint. Здесь на помощь приходит такой инструмент форматирования кода как Prettier.

Prettier можно настроить на автоматическое форматирование кода в соответствии с определенными правилами. Если вы используете VSCode, вы даже можете форматировать свой код при нажатии «Сохранить» (я уверен, что существуют способы настроить это в других редакторах, но я не рассматривал это).

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

Давайте теперь погрузимся в шаг за шагом, как настроить все это, а также отформатировать весь существующий код в соответствии с правилами lint. Данное руководство предусматривает, что в вашем проекте уже настроен ESLint и stylelint .eslintrc и .stylelintrc файлы.

ЧАСТЬ 1: Форматирование существующей кодовой базы

Шаг 1

Установите pretier-eslint, инструмент, который форматирует JavaScript с помощью Prettier, а затем eslint --fix. The --fix это функция ESLint, которая пытается автоматически устранить некоторые проблемы за вас.

npm install --save-dev prettier-eslint

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

Шаг 2

Установите pretier-eslint-cli. Это инструмент CLI, который поможет вам одновременно запускать все файлы через Prettier-eslint.

npm install --save-dev prettier-eslint-cli

Шаг 3

Установите pretier-stylelint, инструмент, который форматирует ваш CSS/SCSS с помощью Prettier, а затем stylelint —-fix. Как и ESLint, --fix — это функция stylelint, которая пытается автоматически устранить некоторые проблемы за вас.

npm install prettier-stylelint --save-dev

Этот инструмент также пытается создать конфигурацию Prettier на основе конфигурации stylelint.

Обратите внимание, что в отличие от prettier-eslint вам не нужно устанавливать другой пакет для его CLI, поскольку он уже включен в него.

Шаг 4

Напишите сценарии внутри своего package.json таргетинг на существующие файлы в вашей кодовой базе, которые вы хотите запустить через prettier-eslint и pretier-stylelint.

"scripts": {
  "fix-code": "prettier-eslint --write 'src/**/*.{js,jsx}' ",
  "fix-styles": "prettier-stylelint --write 'src/**/*.{css,scss}' "
}

Как вы можете видеть, я нацеливаюсь на все мои существующие JS и JSX и все мои существующие CSS и SCSS соответственно.

The --write flag записывает изменения на месте для форматируемого файла. Поэтому будьте осторожны и убедитесь, что все существующие файлы находятся под контролем источника и что нет незафиксированных изменений.

Шаг 5

Запустите скрипты!

npm run fix-codenpm run fix-styles

Теперь вы можете зарегистрировать все эти новые изменения как один большой коммит (возможно даже от временного пользователя git, если вы не хотите загрязнять собственную историю git).

Часть 2: Настройка VSCode

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

Шаг 1

Установите расширение Prettier, ESLint и stylelint для VSCode:

Prettier – Форматировщик кода – Visual Studio Marketplace
Расширение для Visual Studio Code — плагин VS Code для более красивого/красивогоmarketplace.visualstudio.comESLint — Visual Studio Marketplace
Расширение для Visual Studio – интегрирует ESLint JavaScript в VS Code.marketplace.visualstudio.comstylelint — Visual Studio Marketplace
Расширение для кода Visual Studio — Современный CSS/SCSS/Less lintermarketplace.visualstudio.com

Шаг 2

Настройте несколько параметров VSCode:

"prettier.eslintIntegration": true – говорит Prettier использовать Prettier-eslint вместо Prettier

"prettier.stylelintIntegration": true – говорит Prettier использовать Prettier-stylelint вместо Prettier

"eslint.autoFixOnSave": false — нам не нужен ESLint, чтобы исправлять наш код прямо за нас, поскольку будет работать leptier-eslint eslint --fix все равно для нас.

"editor.formatOnSave": true — запускает Prettier с указанными выше параметрами при каждом сохранении файла, поэтому вам никогда не придется вручную вызвать команду форматирования VSCode.

Кроме того, вы можете проверить приведенные выше настройки рабочего места для управления источниками, чтобы другим членам команды было легче настроить свои редакторы. Вы можете сделать это, создав a .vscode папку в корне вашего проекта и поместив все вышеперечисленные правила в a settings.json файл.

По желанию вы можете указать Prettier игнорировать форматирование определенных шаблонов файлов. Для этого просто добавьте a .prettierignore файла к корню вашего проекта с указанием путей, которые следует игнорировать. Например:

strings.jsonscripts/*

И все это! Больше никогда не беспокоиться о стилизации кода?

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

Пожалуйста, напишите комментарий ниже для любой помощи, предложений и т.д.

Ссылки

https://prettier.io/docs/en/
https://stylelint.io/user-guide/
https://eslint.org/
https://github.com/prettier/prettier-vscode
https://github.com/prettier/prettier-eslint
https://github.com/prettier/prettier-eslint-cli
https://github.com/hugomrdias/prettier-stylelint
https://www.youtube.com/watch?v=YIvjKId9m2c

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *