open-index/open-npm huggingface dataset:
npm package: @mmg-dev/webpipeline-stencil-eslint-prettier-config
Description: Common ESLint and Prettier configuration for Stencil.js projects
Author: webpipeline
Latest version: 1.0.1

# @mmg-dev/webpipeline-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

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

Erweitere die `package.json`:

```json
{
  "prettier": "@mmg-dev/webpipeline-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`:

```js
import sharedConfig from './node_modules/@mmg-dev/webpipeline-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:

```json
{
  "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:
```bash
pnpm link --global
```
(Dann ist das Paket lokal verfügbar)

Im Stencil-Projekt (z.B. gbw-accordion):
```bash
pnpm link --global @mmg-dev/webpipeline-stencil-eslint-prettier-config
```

Verknüpfung in der package.json:
```bash
"@mmg-dev/webpipeline-stencil-eslint-prettier-config": "file:../_npm-packages/webpipeline-stencil-eslint-prettier-config",
```