Prettier

Быстро настройте Prettier для вашего проекта Astro!

Более красивый плагин для Astro

Начните с установки prettier и prettier-plugin-astro с помощью предпочитаемого менеджера пакетов:

npm

npm install --save-dev prettier prettier-plugin-astro

pnpm

pnpm add -D prettier prettier-plugin-astro

yarn

yarn add --dev prettier prettier-plugin-astro

Затем обновите Prettier config в корне проекта, чтобы включить плагин prettier-plugin-astro. В этом примере будет использоваться .prettierrc.json:

.prettierrc.json

{
  "plugins": ["prettier-plugin-astro"],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}

Вот и все. Выполните команду prettier --write . в выбранном вами менеджере пакетов, чтобы отформатировать все файлы astro в проекте.

Кроме того, если вы используете VSCode Prettier Extension, вы можете установить следующий VSCode Config в настройках пользователя/рабочего пространства:

.vscode/settings.json

{
  "prettier.documentSelectors": ["**/*.astro"],
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

и теперь Prettier отформатирует любой выбранный документ.

Добавление скрипта NPM

Вы можете использовать Prettier CLI с предпочитаемым вами менеджером пакетов, добавив следующие скрипты в package.json директории вашего проекта:

package.json

{
  "scripts": {
    "format:check": "prettier --check .",
    "format::write": "prettier --write ."
  }
}

Плагин Prettier для Tailwind CSS

При использовании интеграции Tailwind CSS существует еще одна зависимость dev для автоматической сортировки классов: prettier-plugin-tailwindcss.

Начните с установки prettier-plugin-tailwindcss с помощью предпочитаемого менеджера пакетов:

npm

npm install --save-dev prettier-plugin-tailwindcss

pnpm

pnpm add -D prettier-plugin-tailwindcss

yarn

yarn add --dev prettier-plugin-tailwindcss

Next, update the Prettier Config to include following plugins. This example will use .prettierrc:

.prettierrc.json

{
  "plugins": ["prettier-plugin-astro"],
  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}

Обязательно поместите плагин Tailwind CSS в конец. Кроме того, вам может потребоваться перезагрузить VSCode Window, если Prettier не работает так, как ожидалось.