Prettier für Astro einrichten

Was ist Prettier

Was ist Astro

Wie lässt sich Prettier für Astro nutzen

Um Prettier in Astro zu nutzen, benötigst du das npm-Package "prettier-plugin-astro" zusammen mit "prettier". Beide lassen sich wie folgt über npm installieren – dabei reicht es, sie als Dev-Dependency einzubinden, deswegen --save-dev oder -D.

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

Als nächstes benötigen wir eine .prettierrc.json Datei, direkt im Root Verzeichnis. Hier kommen die Konfigurationen von Prettier und Astro hinein.

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

Das wars. Nun kannst du mit dem Script Command prettier --write den Code-Formatter laufen lassen. Als Hilfe kannst du dir auch folgende Scripte bauen: 

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

Wie lässt sich Prettier für Astro in VS Code mit Format on Save nutzen

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

Das wars. Nun läuft der Code Formatter jedesmal wenn du speicherst automatisch.