Более красивая конфигурация с lint-staged и vs-code.

  1. Установить расширение Prettier для VS-Code: Ссылка
  2. Установить pre-commit конфиг хука с lint-staged npm зависимостью: Ссылка

После установки prettier plugin в vs-code мы можем отформатировать код с помощью сочетания клавиш формата CTRL+SHIFT+I или при автосохранении.

Но проблема в том, что после установки плагина prettier он будет форматироваться в конфигурации по умолчанию, определенной в prettier plugin of VS-Code. Что будет конфликтовать с хуком предварительной фиксации автоматического форматирования на lint-staged.

Таким образом, если у нас есть плагин, такой как pre-commithook, для каждой фиксации или сборки, мы можем видеть, что формат отличается от кода, созданного во время сборки, до vscodeformatted кода, и это приведет к большому количеству изменений кода в git.

Чтобы исправить это, мы можем определить один файл .prettierrc.

Мы можем определить все правила, необходимые для форматирования, затем поместить этот файл в корень проекта и повторно использовать его снова в pre-commit ловушке package.json на этапе сборки или фиксации.

Вот тот, который мы используем https://prettier.io/docs/en/precommit.html#option-1-lint-staged-https-githubcom-okonet-lint-staged

Перехватчик Pre Commit (huskyи lint-staged)

Перед каждым коммитом pre-commit ловушка будет вызываться lint-staged плагином, который может выполнить проверку для eslint и prettier или любого другого конвейерного процесса.



typicode/husky
🐶 Git hooks — это просто. Внесите свой вклад в разработку typeicode/husky, создав учетную запись на GitHub.github.com



Пример package.json для более красивой настройки с хуком pre-commit

В приведенном выше фрагменте мы видим, что lint-staged — это шаг, вызываемый при каждом коммите, который будет форматировать код с шагом cs-format, который, в свою очередь, не что иное, как плагин формата prettier.

Каждый раз, когда запускается какой-либо коммит, lint-staged сначала lint делает его, затем делает prettify, а затем добавляет в реестр git.

На шаге cs-format мы видим, что он использовал файл .prettierrc для более красивых правил. и тот же файл будет использоваться vs-code для конфигурации CTRL+SHIFT+I или autoFormat.

Надеюсь, вы найдете решение полезным…