Введение и основы использования Prettier

внешний интерфейс Yarn NPM ESLint

Prettier

Prettier означает «красивый, умный» на китайском языке, а также это название популярного инструмента форматирования кода, который анализирует код и перепечатывает правильно сформированный код, используя правила, которые вы устанавливаете сами.

Prettier имеет следующие преимущества:

  1. Настраиваемый
  2. Поддерживает несколько языков
  3. Интеграция с большинством редакторов
  4. Краткие элементы конфигурации

Использование Prettier при проверке кода избавляет от необходимости обсуждать стили кода, экономя время и усилия. Давайте используем официальный пример, чтобы кратко понять, как это работает.

Input

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

Output

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

Установить

использовать пряжу

yarn add prettier --dev --exact
# or globally
yarn global add prettier

Используйте NPM

npm install --save-dev --save-exact prettier
# or globally
npm install --global prettier

Использовать с ESLint

Многие проекты будут использовать ESLint для улучшения качества кода, есть два способа интеграции Prettier и ESLint, вы также можете использовать их по отдельности или вместе.

Запуск Prettier с ESLint

Если вы уже используете ESLint в своем проекте и хотите выполнять все проверки кода с помощью одной команды, вы можете использовать ESLint для запуска Prettier за вас.

просто используйтеeslint-plugin-prettierчтобы добавить Prettier в качестве конфигурации правила для ESLint.

yarn add --dev prettier eslint-plugin-prettier

.eslintrc.json

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Закройте правила форматирования ESLint

Независимо от того, запускаете ли вы Prettier через ESLint или запускаете два инструмента по отдельности, вы, вероятно, хотите, чтобы каждая проблема с форматом возникала только один раз, и вы особенно не хотите, чтобы ESLint сообщался, просто имея отличия и предпочтения от Prettier. "вопрос".

Таким образом, вы, вероятно, захотите отключить конфликтующие правила (при сохранении других правил, которые не волнуют Prettier), самый простой способ - использоватьeslint-config-prettier. Его можно добавить в любую конфигурацию ESLint.

yarn add --dev eslint-config-prettier

.eslintrc.json

{
  "extends": ["prettier"]
}

Более подробная информация доступна черезДокументацияпроверить.

Категории