# Technische Informationen
# Komponenten
Der Living Styleguide ist mit VuePress (opens new window) gebaut.
Zusätzlich nutzt er tailwindcss (opens new window) und PostCSS (opens new window).
Zum Einsatz kommen ebenfalls alpinejs (opens new window) und der state-Layer spruce (opens new window) weil typescript (opens new window) im Frontend verwendet werden soll (anstatt Javascript).
Für Icons sollen die Heroicons (opens new window) herangezogen werden.
Zur schnelleren Programmierung wird das Balde UI Kit (opens new window) verwendet und für die Icons (Heroicons), die Blade Icons (opens new window).
# Tools
Es wird Stylelint (opens new window) zum Linting genutzt.
stylelintrc.js
module.exports = {
extends: ['stylelint-config-recommended', 'stylelint-prettier/recommended'],
rules: {
'at-rule-no-unknown': [
true,
{
ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen'],
},
],
'declaration-block-trailing-semicolon': null,
'no-descending-specificity': null,
},
};
# Visual Studio Code (Plugins)
Für Arbeiten am Frontend empfehlen wir Visual Studio Code (opens new window), welches mit zahlreichen Plugins zur nahezu perfekten Entwicklungsumgebung modifiziert werden kann. Empfohlene Plugins sind:
- EditorConfig (opens new window) - synchronisieren der Configs des Editors
- Stylelint (opens new window) - ein Linter für Styles
- Headwind (opens new window) - sortiert die Tailwind-Klassen (im
class-Attribut) - Tailwind CSS IntelliSense (opens new window)
- language-postcss (opens new window) - Syntaxhighlighting für PostCSS (opens new window)
- Prettier - Code formatter (opens new window) - CodeFormatter für Frontend-Dateien
- Todo Tree (opens new window) - Ermöflicht leichtes finden von
TODOs im Code - (optional) Highlight Matching Tag (opens new window)
- (optional) Hero Icons (opens new window) - ruft die Hero Icons (opens new window) in VSCode auf