@mmg-dev/stencil-eslint-prettier-config v1.0.4

@mmg-dev/stencil-eslint-prettier-config

Gemeinsame ESLint- und Prettier-Konfiguration für Stencil.js-Projekte

Installation

1. mit npm, pnpm installieren npm install -g pnpm
2. node_modules vom playground + jeweiliger WC löschen, wenn noch per npm installiert war
3. sauberes pnpm i im playground + in jeder WC

# Mit pnpm
pnpm add -D @mmg-dev/stencil-eslint-prettier-config

Erweitere die package.json:

{
  "prettier": "@mmg-dev/stencil-eslint-prettier-config/prettier",
  "scripts": {
    "lint": "eslint 'src/**/*.{ts,tsx}'",
    "lint:fix": "eslint --fix 'src/**/*.{ts,tsx}'",
    "format": "prettier --write 'src/**/*.{ts,tsx,css,scss}'",
    "prepare": "husky"
  },
}

Eslint (9.x)

Erstelle die Datei eslint.config.mjs:

import sharedConfig from './node_modules/@mmg-dev/stencil-eslint-prettier-config/eslint.config.mjs';

const configWithFilesPattern = sharedConfig.map((config) => ({
  ...config,
  files: ['**/*.{ts,tsx}'],
}));

export default [
  ...configWithFilesPattern,
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parserOptions: {
        tsconfigRootDir: '.',
        project: './tsconfig.json',
      },
    },
  },
];

VSCode-Einrichtung

WICHTIG Windows-User:

• wsl(Powershell)
• Per shell zum entsprechenden Repo wechseln (nicht ~/Username!) z.B. \home\USERNAME\Frontend\WebComponents\gbw-accordion
• code . ausführen

Installiere diese Extensions:

• ESLint: dbaeumer.vscode-eslint
• Prettier: esbenp.prettier-vscode

Füge diese Einstellungen zu deiner .vscode/settings.json hinzu:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": ["typescript", "typescriptreact"],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Lokale Entwicklung

In _npm-packages-Verzeichnis:

pnpm link --global

(Dann ist das Paket lokal verfügbar)

Im Stencil-Projekt (z.B. gbw-accordion):

pnpm link --global @mmg-dev/stencil-eslint-prettier-config

Verknüpfung in der package.json:

"@mmg-dev/stencil-eslint-prettier-config": "file:../_npm-packages/stencil-eslint-prettier-config",