[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"portal-settings:stajic:de":3,"public-menus:all":37,"post:streamlining-code-quality-testing-with-eslint-and-prettier:de":204,"related:post:streamlining-code-quality-testing-with-eslint-and-prettier:de:1":560},{"statusCode":4,"data":5,"message":36},200,{"tenantId":6,"lang":7,"defaultLang":7,"siteUrl":8,"contactEmail":9,"brandName":10,"logoUrl":11,"siteName":10,"siteDescription":12,"ogImage":9,"robotsIndex":13,"socialLinks":9,"reservedSlugs":9,"seoPolicy":14},"stajic","de","https:\u002F\u002Fstajic.de",null,"Stajic Platform","\u002FLogo_Planet.svg","Stajic Portal",true,{"branding":15,"relatedContent":16,"crossDomainLinks":17},{"logoUrl":11},{"enabled":13},[18,21,24,27,30,33],{"url":19,"label":20,"isActive":13,"showInFooter":13,"includeInSameAs":13},"https:\u002F\u002Ffigure.rocks","figure.rocks",{"url":22,"label":23,"isActive":13,"showInFooter":13,"includeInSameAs":13},"https:\u002F\u002Floving.rocks","loving.rocks",{"url":25,"label":26,"isActive":13,"showInFooter":13,"includeInSameAs":13},"https:\u002F\u002Fbazify.com","bazify.com",{"url":28,"label":29,"isActive":13,"showInFooter":13,"includeInSameAs":13},"https:\u002F\u002Fbazify.de","bazify.de",{"url":31,"label":32,"isActive":13,"showInFooter":13,"includeInSameAs":13},"https:\u002F\u002Fbazify.at","bazify.at",{"url":34,"label":35,"isActive":13,"showInFooter":13,"includeInSameAs":13},"https:\u002F\u002Fbazify.ba","bazify.ba","Portal settings resolved",[38,44],{"id":39,"name":40,"location":41,"isActive":13,"isDefault":42,"items":43},1,"main-navigation","header",false,[],{"id":45,"name":46,"location":47,"isActive":13,"isDefault":13,"items":48},4,"main-menu","sidebar",[49,65,78,92,102,117,132],{"id":50,"title":51,"url":59,"target":60,"icon":61,"isActive":13,"type":62,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":63,"portfolioId":9,"children":64},"item-18",{"de":52,"en":53,"es":54,"fr":55,"it":53,"ru":56,"sr":57,"zh":58},"Startseite","Home","Inicio","Accueil","Главная","Почетна","首页","\u002Ffull-stack-web-developer-munich-performance-seo-and-maintainable-builds","_self","i-lucide-home","page",111,[],{"id":66,"title":67,"url":74,"target":60,"icon":75,"isActive":13,"type":62,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":76,"portfolioId":9,"children":77},"item-22",{"de":68,"en":68,"es":69,"fr":68,"it":70,"ru":71,"sr":72,"zh":73},"Vision","Visión","Visione","Видение","Визија","想象","\u002Fueber-uns-webdesign-muenchen-webaplikation","i-lucide-eye",113,[],{"id":79,"title":80,"url":88,"target":60,"icon":89,"isActive":13,"type":62,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":90,"portfolioId":9,"children":91},"item-19",{"de":81,"en":82,"es":83,"fr":82,"it":84,"ru":85,"sr":86,"zh":87},"Leistungen","Services","Servicios","Servizi","Услуги","Услуге","服务","\u002Fservices-dienstleistungen-muenchen","i-lucide-wrench",116,[],{"id":93,"title":94,"url":98,"target":60,"icon":99,"isActive":13,"type":62,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":100,"portfolioId":9,"children":101},"item-23",{"de":95,"en":95,"es":95,"fr":95,"it":95,"ru":96,"sr":96,"zh":97},"Blog","Блог","博客","\u002Fblog","i-lucide-book-open",112,[],{"id":103,"title":104,"url":113,"target":60,"icon":114,"isActive":13,"type":62,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":115,"portfolioId":9,"children":116},"item-32",{"de":105,"en":106,"es":107,"fr":108,"it":109,"ru":110,"sr":111,"zh":112},"Neue Technologien","New Technologies","Nuevas tecnologías","Nouvelles technologies","Nuove tecnologie","Новые технологии","Нове технологије","新技术！","\u002Fneue-webtechnologien","i-lucide-sparkles",122,[],{"id":118,"title":119,"url":128,"target":60,"icon":129,"isActive":13,"type":62,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":130,"portfolioId":9,"children":131},"item-20",{"de":120,"en":121,"es":122,"fr":123,"it":124,"ru":125,"sr":126,"zh":127},"Kontakt","Contact us!","Contacto","Contact","Contatto","Контакт","Контактирајте нас","联系我们！","\u002Fcontact","i-lucide-mail",115,[],{"id":133,"title":134,"url":143,"target":60,"icon":144,"isActive":13,"type":62,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":145,"portfolioId":9,"children":146},"item-21",{"de":135,"en":136,"es":137,"fr":138,"it":139,"ru":140,"sr":141,"zh":142},"Unsere Arbeit","Our Work","Nuestro trabajo","Nos réalisations","I nostri lavori","Наши работы","Наши радови","文件夹","\u002Fportfolio","i-lucide-briefcase",114,[147,160,174,180,192],{"id":148,"title":149,"url":143,"target":60,"icon":158,"isActive":13,"type":62,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":145,"portfolioId":9,"children":159},"item-24",{"de":150,"en":151,"es":152,"fr":153,"it":154,"ru":155,"sr":156,"zh":157},"Alle Projekte","All Projects","Todos los proyectos","Tous les projets","Tutti i progetti","Все проекты","Сви пројекти","所有项目","i-lucide-grid-3x3",[],{"id":161,"title":162,"url":170,"target":60,"icon":171,"isActive":13,"type":172,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":9,"portfolioId":9,"children":173},"item-29",{"de":163,"en":164,"es":165,"fr":166,"it":167,"ru":168,"sr":169,"zh":142},"Local Roots, Global Reach","Local Roots - Global Reach","Empresa local ","Entreprise locale","Azienda locale","Местная компания","Локално предузеће глобално тржиште","\u002Fportfolio\u002Flocal-roots-global-reach-communication-media-systems-for-modern-business","i-lucide-folder","custom",[],{"id":175,"title":176,"url":178,"target":60,"icon":171,"isActive":13,"type":172,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":9,"portfolioId":9,"children":179},"item-28",{"de":177,"en":177,"es":177,"fr":177,"it":177,"ru":177,"sr":177,"zh":177},"Solr Suggester","\u002Fportfolio\u002Fsolr-fuzzy-suggester-und-solr-infix-suggester-abfrage-ueber-ajax-und-filterung",[],{"id":181,"title":182,"url":190,"target":60,"icon":171,"isActive":13,"type":172,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":9,"portfolioId":9,"children":191},"item-27",{"de":183,"en":184,"es":185,"fr":186,"it":187,"ru":188,"sr":189,"zh":184},"Firmenwebseite SEO","Company Website SEO","Sitio web corporativo SEO","Site web d’entreprise SEO","Sito web aziendale SEO","Корпоративный сайт SEO","Пословна веб-страница SEO","\u002Fportfolio\u002Fseo-sem-branding-mobile-webseite-muenchen",[],{"id":193,"title":194,"url":202,"target":60,"icon":171,"isActive":13,"type":172,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":9,"portfolioId":9,"children":203},"item-31",{"de":195,"en":196,"es":197,"fr":198,"it":199,"ru":200,"sr":201,"zh":196},"Digitalisierungsportal","Digitalization Portal","Portal de digitalización","Portail de numérisation","Portale di digitalizzazione","Портал цифровизации","Портал за дигитализацију","\u002Fportfolio\u002Fdigitalisierungsportal-archiv-museum-bibliothek-ead-lido-mets-mods",[],{"statusCode":4,"data":205,"message":559},{"id":206,"title":207,"slug":208,"content":209,"contentJson":210,"excerpt":320,"featuredImage":321,"featuredImageAlt":322,"featuredImageCaption":9,"featuredImageTitle":9,"featuredImageCopyright":9,"featuredImageAuthor":9,"featuredImageSourceUrl":9,"featuredImageLicense":9,"featuredImageIsAiGenerated":42,"status":323,"publishedAt":324,"createdAt":325,"updatedAt":326,"seoLocalePaths":327,"categories":336,"author":337,"translations":342},"380","Optimierung der Codequalität: Testen mit ESLint und Prettier","streamlining-code-quality-testing-with-eslint-and-prettier","{\"time\":1709894400000,\"blocks\":[{\"id\":\"intro_h2\",\"data\":{\"text\":\"Optimierung der Codequalität: Testen mit ESLint und Prettier\",\"level\":2},\"type\":\"header\"},{\"id\":\"intro_p1\",\"data\":{\"text\":\"Moderne Softwareentwicklung erfordert eine konsequente Aufmerksamkeit für Codequalität und Konsistenz. Mit wachsender Projektgröße und zunehmender Teamstärke wird die Pflege einer einheitlichen Codebasis zu einer erheblichen Herausforderung. Stilabweichungen, subtile Fehler oder die Nichteinhaltung bewährter Praktiken können technische Schulden verursachen und Entwicklungszyklen verlangsamen. ESLint und Prettier setzen genau hier an und bieten automatisierte Lösungen für Code-Linting und Formatierung. Die Integration dieser Werkzeuge in Entwicklungs- und Test-Workflows ist nicht nur eine Best Practice, sondern eine grundlegende Voraussetzung für eine nachhaltige Projektgesundheit.\"},\"type\":\"paragraph\"},{\"id\":\"intro_p2\",\"data\":{\"text\":\"Dieser Artikel beschreibt ihre synergetische Anwendung und konzentriert sich auf die praktische Implementierung innerhalb einer robusten Teststrategie. Wir zeigen, wie diese Tools die Produktivität von Entwicklern steigern, den Review-Aufwand reduzieren und sicherstellen, dass Codebasen sauber, gut lesbar und an definierte Standards angepasst bleiben – was besonders für komplexe Projekte wie jene auf stajic.de entscheidend ist.\"},\"type\":\"paragraph\"},{\"id\":\"overview_h3\",\"data\":{\"text\":\"Überblick über ESLint und Prettier\",\"level\":3},\"type\":\"header\"},{\"id\":\"overview_p1\",\"data\":{\"text\":\"ESLint ist ein statisches Analysewerkzeug, das entwickelt wurde, um problematische Muster in JavaScript-Code zu identifizieren. Es erzwingt bestimmte Codierstandards und erkennt potenzielle Fehler bereits vor der Ausführung. Durch seine hohe Konfigurierbarkeit können Teams eigene Regeln definieren und so projektspezifische Richtlinien oder branchenübliche Best Practices sicherstellen. ESLint arbeitet, indem es den Code in einen abstrakten Syntaxbaum (AST) zerlegt und anschließend verschiedene Regeln darauf anwendet, um Probleme zu kennzeichnen.\"},\"type\":\"paragraph\"},{\"id\":\"overview_p2\",\"data\":{\"text\":\"Prettier hingegen ist ein meinungsstarker Code-Formatter. Er parst den Code und gibt ihn anhand eigener Regeln neu aus, um einen konsistenten Stil über die gesamte Codebasis hinweg sicherzustellen – ohne manuelles Eingreifen der Entwickler. Prettier konzentriert sich ausschließlich auf die visuelle Konsistenz und behandelt Aspekte wie Einrückung, Zeilenumbrüche, Semikolons und Anführungszeichen. Ziel ist es, alle stilbezogenen Diskussionen während Code-Reviews zu eliminieren. Während ESLint sich auf Codequalität und potenzielle Probleme konzentriert, kümmert sich Prettier ausschließlich um stilistische Einheitlichkeit. Die kombinierte Nutzung gewährleistet sowohl funktionale Korrektheit als auch konsistente Formatierung.\"},\"type\":\"paragraph\"},{\"id\":\"benefits_h3\",\"data\":{\"text\":\"Vorteile der Integration\",\"level\":3},\"type\":\"header\"},{\"id\":\"benefits_list\",\"data\":{\"items\":[\"**Automatisierte Code-Konsistenz:** Eliminierung manueller Stil-Diskussionen und Sicherstellung, dass sämtlicher Code vordefinierten Standards entspricht, unabhängig von individuellen Entwicklerpräferenzen.\",\"**Früherkennung von Fehlern:** ESLint identifiziert Syntaxfehler, potenzielle Bugs und Anti-Patterns bereits während der Entwicklung, oft bevor der Code ausgeführt wird, was die Debugging-Zeit erheblich reduziert.\",\"**Reduzierter Review-Aufwand:** Reviewer können sich auf Logik, Architektur und fachliche Anforderungen konzentrieren, anstatt Zeit mit Formatierungs- oder Stilkorrekturen zu verbringen.\",\"**Verbesserte Lesbarkeit und Wartbarkeit:** Eine konsistent formatierte und geprüfte Codebasis ist für alle Teammitglieder leichter zu lesen, zu verstehen und zu pflegen, auch für neue Entwickler.\",\"**Gesteigerte Entwicklerproduktivität:** Entwickler verbringen weniger Zeit mit manueller Formatierung oder der Behebung von Stilproblemen und können sich stärker auf Feature-Entwicklung und Problemlösung konzentrieren.\",\"**Vereinfachtes Onboarding:** Neue Teammitglieder können schnell Code beitragen, der den bestehenden Standards entspricht, ohne umfangreiche Stilrichtlinien oder lange Feedback-Schleifen.\"],\"style\":\"unordered\"},\"type\":\"list\"},{\"id\":\"technical_h3\",\"data\":{\"text\":\"Technische Details und Implementierung\",\"level\":3},\"type\":\"header\"},{\"id\":\"technical_p1\",\"data\":{\"text\":\"Die Implementierung von ESLint und Prettier umfasst einige zentrale Schritte: Installation, Konfiguration und Integration in die Projekt-Skripte. Für Projekte wie jene auf stajic.de ist ein robuster Aufbau von entscheidender Bedeutung.\"},\"type\":\"paragraph\"},{\"id\":\"technical_p2\",\"data\":{\"text\":\"Installieren Sie zunächst die erforderlichen Pakete als Entwicklungsabhängigkeiten:\"},\"type\":\"paragraph\"},{\"id\":\"technical_code_install\",\"data\":{\"text\":\"npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier\"},\"type\":\"paragraph\"},{\"id\":\"technical_p3\",\"data\":{\"text\":\"Anschließend konfigurieren Sie ESLint und Prettier. Erstellen Sie die Dateien `.eslintrc.js` und `.prettierrc.js` im Projektstammverzeichnis.\"},\"type\":\"paragraph\"},{\"id\":\"technical_code_eslint_config_title\",\"data\":{\"text\":\"**`.eslintrc.js`:**\"},\"type\":\"paragraph\"},{\"id\":\"technical_code_eslint_config\",\"data\":{\"text\":\"module.exports = {\\n  env: {\\n    browser: true,\\n    es2021: true,\\n    node: true\\n  },\\n  extends: [\\n    'eslint:recommended',\\n    'plugin:prettier\u002Frecommended'\\n  ],\\n  parserOptions: {\\n    ecmaVersion: 12,\\n    sourceType: 'module'\\n  },\\n  rules: {}\\n};\"},\"type\":\"paragraph\"},{\"id\":\"technical_p4\",\"data\":{\"text\":\"Die Erweiterung `plugin:prettier\u002Frecommended` ist hier entscheidend. Sie aktiviert `eslint-plugin-prettier`, das Prettier als ESLint-Regel ausführt, sowie `eslint-config-prettier`, das alle ESLint-Regeln deaktiviert, die mit Prettiers Formatierung kollidieren. Dadurch übernimmt Prettier vollständig die Formatierung, während sich ESLint auf die Codequalität konzentriert.\"},\"type\":\"paragraph\"},{\"id\":\"technical_code_prettier_config_title\",\"data\":{\"text\":\"**`.prettierrc.js`:**\"},\"type\":\"paragraph\"},{\"id\":\"technical_code_prettier_config\",\"data\":{\"text\":\"module.exports = {\\n  semi: true,\\n  trailingComma: 'all',\\n  singleQuote: true,\\n  printWidth: 100,\\n  tabWidth: 2\\n};\"},\"type\":\"paragraph\"},{\"id\":\"technical_p5\",\"data\":{\"text\":\"Dies sind gängige Prettier-Optionen. Passen Sie sie an den bevorzugten Stil Ihres Teams an. Ziel ist Konsistenz, nicht ein bestimmtes Regelset.\"},\"type\":\"paragraph\"},{\"id\":\"technical_p6\",\"data\":{\"text\":\"Fügen Sie abschließend Skripte zu Ihrer `package.json` hinzu, um die Ausführung zu erleichtern:\"},\"type\":\"paragraph\"},{\"id\":\"technical_code_package_json_scripts\",\"data\":{\"text\":\"{\\n  \\\"name\\\": \\\"stajic-project\\\",\\n  \\\"version\\\": \\\"1.0.0\\\",\\n  \\\"description\\\": \\\"Demonstration der Codequalität für stajic.de\\\",\\n  \\\"main\\\": \\\"index.js\\\",\\n  \\\"scripts\\\": {\\n    \\\"lint\\\": \\\"eslint .\\\",\\n    \\\"lint:fix\\\": \\\"eslint . --fix\\\",\\n    \\\"format\\\": \\\"prettier --write .\\\",\\n    \\\"check:format\\\": \\\"prettier --check .\\\"\\n  }\\n}\"},\"type\":\"paragraph\"},{\"id\":\"technical_p7\",\"data\":{\"text\":\"Das Skript `lint` führt ESLint aus und meldet Probleme. `lint:fix` versucht, diese automatisch zu beheben. `format` formatiert Dateien mit Prettier neu, während `check:format` prüft, ob Dateien korrekt formatiert sind, ohne Änderungen vorzunehmen. Dies ist besonders für CI-Prüfungen nützlich.\"},\"type\":\"paragraph\"},{\"id\":\"fazit_h3\",\"data\":{\"text\":\"Fazit\",\"level\":3},\"type\":\"header\"},{\"id\":\"fazit_p1\",\"data\":{\"text\":\"Die Kombination aus ESLint und Prettier bietet ein robustes, automatisiertes Framework zur Sicherstellung hoher Codequalität und eines konsistenten Stils in jedem Softwareprojekt. Durch die gezielte Integration dieser Tools in Entwicklungs-Workflows, Pre-Commit-Hooks, IDEs und CI\u002FCD-Pipelines können Teams technische Schulden reduzieren, Code-Reviews optimieren und die langfristige Wartbarkeit ihrer Projekte deutlich verbessern. Dieser proaktive Ansatz stellt sicher, dass Codebasen sauber, lesbar und standardkonform bleiben – ein entscheidender Faktor für nachhaltigen Projekterfolg, insbesondere bei komplexen Systemen wie denen auf stajic.de.\"},\"type\":\"paragraph\"}],\"version\":\"2.29.0\"}",{"time":211,"blocks":212,"version":319},1709894400000,[213,217,222,226,231,235,239,243,255,259,263,267,271,275,279,283,287,291,295,299,303,307,311,315],{"id":214,"data":215,"type":41},"intro_h2",{"text":207,"level":216},2,{"id":218,"data":219,"type":221},"intro_p1",{"text":220},"Moderne Softwareentwicklung erfordert eine konsequente Aufmerksamkeit für Codequalität und Konsistenz. Mit wachsender Projektgröße und zunehmender Teamstärke wird die Pflege einer einheitlichen Codebasis zu einer erheblichen Herausforderung. Stilabweichungen, subtile Fehler oder die Nichteinhaltung bewährter Praktiken können technische Schulden verursachen und Entwicklungszyklen verlangsamen. ESLint und Prettier setzen genau hier an und bieten automatisierte Lösungen für Code-Linting und Formatierung. Die Integration dieser Werkzeuge in Entwicklungs- und Test-Workflows ist nicht nur eine Best Practice, sondern eine grundlegende Voraussetzung für eine nachhaltige Projektgesundheit.","paragraph",{"id":223,"data":224,"type":221},"intro_p2",{"text":225},"Dieser Artikel beschreibt ihre synergetische Anwendung und konzentriert sich auf die praktische Implementierung innerhalb einer robusten Teststrategie. Wir zeigen, wie diese Tools die Produktivität von Entwicklern steigern, den Review-Aufwand reduzieren und sicherstellen, dass Codebasen sauber, gut lesbar und an definierte Standards angepasst bleiben – was besonders für komplexe Projekte wie jene auf stajic.de entscheidend ist.",{"id":227,"data":228,"type":41},"overview_h3",{"text":229,"level":230},"Überblick über ESLint und Prettier",3,{"id":232,"data":233,"type":221},"overview_p1",{"text":234},"ESLint ist ein statisches Analysewerkzeug, das entwickelt wurde, um problematische Muster in JavaScript-Code zu identifizieren. Es erzwingt bestimmte Codierstandards und erkennt potenzielle Fehler bereits vor der Ausführung. Durch seine hohe Konfigurierbarkeit können Teams eigene Regeln definieren und so projektspezifische Richtlinien oder branchenübliche Best Practices sicherstellen. ESLint arbeitet, indem es den Code in einen abstrakten Syntaxbaum (AST) zerlegt und anschließend verschiedene Regeln darauf anwendet, um Probleme zu kennzeichnen.",{"id":236,"data":237,"type":221},"overview_p2",{"text":238},"Prettier hingegen ist ein meinungsstarker Code-Formatter. Er parst den Code und gibt ihn anhand eigener Regeln neu aus, um einen konsistenten Stil über die gesamte Codebasis hinweg sicherzustellen – ohne manuelles Eingreifen der Entwickler. Prettier konzentriert sich ausschließlich auf die visuelle Konsistenz und behandelt Aspekte wie Einrückung, Zeilenumbrüche, Semikolons und Anführungszeichen. Ziel ist es, alle stilbezogenen Diskussionen während Code-Reviews zu eliminieren. Während ESLint sich auf Codequalität und potenzielle Probleme konzentriert, kümmert sich Prettier ausschließlich um stilistische Einheitlichkeit. Die kombinierte Nutzung gewährleistet sowohl funktionale Korrektheit als auch konsistente Formatierung.",{"id":240,"data":241,"type":41},"benefits_h3",{"text":242,"level":230},"Vorteile der Integration",{"id":244,"data":245,"type":254},"benefits_list",{"items":246,"style":253},[247,248,249,250,251,252],"**Automatisierte Code-Konsistenz:** Eliminierung manueller Stil-Diskussionen und Sicherstellung, dass sämtlicher Code vordefinierten Standards entspricht, unabhängig von individuellen Entwicklerpräferenzen.","**Früherkennung von Fehlern:** ESLint identifiziert Syntaxfehler, potenzielle Bugs und Anti-Patterns bereits während der Entwicklung, oft bevor der Code ausgeführt wird, was die Debugging-Zeit erheblich reduziert.","**Reduzierter Review-Aufwand:** Reviewer können sich auf Logik, Architektur und fachliche Anforderungen konzentrieren, anstatt Zeit mit Formatierungs- oder Stilkorrekturen zu verbringen.","**Verbesserte Lesbarkeit und Wartbarkeit:** Eine konsistent formatierte und geprüfte Codebasis ist für alle Teammitglieder leichter zu lesen, zu verstehen und zu pflegen, auch für neue Entwickler.","**Gesteigerte Entwicklerproduktivität:** Entwickler verbringen weniger Zeit mit manueller Formatierung oder der Behebung von Stilproblemen und können sich stärker auf Feature-Entwicklung und Problemlösung konzentrieren.","**Vereinfachtes Onboarding:** Neue Teammitglieder können schnell Code beitragen, der den bestehenden Standards entspricht, ohne umfangreiche Stilrichtlinien oder lange Feedback-Schleifen.","unordered","list",{"id":256,"data":257,"type":41},"technical_h3",{"text":258,"level":230},"Technische Details und Implementierung",{"id":260,"data":261,"type":221},"technical_p1",{"text":262},"Die Implementierung von ESLint und Prettier umfasst einige zentrale Schritte: Installation, Konfiguration und Integration in die Projekt-Skripte. Für Projekte wie jene auf stajic.de ist ein robuster Aufbau von entscheidender Bedeutung.",{"id":264,"data":265,"type":221},"technical_p2",{"text":266},"Installieren Sie zunächst die erforderlichen Pakete als Entwicklungsabhängigkeiten:",{"id":268,"data":269,"type":221},"technical_code_install",{"text":270},"npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier",{"id":272,"data":273,"type":221},"technical_p3",{"text":274},"Anschließend konfigurieren Sie ESLint und Prettier. Erstellen Sie die Dateien `.eslintrc.js` und `.prettierrc.js` im Projektstammverzeichnis.",{"id":276,"data":277,"type":221},"technical_code_eslint_config_title",{"text":278},"**`.eslintrc.js`:**",{"id":280,"data":281,"type":221},"technical_code_eslint_config",{"text":282},"module.exports = {\n  env: {\n    browser: true,\n    es2021: true,\n    node: true\n  },\n  extends: [\n    'eslint:recommended',\n    'plugin:prettier\u002Frecommended'\n  ],\n  parserOptions: {\n    ecmaVersion: 12,\n    sourceType: 'module'\n  },\n  rules: {}\n};",{"id":284,"data":285,"type":221},"technical_p4",{"text":286},"Die Erweiterung `plugin:prettier\u002Frecommended` ist hier entscheidend. Sie aktiviert `eslint-plugin-prettier`, das Prettier als ESLint-Regel ausführt, sowie `eslint-config-prettier`, das alle ESLint-Regeln deaktiviert, die mit Prettiers Formatierung kollidieren. Dadurch übernimmt Prettier vollständig die Formatierung, während sich ESLint auf die Codequalität konzentriert.",{"id":288,"data":289,"type":221},"technical_code_prettier_config_title",{"text":290},"**`.prettierrc.js`:**",{"id":292,"data":293,"type":221},"technical_code_prettier_config",{"text":294},"module.exports = {\n  semi: true,\n  trailingComma: 'all',\n  singleQuote: true,\n  printWidth: 100,\n  tabWidth: 2\n};",{"id":296,"data":297,"type":221},"technical_p5",{"text":298},"Dies sind gängige Prettier-Optionen. Passen Sie sie an den bevorzugten Stil Ihres Teams an. Ziel ist Konsistenz, nicht ein bestimmtes Regelset.",{"id":300,"data":301,"type":221},"technical_p6",{"text":302},"Fügen Sie abschließend Skripte zu Ihrer `package.json` hinzu, um die Ausführung zu erleichtern:",{"id":304,"data":305,"type":221},"technical_code_package_json_scripts",{"text":306},"{\n  \"name\": \"stajic-project\",\n  \"version\": \"1.0.0\",\n  \"description\": \"Demonstration der Codequalität für stajic.de\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"lint\": \"eslint .\",\n    \"lint:fix\": \"eslint . --fix\",\n    \"format\": \"prettier --write .\",\n    \"check:format\": \"prettier --check .\"\n  }\n}",{"id":308,"data":309,"type":221},"technical_p7",{"text":310},"Das Skript `lint` führt ESLint aus und meldet Probleme. `lint:fix` versucht, diese automatisch zu beheben. `format` formatiert Dateien mit Prettier neu, während `check:format` prüft, ob Dateien korrekt formatiert sind, ohne Änderungen vorzunehmen. Dies ist besonders für CI-Prüfungen nützlich.",{"id":312,"data":313,"type":41},"fazit_h3",{"text":314,"level":230},"Fazit",{"id":316,"data":317,"type":221},"fazit_p1",{"text":318},"Die Kombination aus ESLint und Prettier bietet ein robustes, automatisiertes Framework zur Sicherstellung hoher Codequalität und eines konsistenten Stils in jedem Softwareprojekt. Durch die gezielte Integration dieser Tools in Entwicklungs-Workflows, Pre-Commit-Hooks, IDEs und CI\u002FCD-Pipelines können Teams technische Schulden reduzieren, Code-Reviews optimieren und die langfristige Wartbarkeit ihrer Projekte deutlich verbessern. Dieser proaktive Ansatz stellt sicher, dass Codebasen sauber, lesbar und standardkonform bleiben – ein entscheidender Faktor für nachhaltigen Projekterfolg, insbesondere bei komplexen Systemen wie denen auf stajic.de.","2.29.0","Dieser Artikel beschreibt die Integration von ESLint und Prettier in moderne Entwicklungs- und Test-Workflows und konzentriert sich auf die praktische Umsetzung für eine konsistente Codequalität und einen einheitlichen Stil.","\u002Fuploads\u002F2026\u002F01\u002Ftesting-with-eslint-and-prettier-1769204102989-ezczs0-1769376472926-hwqqkt.webp","testing-with-eslint-and-prettier-1769204102989-ezczs0-1769376472926-hwqqkt","PUBLISHED","2026-01-25T10:26:00.000Z","2026-01-25T21:26:41.047Z","2026-02-02T10:44:25.131Z",{"en":328,"de":329,"sr":330,"es":331,"fr":332,"it":333,"ru":334,"zh":335},"\u002Fblog\u002Fstreamlining-code-quality-testing-with-eslint-and-prettier","\u002Fde\u002Fblog\u002Fstreamlining-code-quality-testing-with-eslint-and-prettier","\u002Fsr\u002Fblog\u002Fstreamlining-code-quality-testing-with-eslint-and-prettier","\u002Fes\u002Fblog\u002Fstreamlining-code-quality-testing-with-eslint-and-prettier","\u002Ffr\u002Fblog\u002Fstreamlining-code-quality-testing-with-eslint-and-prettier","\u002Fit\u002Fblog\u002Fstreamlining-code-quality-testing-with-eslint-and-prettier","\u002Fru\u002Fblog\u002Fstreamlining-code-quality-testing-with-eslint-and-prettier","\u002Fzh\u002Fblog\u002Fstreamlining-code-quality-testing-with-eslint-and-prettier",[],{"id":338,"login":339,"email":340,"displayName":341},"20","rooth8233","","Aleksandar Stajić",[343,395],{"lang":7,"title":207,"content":209,"contentJson":344,"excerpt":320},{"time":211,"blocks":345,"version":319},[346,348,350,352,354,356,358,360,363,365,367,369,371,373,375,377,379,381,383,385,387,389,391,393],{"id":214,"data":347,"type":41},{"text":207,"level":216},{"id":218,"data":349,"type":221},{"text":220},{"id":223,"data":351,"type":221},{"text":225},{"id":227,"data":353,"type":41},{"text":229,"level":230},{"id":232,"data":355,"type":221},{"text":234},{"id":236,"data":357,"type":221},{"text":238},{"id":240,"data":359,"type":41},{"text":242,"level":230},{"id":244,"data":361,"type":254},{"items":362,"style":253},[247,248,249,250,251,252],{"id":256,"data":364,"type":41},{"text":258,"level":230},{"id":260,"data":366,"type":221},{"text":262},{"id":264,"data":368,"type":221},{"text":266},{"id":268,"data":370,"type":221},{"text":270},{"id":272,"data":372,"type":221},{"text":274},{"id":276,"data":374,"type":221},{"text":278},{"id":280,"data":376,"type":221},{"text":282},{"id":284,"data":378,"type":221},{"text":286},{"id":288,"data":380,"type":221},{"text":290},{"id":292,"data":382,"type":221},{"text":294},{"id":296,"data":384,"type":221},{"text":298},{"id":300,"data":386,"type":221},{"text":302},{"id":304,"data":388,"type":221},{"text":306},{"id":308,"data":390,"type":221},{"text":310},{"id":312,"data":392,"type":41},{"text":314,"level":230},{"id":316,"data":394,"type":221},{"text":318},{"lang":396,"title":397,"content":398,"contentJson":399,"excerpt":558},"en","Streamlining Code Quality: Testing with ESLint and Prettier","{\"time\":1709894400000,\"blocks\":[{\"id\":\"intro_h2\",\"type\":\"header\",\"data\":{\"text\":\"Streamlining Code Quality: Testing with ESLint and Prettier\",\"level\":2}},{\"id\":\"intro_p1\",\"type\":\"paragraph\",\"data\":{\"text\":\"Modern software development demands rigorous attention to code quality and consistency. As projects scale and teams grow, maintaining a uniform codebase becomes a significant challenge. Discrepancies in style, subtle bugs, or adherence to best practices can introduce technical debt and slow down development cycles. ESLint and Prettier address this directly, providing automated solutions for code linting and formatting. Integrating these tools into development and testing workflows is not merely a best practice; it is a fundamental requirement for sustainable project health.\"}},{\"id\":\"intro_p2\",\"type\":\"paragraph\",\"data\":{\"text\":\"This article details their synergistic application, focusing on practical implementation within a robust testing strategy. We will explore how these tools enhance developer productivity, reduce review overhead, and ensure codebases remain clean, readable, and aligned with defined standards, particularly crucial for complex projects like those found at stajic.de.\"}},{\"id\":\"overview_h3\",\"type\":\"header\",\"data\":{\"text\":\"Overview of ESLint and Prettier\",\"level\":3}},{\"id\":\"overview_p1\",\"type\":\"paragraph\",\"data\":{\"text\":\"ESLint is a static analysis tool designed to identify problematic patterns found in JavaScript code. It enforces specific coding styles and detects potential errors before execution. Its configurability allows teams to define custom rules, ensuring adherence to project-specific guidelines or industry best practices. ESLint operates by parsing code into an Abstract Syntax Tree (AST) and then running various rules against it to flag issues.\"}},{\"id\":\"overview_p2\",\"type\":\"paragraph\",\"data\":{\"text\":\"Prettier, conversely, is an opinionated code formatter. It parses code and re-prints it with its own rules, ensuring consistent style across the entire codebase without developer intervention. Prettier focuses solely on aesthetic consistency, handling aspects like indentation, line breaks, semicolons, and quote styles. It aims to eliminate all style-related debates during code reviews. While ESLint focuses on code quality and potential issues, Prettier focuses purely on stylistic uniformity. Their combined use ensures both functional correctness and stylistic consistency.\"}},{\"id\":\"benefits_h3\",\"type\":\"header\",\"data\":{\"text\":\"Benefits of Integration\",\"level\":3}},{\"id\":\"benefits_list\",\"type\":\"list\",\"data\":{\"style\":\"unordered\",\"items\":[\"**Automated Code Consistency:** Eliminates manual style debates and ensures all code adheres to predefined standards, regardless of the individual developer's preferences.\",\"**Early Error Detection:** ESLint identifies syntax errors, potential bugs, and anti-patterns during development, often before the code is even run, significantly reducing debugging time.\",\"**Reduced Code Review Overhead:** Reviewers can focus on logic, architecture, and business requirements rather than spending time correcting formatting or minor style discrepancies.\",\"**Improved Readability and Maintainability:** A consistently formatted and linted codebase is easier to read, understand, and maintain for all team members, including those new to the project.\",\"**Enhanced Developer Productivity:** Developers spend less time manually formatting or fixing style issues, freeing them to concentrate on feature development and problem-solving.\",\"**Seamless Onboarding:** New team members can quickly contribute code that matches existing standards without extensive manual style guides or lengthy feedback loops.\"]}},{\"id\":\"technical_h3\",\"type\":\"header\",\"data\":{\"text\":\"Technical Details and Implementation\",\"level\":3}},{\"id\":\"technical_p1\",\"type\":\"paragraph\",\"data\":{\"text\":\"Implementing ESLint and Prettier involves a few key steps: installation, configuration, and integration into your project's scripts. For projects like those hosted on stajic.de, a robust setup is paramount.\"}},{\"id\":\"technical_p2\",\"type\":\"paragraph\",\"data\":{\"text\":\"First, install the necessary packages as development dependencies:\"}},{\"id\":\"technical_code_install\",\"type\":\"paragraph\",\"data\":{\"text\":\"npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier\"}},{\"id\":\"technical_p3\",\"type\":\"paragraph\",\"data\":{\"text\":\"Next, configure ESLint and Prettier. Create `.eslintrc.js` and `.prettierrc.js` files in your project root.\"}},{\"id\":\"technical_code_eslint_config_title\",\"type\":\"paragraph\",\"data\":{\"text\":\"**`.eslintrc.js`:**\"}},{\"id\":\"technical_code_eslint_config\",\"type\":\"paragraph\",\"data\":{\"text\":\"module.exports = {\\n  env: {\\n    browser: true,\\n    es2021: true,\\n    node: true,\\n  },\\n  extends: [\\n    'eslint:recommended',\\n    'plugin:prettier\u002Frecommended', \u002F\u002F Integrates Prettier with ESLint\\n  ],\\n  parserOptions: {\\n    ecmaVersion: 12,\\n    sourceType: 'module',\\n  },\\n  rules: {\\n    \u002F\u002F Custom ESLint rules can go here\\n    \u002F\u002F Example: 'no-unused-vars': 'warn',\\n  },\\n};\"}},{\"id\":\"technical_p4\",\"type\":\"paragraph\",\"data\":{\"text\":\"The `plugin:prettier\u002Frecommended` extension is critical here. It enables `eslint-plugin-prettier` which runs Prettier as an ESLint rule, and `eslint-config-prettier` which disables all ESLint rules that might conflict with Prettier's formatting. This ensures Prettier handles all formatting, while ESLint focuses on code quality.\"}},{\"id\":\"technical_code_prettier_config_title\",\"type\":\"paragraph\",\"data\":{\"text\":\"**`.prettierrc.js`:**\"}},{\"id\":\"technical_code_prettier_config\",\"type\":\"paragraph\",\"data\":{\"text\":\"module.exports = {\\n  semi: true,\\n  trailingComma: 'all',\\n  singleQuote: true,\\n  printWidth: 100,\\n  tabWidth: 2,\\n};\"}},{\"id\":\"technical_p5\",\"type\":\"paragraph\",\"data\":{\"text\":\"These are common Prettier options. Adjust them to match your team's preferred style. Consistency is the goal, not a specific set of rules.\"}},{\"id\":\"technical_p6\",\"type\":\"paragraph\",\"data\":{\"text\":\"Finally, add scripts to your `package.json` for easy execution:\"}},{\"id\":\"technical_code_package_json_scripts\",\"type\":\"paragraph\",\"data\":{\"text\":\"{\\n  \\\"name\\\": \\\"stajic-project\\\",\\n  \\\"version\\\": \\\"1.0.0\\\",\\n  \\\"description\\\": \\\"Code quality demonstration for stajic.de\\\",\\n  \\\"main\\\": \\\"index.js\\\",\\n  \\\"scripts\\\": {\\n    \\\"lint\\\": \\\"eslint .\\\",\\n    \\\"lint:fix\\\": \\\"eslint . --fix\\\",\\n    \\\"format\\\": \\\"prettier --write .\\\",\\n    \\\"check:format\\\": \\\"prettier --check .\\\"\\n  },\\n  \\\"devDependencies\\\": {\\n    \\\"eslint\\\": \\\"^8.x.x\\\",\\n    \\\"eslint-config-prettier\\\": \\\"^8.x.x\\\",\\n    \\\"eslint-plugin-prettier\\\": \\\"^4.x.x\\\",\\n    \\\"prettier\\\": \\\"^2.x.x\\\"\\n  }\\n}\"}},{\"id\":\"technical_p7\",\"type\":\"paragraph\",\"data\":{\"text\":\"The `lint` script runs ESLint to report issues. `lint:fix` attempts to automatically fix them. `format` uses Prettier to reformat files, and `check:format` verifies if files are formatted correctly without making changes. This is useful for CI checks.\"}},{\"id\":\"technical_p8\",\"type\":\"paragraph\",\"data\":{\"text\":\"A typical project structure might look like this:\"}},{\"id\":\"technical_code_folder_structure\",\"type\":\"paragraph\",\"data\":{\"text\":\"my-project\u002F\\n├── .eslintrc.js\\n├── .prettierrc.js\\n├── package.json\\n├── src\u002F\\n│   └── index.js\\n└── tests\u002F\\n    └── index.test.js\"}},{\"id\":\"technical_p9\",\"type\":\"paragraph\",\"data\":{\"text\":\"To demonstrate, consider a simple `src\u002Findex.js` file:\"}},{\"id\":\"technical_code_example_js\",\"type\":\"paragraph\",\"data\":{\"text\":\"const   myFunction  =  (  a,b  )  =>  {\\n  if(a > b) {\\n    console.log(  'A is greater'  )\\n  }\\n  else  {\\n    console.log(  'B is greater or equal'  )\\n  }\\n}\\n\\nmyFunction(5, 3);\"}},{\"id\":\"technical_p10\",\"type\":\"paragraph\",\"data\":{\"text\":\"Running `npm run format` would transform this into:\"}},{\"id\":\"technical_code_example_js_formatted\",\"type\":\"paragraph\",\"data\":{\"text\":\"const myFunction = (a, b) => {\\n  if (a > b) {\\n    console.log('A is greater');\\n  } else {\\n    console.log('B is greater or equal');\\n  }\\n};\\n\\nmyFunction(5, 3);\"}},{\"id\":\"technical_p11\",\"type\":\"paragraph\",\"data\":{\"text\":\"Running `npm run lint` would then ensure no quality issues remain. This separation of concerns is powerful.\"}},{\"id\":\"technical_p12\",\"type\":\"paragraph\",\"data\":{\"text\":\"### Acknowledging Trade-offs: The \\\"This Went Wrong\\\" Moment\"}},{\"id\":\"technical_p13\",\"type\":\"paragraph\",\"data\":{\"text\":\"While highly beneficial, the initial setup of ESLint and Prettier can present challenges. Early in a project for stajic.de, we encountered a common pitfall: ESLint's `indent` rule was configured to enforce 4 spaces, while Prettier's default was 2 spaces. This led to an infinite loop of formatting changes. Running `eslint --fix` would change indentation to 4 spaces, then `prettier --write` would revert it to 2 spaces. This resulted in failed CI checks and unnecessary merge conflicts. The resolution involved carefully configuring `eslint-config-prettier` to disable all ESLint rules that conflict with Prettier. Specifically, ensuring `plugin:prettier\u002Frecommended` was the last entry in `extends` in `.eslintrc.js` correctly delegated formatting concerns entirely to Prettier, allowing ESLint to focus on code quality without style conflicts. This highlights the importance of understanding the interaction between these tools and prioritizing Prettier for formatting.\"}},{\"id\":\"usecases_h3\",\"type\":\"header\",\"data\":{\"text\":\"Use Cases and Applications in Testing Workflows\",\"level\":3}},{\"id\":\"usecases_p1\",\"type\":\"paragraph\",\"data\":{\"text\":\"Integrating ESLint and Prettier into various stages of the development and testing workflow maximizes their impact.\"}},{\"id\":\"usecases_p2\",\"type\":\"paragraph\",\"data\":{\"text\":\"**1. Pre-commit Hooks (e.g., with Husky and lint-staged):**\"}},{\"id\":\"usecases_p3\",\"type\":\"paragraph\",\"data\":{\"text\":\"This is a critical integration point. By using tools like Husky (for Git hooks) and `lint-staged` (to run commands on staged Git files), you can automatically run ESLint and Prettier on files before a commit is finalized. This prevents malformed or non-compliant code from ever entering the repository. It's a powerful shift-left strategy for quality control. A typical `package.json` configuration excerpt might look like this:\"}},{\"id\":\"usecases_code_husky_lint_staged\",\"type\":\"paragraph\",\"data\":{\"text\":\"\u002F\u002F package.json (excerpt)\\n\\\"husky\\\": {\\n  \\\"hooks\\\": {\\n    \\\"pre-commit\\\": \\\"lint-staged\\\"\\n  }\\n},\\n\\\"lint-staged\\\": {\\n  \\\"*.js\\\": [\\n    \\\"eslint --fix\\\",\\n    \\\"prettier --write\\\",\\n    \\\"git add\\\"\\n  ]\\n}\"}},{\"id\":\"usecases_p4\",\"type\":\"paragraph\",\"data\":{\"text\":\"This setup ensures that every commit is clean. No exceptions.\"}},{\"id\":\"usecases_p5\",\"type\":\"paragraph\",\"data\":{\"text\":\"**2. CI\u002FCD Pipelines:**\"}},{\"id\":\"usecases_p6\",\"type\":\"paragraph\",\"data\":{\"text\":\"Integrate linting and formatting checks as mandatory steps in your Continuous Integration\u002FContinuous Deployment (CI\u002FCD) pipeline. Any failure in these checks should block the merge or deployment. This provides a final safety net, ensuring that even if a pre-commit hook was bypassed or misconfigured, the code quality standards are still enforced before reaching production. Commands like `npm run check:format` and `npm run lint` are ideal for CI environments.\"}},{\"id\":\"usecases_p7\",\"type\":\"paragraph\",\"data\":{\"text\":\"**3. IDE Integration:**\"}},{\"id\":\"usecases_p8\",\"type\":\"paragraph\",\"data\":{\"text\":\"Most modern Integrated Development Environments (IDEs) like VS Code, WebStorm, or Sublime Text offer extensions for ESLint and Prettier. These extensions provide real-time feedback on code quality and style issues directly within the editor. Many can also be configured to auto-format files on save. This shifts error detection even further left in the development cycle, providing immediate feedback to the developer and preventing issues before they are even staged.\"}},{\"id\":\"usecases_p9\",\"type\":\"paragraph\",\"data\":{\"text\":\"**4. Automated Pull Request Checks:**\"}},{\"id\":\"usecases_p10\",\"type\":\"paragraph\",\"data\":{\"text\":\"Configure repository settings (e.g., GitHub, GitLab) to require successful linting and formatting checks before a pull request can be merged. This ensures that all contributions, regardless of origin, adhere to the project's established code quality and style standards. It acts as a gatekeeper for the main branch, maintaining its integrity.\"}},{\"id\":\"fazit_h3\",\"type\":\"header\",\"data\":{\"text\":\"Fazit\",\"level\":3}},{\"id\":\"fazit_p1\",\"type\":\"paragraph\",\"data\":{\"text\":\"The combination of ESLint and Prettier provides a robust, automated framework for maintaining high code quality and consistent style across any software project. By strategically integrating these tools into development workflows, pre-commit hooks, IDEs, and CI\u002FCD pipelines, teams can significantly reduce technical debt, streamline code reviews, and enhance overall project maintainability. This proactive approach ensures that codebases remain clean, readable, and adhere to established standards, which is critical for long-term project success, especially for complex systems like those found at stajic.de. The initial setup investment is quickly recouped through increased developer efficiency, reduced debugging efforts, and a more enjoyable development experience. Implementing these tools is not optional; it is a foundational element of modern, professional software development.\"}}],\"version\":\"2.29.0\"}",{"time":211,"blocks":400,"version":319},[401,403,406,409,412,415,418,421,430,433,436,439,441,444,446,449,452,454,457,460,463,466,469,473,477,481,485,489,493,497,501,505,509,513,517,521,525,529,533,537,541,545,549,553,555],{"id":214,"data":402,"type":41},{"text":397,"level":216},{"id":218,"data":404,"type":221},{"text":405},"Modern software development demands rigorous attention to code quality and consistency. As projects scale and teams grow, maintaining a uniform codebase becomes a significant challenge. Discrepancies in style, subtle bugs, or adherence to best practices can introduce technical debt and slow down development cycles. ESLint and Prettier address this directly, providing automated solutions for code linting and formatting. Integrating these tools into development and testing workflows is not merely a best practice; it is a fundamental requirement for sustainable project health.",{"id":223,"data":407,"type":221},{"text":408},"This article details their synergistic application, focusing on practical implementation within a robust testing strategy. We will explore how these tools enhance developer productivity, reduce review overhead, and ensure codebases remain clean, readable, and aligned with defined standards, particularly crucial for complex projects like those found at stajic.de.",{"id":227,"data":410,"type":41},{"text":411,"level":230},"Overview of ESLint and Prettier",{"id":232,"data":413,"type":221},{"text":414},"ESLint is a static analysis tool designed to identify problematic patterns found in JavaScript code. It enforces specific coding styles and detects potential errors before execution. Its configurability allows teams to define custom rules, ensuring adherence to project-specific guidelines or industry best practices. ESLint operates by parsing code into an Abstract Syntax Tree (AST) and then running various rules against it to flag issues.",{"id":236,"data":416,"type":221},{"text":417},"Prettier, conversely, is an opinionated code formatter. It parses code and re-prints it with its own rules, ensuring consistent style across the entire codebase without developer intervention. Prettier focuses solely on aesthetic consistency, handling aspects like indentation, line breaks, semicolons, and quote styles. It aims to eliminate all style-related debates during code reviews. While ESLint focuses on code quality and potential issues, Prettier focuses purely on stylistic uniformity. Their combined use ensures both functional correctness and stylistic consistency.",{"id":240,"data":419,"type":41},{"text":420,"level":230},"Benefits of Integration",{"id":244,"data":422,"type":254},{"items":423,"style":253},[424,425,426,427,428,429],"**Automated Code Consistency:** Eliminates manual style debates and ensures all code adheres to predefined standards, regardless of the individual developer's preferences.","**Early Error Detection:** ESLint identifies syntax errors, potential bugs, and anti-patterns during development, often before the code is even run, significantly reducing debugging time.","**Reduced Code Review Overhead:** Reviewers can focus on logic, architecture, and business requirements rather than spending time correcting formatting or minor style discrepancies.","**Improved Readability and Maintainability:** A consistently formatted and linted codebase is easier to read, understand, and maintain for all team members, including those new to the project.","**Enhanced Developer Productivity:** Developers spend less time manually formatting or fixing style issues, freeing them to concentrate on feature development and problem-solving.","**Seamless Onboarding:** New team members can quickly contribute code that matches existing standards without extensive manual style guides or lengthy feedback loops.",{"id":256,"data":431,"type":41},{"text":432,"level":230},"Technical Details and Implementation",{"id":260,"data":434,"type":221},{"text":435},"Implementing ESLint and Prettier involves a few key steps: installation, configuration, and integration into your project's scripts. For projects like those hosted on stajic.de, a robust setup is paramount.",{"id":264,"data":437,"type":221},{"text":438},"First, install the necessary packages as development dependencies:",{"id":268,"data":440,"type":221},{"text":270},{"id":272,"data":442,"type":221},{"text":443},"Next, configure ESLint and Prettier. Create `.eslintrc.js` and `.prettierrc.js` files in your project root.",{"id":276,"data":445,"type":221},{"text":278},{"id":280,"data":447,"type":221},{"text":448},"module.exports = {\n  env: {\n    browser: true,\n    es2021: true,\n    node: true,\n  },\n  extends: [\n    'eslint:recommended',\n    'plugin:prettier\u002Frecommended', \u002F\u002F Integrates Prettier with ESLint\n  ],\n  parserOptions: {\n    ecmaVersion: 12,\n    sourceType: 'module',\n  },\n  rules: {\n    \u002F\u002F Custom ESLint rules can go here\n    \u002F\u002F Example: 'no-unused-vars': 'warn',\n  },\n};",{"id":284,"data":450,"type":221},{"text":451},"The `plugin:prettier\u002Frecommended` extension is critical here. It enables `eslint-plugin-prettier` which runs Prettier as an ESLint rule, and `eslint-config-prettier` which disables all ESLint rules that might conflict with Prettier's formatting. This ensures Prettier handles all formatting, while ESLint focuses on code quality.",{"id":288,"data":453,"type":221},{"text":290},{"id":292,"data":455,"type":221},{"text":456},"module.exports = {\n  semi: true,\n  trailingComma: 'all',\n  singleQuote: true,\n  printWidth: 100,\n  tabWidth: 2,\n};",{"id":296,"data":458,"type":221},{"text":459},"These are common Prettier options. Adjust them to match your team's preferred style. Consistency is the goal, not a specific set of rules.",{"id":300,"data":461,"type":221},{"text":462},"Finally, add scripts to your `package.json` for easy execution:",{"id":304,"data":464,"type":221},{"text":465},"{\n  \"name\": \"stajic-project\",\n  \"version\": \"1.0.0\",\n  \"description\": \"Code quality demonstration for stajic.de\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"lint\": \"eslint .\",\n    \"lint:fix\": \"eslint . --fix\",\n    \"format\": \"prettier --write .\",\n    \"check:format\": \"prettier --check .\"\n  },\n  \"devDependencies\": {\n    \"eslint\": \"^8.x.x\",\n    \"eslint-config-prettier\": \"^8.x.x\",\n    \"eslint-plugin-prettier\": \"^4.x.x\",\n    \"prettier\": \"^2.x.x\"\n  }\n}",{"id":308,"data":467,"type":221},{"text":468},"The `lint` script runs ESLint to report issues. `lint:fix` attempts to automatically fix them. `format` uses Prettier to reformat files, and `check:format` verifies if files are formatted correctly without making changes. This is useful for CI checks.",{"id":470,"data":471,"type":221},"technical_p8",{"text":472},"A typical project structure might look like this:",{"id":474,"data":475,"type":221},"technical_code_folder_structure",{"text":476},"my-project\u002F\n├── .eslintrc.js\n├── .prettierrc.js\n├── package.json\n├── src\u002F\n│   └── index.js\n└── tests\u002F\n    └── index.test.js",{"id":478,"data":479,"type":221},"technical_p9",{"text":480},"To demonstrate, consider a simple `src\u002Findex.js` file:",{"id":482,"data":483,"type":221},"technical_code_example_js",{"text":484},"const   myFunction  =  (  a,b  )  =>  {\n  if(a > b) {\n    console.log(  'A is greater'  )\n  }\n  else  {\n    console.log(  'B is greater or equal'  )\n  }\n}\n\nmyFunction(5, 3);",{"id":486,"data":487,"type":221},"technical_p10",{"text":488},"Running `npm run format` would transform this into:",{"id":490,"data":491,"type":221},"technical_code_example_js_formatted",{"text":492},"const myFunction = (a, b) => {\n  if (a > b) {\n    console.log('A is greater');\n  } else {\n    console.log('B is greater or equal');\n  }\n};\n\nmyFunction(5, 3);",{"id":494,"data":495,"type":221},"technical_p11",{"text":496},"Running `npm run lint` would then ensure no quality issues remain. This separation of concerns is powerful.",{"id":498,"data":499,"type":221},"technical_p12",{"text":500},"### Acknowledging Trade-offs: The \"This Went Wrong\" Moment",{"id":502,"data":503,"type":221},"technical_p13",{"text":504},"While highly beneficial, the initial setup of ESLint and Prettier can present challenges. Early in a project for stajic.de, we encountered a common pitfall: ESLint's `indent` rule was configured to enforce 4 spaces, while Prettier's default was 2 spaces. This led to an infinite loop of formatting changes. Running `eslint --fix` would change indentation to 4 spaces, then `prettier --write` would revert it to 2 spaces. This resulted in failed CI checks and unnecessary merge conflicts. The resolution involved carefully configuring `eslint-config-prettier` to disable all ESLint rules that conflict with Prettier. Specifically, ensuring `plugin:prettier\u002Frecommended` was the last entry in `extends` in `.eslintrc.js` correctly delegated formatting concerns entirely to Prettier, allowing ESLint to focus on code quality without style conflicts. This highlights the importance of understanding the interaction between these tools and prioritizing Prettier for formatting.",{"id":506,"data":507,"type":41},"usecases_h3",{"text":508,"level":230},"Use Cases and Applications in Testing Workflows",{"id":510,"data":511,"type":221},"usecases_p1",{"text":512},"Integrating ESLint and Prettier into various stages of the development and testing workflow maximizes their impact.",{"id":514,"data":515,"type":221},"usecases_p2",{"text":516},"**1. Pre-commit Hooks (e.g., with Husky and lint-staged):**",{"id":518,"data":519,"type":221},"usecases_p3",{"text":520},"This is a critical integration point. By using tools like Husky (for Git hooks) and `lint-staged` (to run commands on staged Git files), you can automatically run ESLint and Prettier on files before a commit is finalized. This prevents malformed or non-compliant code from ever entering the repository. It's a powerful shift-left strategy for quality control. A typical `package.json` configuration excerpt might look like this:",{"id":522,"data":523,"type":221},"usecases_code_husky_lint_staged",{"text":524},"\u002F\u002F package.json (excerpt)\n\"husky\": {\n  \"hooks\": {\n    \"pre-commit\": \"lint-staged\"\n  }\n},\n\"lint-staged\": {\n  \"*.js\": [\n    \"eslint --fix\",\n    \"prettier --write\",\n    \"git add\"\n  ]\n}",{"id":526,"data":527,"type":221},"usecases_p4",{"text":528},"This setup ensures that every commit is clean. No exceptions.",{"id":530,"data":531,"type":221},"usecases_p5",{"text":532},"**2. CI\u002FCD Pipelines:**",{"id":534,"data":535,"type":221},"usecases_p6",{"text":536},"Integrate linting and formatting checks as mandatory steps in your Continuous Integration\u002FContinuous Deployment (CI\u002FCD) pipeline. Any failure in these checks should block the merge or deployment. This provides a final safety net, ensuring that even if a pre-commit hook was bypassed or misconfigured, the code quality standards are still enforced before reaching production. Commands like `npm run check:format` and `npm run lint` are ideal for CI environments.",{"id":538,"data":539,"type":221},"usecases_p7",{"text":540},"**3. IDE Integration:**",{"id":542,"data":543,"type":221},"usecases_p8",{"text":544},"Most modern Integrated Development Environments (IDEs) like VS Code, WebStorm, or Sublime Text offer extensions for ESLint and Prettier. These extensions provide real-time feedback on code quality and style issues directly within the editor. Many can also be configured to auto-format files on save. This shifts error detection even further left in the development cycle, providing immediate feedback to the developer and preventing issues before they are even staged.",{"id":546,"data":547,"type":221},"usecases_p9",{"text":548},"**4. Automated Pull Request Checks:**",{"id":550,"data":551,"type":221},"usecases_p10",{"text":552},"Configure repository settings (e.g., GitHub, GitLab) to require successful linting and formatting checks before a pull request can be merged. This ensures that all contributions, regardless of origin, adhere to the project's established code quality and style standards. It acts as a gatekeeper for the main branch, maintaining its integrity.",{"id":312,"data":554,"type":41},{"text":314,"level":230},{"id":316,"data":556,"type":221},{"text":557},"The combination of ESLint and Prettier provides a robust, automated framework for maintaining high code quality and consistent style across any software project. By strategically integrating these tools into development workflows, pre-commit hooks, IDEs, and CI\u002FCD pipelines, teams can significantly reduce technical debt, streamline code reviews, and enhance overall project maintainability. This proactive approach ensures that codebases remain clean, readable, and adhere to established standards, which is critical for long-term project success, especially for complex systems like those found at stajic.de. The initial setup investment is quickly recouped through increased developer efficiency, reduced debugging efforts, and a more enjoyable development experience. Implementing these tools is not optional; it is a foundational element of modern, professional software development.","This article details the integration of ESLint and Prettier into modern development and testing workflows, focusing on practical implementation for consistent code quality and style.","Post erfolgreich abgerufen",{"items":561,"source":646,"manualIds":647,"manualMatchedIds":648},[562,569,576,583,590,597,604,611,618,625,632,639],{"id":563,"slug":564,"title":565,"excerpt":566,"featuredImage":567,"publishedAt":568},"454","zbt-z8102ax-rm500u-ea-5g-modem-test","Quectel RM500U-EA im ZBT Z8102AX: 5G-Bänder, o2 Germany und Signalverhalten in der Praxis","Der ZBT Z8102AX verwendet ein Quectel RM500U-EA-Modem für die 4G- und 5G-Konnektivität. Im ersten Praxistest verband sich der Router erfolgreich mit o2 Germany mit LTE-Band 3 und NR n28. Das Modem funktioniert, aber tiefergehende Diagnosen wie RSRP, RSRQ, SINR, Band-Locking und Zellverhalten müssen noch richtig getestet werden.","\u002Fuploads\u002F2026\u002F06\u002Fopenwrt-router-review-dual-sim-06-1781620597879-qay2sx.webp","2026-06-16T08:39:00.000Z",{"id":570,"slug":571,"title":572,"excerpt":573,"featuredImage":574,"publishedAt":575},"467","the-answer-validity-boundary-the-missing-layer-between-relevance-and-reliable-ai-answers","Die Antwortgültigkeitsgrenze: Die fehlende Schicht zwischen Relevanz und zuverlässigen KI-Antworten","Eine Quelle kann relevant und maßgeblich sein und dennoch falsch für die gestellte Frage. Die fehlende Ebene ist die Anwendbarkeit: die Bedingungen, unter denen eine Antwort gilt, und die Veränderungen, die erzwingen, dass sie überdacht werden muss. Dieser Artikel führt die Answer Validity Boundary als ein Quellendesign-Muster für Menschen, KI-Suche und RAG-Systeme ein.","\u002Fuploads\u002F2026\u002F09\u002Fthe-answer-validity-boundary-the-missing-layer-between-relevance-and-reliable-ai-answers-1790272901306-1g5jly.webp","2026-09-24T11:59:00.000Z",{"id":577,"slug":578,"title":579,"excerpt":580,"featuredImage":581,"publishedAt":582},"452","zbt-z8102ax-5g-openwrt-router-review-dual-sim-rm500u-ea-and-an-honest-assessment","ZBT Z8102AX 5G OpenWrt Router Test: Dual-SIM, RM500U-EA und eine ehrliche Einschätzung","Der ZBT Z8102AX ist ein ungewöhnlicher 5G-Router mit einer OpenWrt-Basis, einem Dual-SIM-Konzept und einem Quectel RM500U-EA-Modem. Im Test zeigt er klare Stärken bei Flexibilität, Schnittstellen und mobiler Konnektivität, aber auch die typischen Schwächen eines vom Hersteller modifizierten OpenWrt-Builds.","\u002Fuploads\u002F2026\u002F06\u002Fopenwrt-router-review-dual-sim-01-1781620588908-fwmzj7.webp","2026-06-16T07:34:00.000Z",{"id":584,"slug":585,"title":586,"excerpt":587,"featuredImage":588,"publishedAt":589},"474","migrating-from-openai-agents-sdk-to-the-agents-api-what-actually-changes-architecturally","Migration vom OpenAI Agents SDK zur Agents API: Was ändert sich tatsächlich architektonisch?","Die Migration vom OpenAI Agents SDK zur neuen Agents API ist keine reine Umbenennung von Imports. Die Laufzeitgrenze verschiebt sich: Die Agent-Schleife, die dauerhafte Sitzung, die Orchestrierung, die Kontextkomprimierung und die Wiederherstellung bewegen sich in Richtung einer verwalteten Harness. Dieser Leitfaden zeigt, was verschoben werden sollte, was in Ihrer Anwendung bleiben sollte und wie Sie die Migration vor dem Cutover nachweisen können.","\u002Fuploads\u002F2026\u002F09\u002Fmigrating-from-openai-agents-sdk-to-the-agents-api-what-actually-changes-architecturally-1790352171968-ienxr9.webp","2026-09-25T12:01:00.000Z",{"id":591,"slug":592,"title":593,"excerpt":594,"featuredImage":595,"publishedAt":596},"473","openai-agents-api-vs-agents-sdk-vs-responses-api-what-should-you-build-on-in-2026","OpenAI Agents API vs. Agents SDK vs. Responses API: Worauf sollten Sie 2026 aufbauen?","Der Agent-Stack von OpenAI hat sich im September 2026 geändert. Dieser Architekturleitfaden unterscheidet die Agents API, das Agents SDK, die Responses API und das Codex SDK nach Runtime-Ownership—sodass Teams die richtige Kontrollgrenze wählen können, anstatt Produktnamen zu vergleichen.","\u002Fuploads\u002F2026\u002F09\u002Fopenai-agents-api-vs-agents-sdk-vs-responses-api-what-should-you-build-on-in-2026-1790351846714-zi7lus.webp","2026-09-25T11:56:00.000Z",{"id":598,"slug":599,"title":600,"excerpt":601,"featuredImage":602,"publishedAt":603},"479","where-does-an-llm-get-its-data-rag-data-sources-in-python","Woher bezieht ein LLM seine Daten? RAG-Datenquellen in Python","Ein LLM kennt deine Dateien, Datenbanken oder APIs nicht auf magische Weise. Diese praktische Fortsetzung der RAG-Reihe zeigt mit einfachem Python, wie externe Daten zu abrufbaren Belegen werden: von Textdateien und SQL bis hin zu Volltextsuche, Embeddings, Kontextzusammenstellung und dem abschließenden LLM-Aufruf.","\u002Fuploads\u002F2026\u002F09\u002Fwhere-does-an-llm-get-its-data-rag-data-sources-in-python-1790517200521-nfsi5i.webp","2026-09-27T05:51:00.000Z",{"id":605,"slug":606,"title":607,"excerpt":608,"featuredImage":609,"publishedAt":610},"443","linux","Aufkommende Linux-Trends 2026: Die Zukunft der Serverinfrastruktur gestalten","Entdecken Sie die wichtigsten Linux-Trends von 2026, von der Kubernetes-Dominanz und unveränderlichen Distributionen bis hin zur KI-Integration und eBPF-Sicherheit.","\u002Fuploads\u002F2026\u002F03\u002Flinux-1773696098750-knp03t.webp","2026-03-01T13:52:00.000Z",{"id":612,"slug":613,"title":614,"excerpt":615,"featuredImage":616,"publishedAt":617},"383","canonical-architecture-url-design-resolver-logic-api-scalability-specification","Kanonische Architektur, URL-Design, Resolver-Logik, API- & Skalierbarkeitsspezifikation","Geobasierte Erkennungsarchitektur für Mehrmandantenportale. Definiert kanonische URLs, Resolver-Logik, Caching-Strategie und ein Geo-Read-Modell ohne CMS-Kopplung oder Datenbank-Refactoring. Konzipiert für SEO-Stabilität, Skalierbarkeit und zukünftige Erweiterungen wie Buchung und Karten.","\u002Fuploads\u002F2026\u002F01\u002Fcanonical-architecture-url-design-resolver-logic-api-scalability-specification-1769890763607-7rghbp.webp","2026-01-31T06:12:00.000Z",{"id":619,"slug":620,"title":621,"excerpt":622,"featuredImage":623,"publishedAt":624},"386","enterprise-start-here-your-gateway-to-operational-excellence","Enterprise – Hier starten: Ihr Tor zu Operational Excellence","Neu auf unserer Enterprise-Plattform? Dieser Leitfaden bietet einen strukturierten Onboarding-Pfad, von grundlegenden Referenzmodellen bis hin zu umsetzbaren Playbooks, Runbooks und Assessments, die für eine nahtlose Implementierung konzipiert sind.","\u002Fuploads\u002F2026\u002F02\u002Ffrom-global-business-to-the-kitchen-a-reverse-communication-system-that-still-scales-1771251820950-zhp2bz.webp","2026-03-01T11:55:00.000Z",{"id":626,"slug":627,"title":628,"excerpt":629,"featuredImage":630,"publishedAt":631},"437","metrics","Umfassender Metrik-Leitfaden für Delivery und Change Management","Dieser Leitfaden bietet einen detaillierten Überblick über wesentliche Kennzahlen für Enterprise Delivery und Change Management und unterstützt Teams dabei, die Leistung zu messen, Prozesse zu optimieren und kontinuierliche Verbesserung voranzutreiben. Entdecken Sie Schlüsselindikatoren, Berechnungsmethoden und Best Practices, um Ihre Kennzahlen an Geschäftsergebnisse anzupassen.","\u002Fuploads\u002F2026\u002F06\u002Fmetrics-1781624416316-4nsuwg.webp","2026-03-01T17:51:00.000Z",{"id":633,"slug":634,"title":635,"excerpt":636,"featuredImage":637,"publishedAt":638},"484","what-is-an-ai-platform-architect-models-data-runtime-security-and-operations","Was ist ein KI-Plattform-Architekt? Modelle, Daten, Laufzeitumgebung, Sicherheit und Betrieb","Ein KI-Plattform-Architekt entwirft wiederverwendbare KI-Grundlagen über Modelle, Anbieter, Retrieval, Agenten, Identität, Sicherheit, Evaluierung, Observability und Betrieb hinweg.","\u002Fuploads\u002F2026\u002F10\u002Fwhat-is-an-ai-platform-architect-models-data-runtime-security-and-operations-1791477229171-ou3zcc.webp","2026-10-08T12:32:00.000Z",{"id":640,"slug":641,"title":642,"excerpt":643,"featuredImage":644,"publishedAt":645},"481","generative-ai-explained-models-retrieval-tools-and-applications-are-not-the-same-thing","Generative KI erklärt: Modelle, Retrieval, Tools und Anwendungen sind nicht dasselbe","Generative KI ist mehr als ein Modell. Erfahren Sie, wie Modelle, Retrieval, Tools, Kontext, Runtimes und Anwendungen in Produktions-KI-Systemen zusammenwirken.","\u002Fuploads\u002F2026\u002F10\u002Fgenerative-ai-explained-models-retrieval-tools-and-applications-are-not-the-same-thing-1791475411822-pp0dvz.webp","2026-10-08T12:00:00.000Z","fallback",[],[]]