{"id":3524,"date":"2019-04-14T08:51:00","date_gmt":"2019-04-14T08:51:00","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/"},"modified":"2026-04-24T11:32:09","modified_gmt":"2026-04-24T11:32:09","slug":"qualitat-ersten-5-einfachen-schritten-zu-lint-ihren-code-mit-github-workflows-in-javascript-projekt","status":"publish","type":"post","link":"https:\/\/thecodest.co\/de\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/","title":{"rendered":"Qualit\u00e4t geht vor! 5 einfache Schritte zum Linting Ihres Codes mit GitHub-Workflows im JavaScript-Projekt"},"content":{"rendered":"<p>Was sollen wir tun, wenn die <a href=\"https:\/\/thecodest.co\/de\/dictionary\/why-do-projects-fail\/\">Projekt<\/a> gering ist oder der Kunde noch nicht wei\u00df, ob es sich lohnt, mehr zu investieren? Offensichtlich ist bei der <strong><a href=\"https:\/\/thecodest.co\/blog\/product-building-with-mvp-why-is-this-worth-implementing\/\">MVP-Phase des Projekts<\/a><\/strong>, <a href=\"https:\/\/thecodest.co\/de\/dictionary\/what-is-code-refactoring\/\">Code<\/a> Styling oder Unit-Tests haben nicht die h\u00f6chste Priorit\u00e4t. Investoren wollen in der Regel eine gute <a href=\"https:\/\/thecodest.co\/de\/dictionary\/how-to-make-product\/\">Produkt<\/a> Und mal ehrlich - wenn es funktioniert, muss es doch nicht getestet werden, oder?<\/p>\n\n\n\n<p>Ich habe einige Erfahrung mit <strong><a href=\"https:\/\/thecodest.co\/contact\">Erstellung von Anwendungen von Grund auf<\/a><\/strong>auch ohne die Anwendung von Best Practices in erster Linie. Einige gesch\u00e4ftliche Umst\u00e4nde zwangen mich dazu, nach einem Kompromiss zwischen den Budgetpl\u00e4nen eines Investors und der \"Nice-to-have\"-Liste des Entwicklers zu suchen. Wenn Sie GitHub verwenden, lassen sich die meisten der \u00fcblichen Probleme im Zusammenhang mit der Codequalit\u00e4t gl\u00fccklicherweise in wenigen Minuten l\u00f6sen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>In diesem Artikel zeige ich Ihnen, wie Sie GitHub-Workflows in der Node.js-Umgebung verwenden k\u00f6nnen, um Ihre Codebase zu standardisieren.<\/strong><\/h2>\n\n\n\n<p>Ein paar Annahmen, bevor wir beginnen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sie sind mit NPM und der Linux-Konsole vertraut.<\/li>\n\n\n\n<li>Sie haben einige Erfahrung mit Style-Pr\u00e4prozessoren, Modulladern, Bundlern usw.<\/li>\n\n\n\n<li>Sie wissen, wozu Linters da sind, und wollen sie wirklich f\u00fcr Ihre Projekte verwenden.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1. Typische JavaScript-Projektstruktur<\/strong><\/h2>\n\n\n\n<p>Wenn Sie jemals ein <a href=\"https:\/\/thecodest.co\/de\/blog\/javascript-tools-in-action\/\">JS<\/a> Rahmenwerke wie <a href=\"https:\/\/thecodest.co\/de\/blog\/hire-vue-js-developers\/\">Vue<\/a> oder <a href=\"https:\/\/thecodest.co\/de\/blog\/conditional-component-visibility-in-react\/\">React<\/a>k\u00f6nnen Sie leicht einige Gemeinsamkeiten zwischen ihnen erkennen, z. B.:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>\/src<\/em> Verzeichnis mit Ihrer gesamten JS-Logik und Komponenten,<\/li>\n\n\n\n<li><em>\/test<\/em> Verzeichnis f\u00fcr Unit- und e2e-Tests,<\/li>\n\n\n\n<li><em>\/Verm\u00f6genswerte<\/em> Verzeichnis f\u00fcr Stile, Bilder usw.<\/li>\n<\/ul>\n\n\n\n<p>Auch wenn es sich um <a href=\"https:\/\/thecodest.co\/de\/blog\/hire-javascript-developer\/\">JavaScript<\/a> Projekt, arbeiten wir in <a href=\"https:\/\/thecodest.co\/de\/dictionary\/what-is-node-js-used-for\/\">Knotenpunkt<\/a> Umgebung, also sollte es offensichtlich auch einige Node-Sachen geben wie <em>paket.json<\/em>, <em>paket-lock.json<\/em> und <em>\/node_modules<\/em> Katalog in unserem Stammverzeichnis.<\/p>\n\n\n\n<p>All diese Dinge sind an ihrem Platz - das nennen wir die <strong>Tagung<\/strong>. Frameworks werden erfunden, um einige vern\u00fcnftige Konventionen bereitzustellen, so dass wir uns normalerweise nicht einmal um das urspr\u00fcngliche Entwurfsmuster k\u00fcmmern m\u00fcssen. Da ich in diesem Beispiel einige Ans\u00e4tze erl\u00e4utern m\u00f6chte, werde ich keine gebrauchsfertigen L\u00f6sungen wie Vue CLI verwenden.<\/p>\n\n\n\n<p><strong>Es ist an der Zeit zu verstehen, was sich hinter all diesen magischen Fusselskripten verbirgt!<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2. Erweiterung des typischen Node-Projekts<\/strong><\/h2>\n\n\n\n<p>Um qualitativ hochwertige L\u00f6sungen anbieten zu k\u00f6nnen, sind Linters das erste, womit wir beim Einrichten eines neuen Projekts beginnen sollten. Konzentrieren wir uns auf zwei Linters - Stylelint f\u00fcr Stile (<em>*.scss<\/em>) und ESLint f\u00fcr Quelldateien (<em>*.js<\/em>). Beide Linters sind bei NPM verf\u00fcgbar und ziemlich einfach zu konfigurieren. Die Verwendung von Linters erfordert den Installationsprozess, das Hinzuf\u00fcgen von Konfigurationsdateien und die Definition von Projektskripten. Lassen Sie uns Schritt f\u00fcr Schritt vorgehen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3. Hinzuf\u00fcgen von Stylelint<\/strong><\/h2>\n\n\n\n<p>Die Installation von Stylelint in der Node-Umgebung ist sehr einfach. Gem\u00e4\u00df <a href=\"https:\/\/stylelint.io\/user-guide\/get-started\">offizielle Dokumente<\/a>m\u00fcssen Sie nur noch laufen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm install --save-dev stylelint stylelint-konfig-standard<\/code><\/pre>\n\n\n\n<p>und warten, bis es fertig ist.<\/p>\n\n\n\n<p><em>stylelint-konfig-standard<\/em> bietet einen Standardsatz von Linting-Regeln und kann durch ein beliebiges Paket ersetzt werden, das Ihren Bed\u00fcrfnissen besser entspricht (z. B. <a href=\"https:\/\/www.npmjs.com\/package\/stylelint-config-airbnb\">Airbnb-Stil<\/a>). Erstellen Sie dann eine neue versteckte Datei <em>.stylelintrc.json<\/em>die Stylelint-Konfigurationsdatei, die f\u00fcr das Laden unserer vordefinierten Regeln verantwortlich ist:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">{\n    \"extends\": \"stylelint-config-standard\"\n}<\/code><\/pre>\n\n\n\n<p>Im Moment fehlt nur noch ein NPM-Skript (oder Skripte), das in der package.json-Datei deklariert ist, um das Linting unserer SCSS-Dateien zu starten. Hier ist mein Vorschlag:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\"Skripte\": {\n    \"lint:scss\": \"stylelint '**\/*.scss' --syntax scss -f verbose --color\",\n    \"lint:scss:fix\": \"stylelint '**\/*.scss' --syntax scss --fix -f verbose -color\"\n}<\/code><\/pre>\n\n\n\n<p>Wie Sie sehen k\u00f6nnen, habe ich das Skript mit <strong>-fix<\/strong> zu verwenden, bevor die \u00c4nderungen in das Repository \u00fcbertragen werden.<\/p>\n\n\n\n<p><strong>Denken Sie daran - es ist eine schlechte Praxis, die <em>-fix<\/em> in Ihrem CI-Flow, denn dann wird der Code, den Sie an die Produktion \u00fcbergeben, im Repository nicht richtig gestylt.<\/strong> Deshalb brauchen wir die beiden Skripte.<\/p>\n\n\n\n<p>Testen wir unseren Linter, indem wir eine Datei erstellen <em>\/assets\/scss\/styles.scss<\/em> mit einigen Inhalten, wie:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">body {\n                    Hintergrundfarbe: #fff;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm lint:scss ausf\u00fchren<\/code><\/pre>\n\n\n\n<p>In Ihrer Konsole sollten Sie etwa Folgendes sehen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">&gt; stylelint '**\/*.scss' --syntax scss -f verbose --color\n\nassets\/scss\/styles.scss\n\n2:21 \u2716 Erwartete Einr\u00fcckung von 2 Leerzeichen Einr\u00fcckung\n\n1 Quelle gepr\u00fcft\n\n~\/Codest\/Projects\/github-workflow-demo\/assets\/scss\/styles.scss\n\n1 Problem gefunden\n\nSchweregrad \"Fehler\": 1\n\nEinr\u00fcckung: 1\n\nnpm ERR! code ELIFECYCLE\n\nnpm ERR! errno 2\n\nnpm ERR! github-workflow-demo@1.0.0 lint:scss: `stylelint '**\/*.scss' --syntax scss -f verbose --color`\n\nnpm ERR! Exit-Status 2<\/code><\/pre>\n\n\n\n<p>Das bedeutet, dass unser Linter tats\u00e4chlich funktioniert!<\/p>\n\n\n\n<p>Die Ausgabe zeigt genau an, welche Zeile einen Fehler verursacht und beschreibt das zu l\u00f6sende Problem. Einige Probleme k\u00f6nnen nicht automatisch behoben werden, da sie die Entscheidung eines Entwicklers erfordern, aber in den meisten F\u00e4llen m\u00fcssen Sie nur denselben Befehl mit <strong>-fix<\/strong> Option, also f\u00fchren wir sie aus.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm lint:scss:fix ausf\u00fchren<\/code><\/pre>\n\n\n\n<p>Jetzt sollten Sie eine gr\u00fcne Ausgabe sehen, bei der keine Fehler gefunden wurden:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">stylelint '**\/*.scss' --syntax scss --fix -f verbose --color\n\n\n1 Quelle gepr\u00fcft\n\n\/Benutzer\/wojciechbak\/Codest\/Projekte\/github-workflow-demo\/assets\/scss\/styles.scss\n\n0 Probleme gefunden<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>4. Hinzuf\u00fcgen von ESLint<\/strong><\/h2>\n\n\n\n<p>Dieser Schritt ist fast derselbe wie der vorherige. Wir werden ESLint installieren, einige Standardregeln definieren und zwei aufrufbare NPM-Skripte deklarieren - eines f\u00fcr CI, eines f\u00fcr Pre-Push. Gehen wir das durch!<\/p>\n\n\n\n<p>Wenn Sie NPM bei Ihrer t\u00e4glichen Arbeit verwenden, m\u00f6chten Sie vielleicht ESLint global installieren. Wenn nicht, lesen Sie bitte die Installationsanweisungen in <a href=\"https:\/\/eslint.org\/docs\/user-guide\/getting-started\">offizielle Dokumente<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm install -g eslint<\/code><\/pre>\n\n\n\n<p>Wenn der Befehl eslint auf Ihrem Rechner verf\u00fcgbar ist, f\u00fchren Sie ihn einfach in Ihrem Projekt aus:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">eslint --init<\/code><\/pre>\n\n\n\n<p>Befolgen Sie die weiteren Anweisungen in Ihrem Terminal und treffen Sie einige Projektentscheidungen, z. B:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Javascript oder <a href=\"https:\/\/thecodest.co\/de\/dictionary\/typescript-developer\/\">TypeScript<\/a><\/li>\n\n\n\n<li>Airbnb-Stil oder Google-Stil<\/li>\n\n\n\n<li>Konfigurationstyp (JSON-Datei, JS-Datei oder Inline in <em>paket.json<\/em>)<\/li>\n\n\n\n<li>ES-Module (<em>Import\/Export<\/em>) oder <em>erfordern<\/em> Syntax<\/li>\n<\/ul>\n\n\n\n<p>An dieser Stelle lohnt es sich, ein Wort \u00fcber den Code-Formatierer namens Prettier zu schreiben. Es ist vollst\u00e4ndig standardisiert und kompatibel mit den meisten Code-Editoren (z.B. VS Code). Prettier bietet viele vordefinierte Regeln f\u00fcr die Gestaltung von Code, arbeitet mit Linters zusammen und kann eine gro\u00dfe Unterst\u00fctzung bei der Suche nach Top-Qualit\u00e4t des Codes sein. Um zu verstehen, was Prettier genau ist, besuchen Sie diese Seite <a href=\"https:\/\/prettier.io\/docs\/en\/comparison.html\">Vergleich<\/a> aus den offiziellen Dokumenten.<\/p>\n\n\n\n<p>Wenn dies geschehen ist, wird die ESlint-Konfigurationsdatei (z.B. <em>.eslintrc.json<\/em>(je nachdem, was Sie vorher gew\u00e4hlt haben) sollte in Ihrem Stammverzeichnis erscheinen, irgendwo neben <em>.stylelintrc.json<\/em> vorher erstellt.<\/p>\n\n\n\n<p>Jetzt m\u00fcssen wir Skripte definieren in <em>paket.json<\/em> Datei, genau wie bei SCSS-Dateien:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\"Skripte\": {\n    \"lint:js\": \"eslint '**\/*.js' --ignore-pattern node_modules\/\",\n    \"lint:js:fix\": \"eslint '**\/*.js' --ignore-pattern node_modules\/ --fix\"\n}<\/code><\/pre>\n\n\n\n<p>Herzlichen Gl\u00fcckwunsch! ESLint ist jetzt sofort einsatzbereit. Lassen Sie uns \u00fcberpr\u00fcfen, ob es korrekt funktioniert. erstellen <em>\/src\/index.js<\/em> Datei mit einigem Inhalt:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">console.log(\"etwas\");<\/code><\/pre>\n\n\n\n<p>Linter ausf\u00fchren:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm lint:js ausf\u00fchren<\/code><\/pre>\n\n\n\n<p><code><br><\/code>Die Ausgabe sollte wie folgt aussehen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">&gt; eslint '**\/*.js' --ignore-pattern node_modules\/\n\n~\/Codest\/Projects\/github-workflow-demo\/src\/index.js\n\n1:1 warning Unerwartete Konsolenanweisung no-console\n\n\u2716 1 Problem (0 Fehler, 1 Warnung)<\/code><\/pre>\n\n\n\n<p>Diese Warnung wird nicht verschwinden, wenn Sie <em>-fix<\/em> Option, denn <strong>linters hat keinen Einfluss auf potenziell sinnvollen Code. Sie sind nur f\u00fcr das Styling von Code<\/strong>einschlie\u00dflich Leerzeichen, Zeilenumbr\u00fcche, Semikolons, Anf\u00fchrungszeichen usw.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>5. Definition von GitHub-Workflows<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/help.github.com\/en\/actions\/configuring-and-managing-workflows\/configuring-a-workflow\">GitHub-Workflows<\/a> sind eine ziemlich gut dokumentierte Sache. F\u00fchlen Sie sich frei, tiefer in diese zu graben, aber f\u00fcr jetzt, ich werde einen einfachen Workflow implementieren, um unseren Code nach dem Push auf das Remote-Repository (nat\u00fcrlich auf GitHub gehostet) zu lint.<\/p>\n\n\n\n<p>erstellen. <em>\/.github\/workflows<\/em> Verzeichnis und neue <em>code-qualit\u00e4t-workflow.yml<\/em> Datei enthalten, da GitHub-Workflows mit YAML-Dateien definiert werden m\u00fcssen.<\/p>\n\n\n\n<p>Um einen ordnungsgem\u00e4\u00dfen Arbeitsablauf durchzuf\u00fchren, m\u00fcssen wir einige Fragen beantworten:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wann wollen wir unseren Workflow ausf\u00fchren (bei Push, bei Pull Request, bei Merge usw.)?<\/li>\n\n\n\n<li>Sollen bestimmte Situationen ausgeschlossen werden (z. B. Push-to-Branch-Master)?<\/li>\n\n\n\n<li>Welche Umgebung m\u00fcssen wir einrichten, um unsere Befehle korrekt auszuf\u00fchren (in diesem Beispiel - Node)?<\/li>\n\n\n\n<li>M\u00fcssen wir Abh\u00e4ngigkeiten installieren? Wenn ja, wie sollten wir sie zwischenspeichern?<\/li>\n\n\n\n<li>Welche Schritte m\u00fcssen wir unternehmen, um die Pr\u00fcfung abzuschlie\u00dfen?<\/li>\n<\/ul>\n\n\n\n<p>Nach einigen \u00dcberlegungen und einigen Stunden Arbeit mit docs example <em>.yml<\/em> Datei kann folgenderma\u00dfen aussehen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"yaml\" class=\"language-yaml\">Name: Codequalit\u00e4t\n\nEin: 'Push'\n\nAuftr\u00e4ge:\n  Code-Qualit\u00e4t:\n    name: Lint Quellcode\n    l\u00e4uft auf: ubuntu-latest\n    Schritte:\n    - verwendet: actions\/checkout@v1\n\n    - Name: Knoten einrichten\n      verwendet: actions\/setup-node@v1\n      mit:\n        node-version: '12.1'\n\n    - name: Cache-Abh\u00e4ngigkeiten\n      verwendet: actions\/cache@v1\n      mit:\n        Pfad: .\/node_modules\n        Schl\u00fcssel: $(( runner.OS ))-dependencies-$(( hashFiles('<strong>**\/package-lock.json')<\/strong> ))\n        Wiederherstellungs-Schl\u00fcssel: |\n          $(( runner.OS ))-Abh\u00e4ngigkeiten-$(( env.cache-name ))-\n          $(( runner.OS ))-Abh\u00e4ngigkeiten-\n          $(( runner.OS ))-\n\n    - name: Abh\u00e4ngigkeiten installieren\n      ausf\u00fchren: |\n        npm installieren\n\n    - Name: Lint-Dateien\n      ausf\u00fchren: |\n        npm lint ausf\u00fchren<\/code><\/pre>\n\n\n\n<p>GitHub stellt alle ben\u00f6tigten Umgebungsdaten zur Verf\u00fcgung. In der letzten Zeile f\u00fchren wir den Befehl <strong><em>npm lint ausf\u00fchren<\/em><\/strong> die vorher nicht definiert war:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\"Skripte\": {\n    \"lint\": \"npm run lint:js &amp;&amp; npm run lint:scss\"\n}<\/code><\/pre>\n\n\n\n<p>Beachten Sie, dass ich in unserem Arbeitsablauf nicht mit <strong>:fix<\/strong> Befehle.<\/p>\n\n\n\n<p>Wenn alle diese Schritte erledigt sind, k\u00f6nnen Sie diese sch\u00f6ne Ausgabe von GitHub genie\u00dfen, bevor Sie Ihren Pull Request zusammenf\u00fchren: <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/ec82df2be0b1977d857d5f5c1d2d893010fc44a4\/68747470733a2f2f692e696d6775722e636f6d2f425848465370372e706e67\" alt=\"\"> <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/00e93d296b7bf5b089c7b785ecc1cbd18de54ead\/68747470733a2f2f696d6775722e636f6d2f6f63736e6762362e706e67\" alt=\"\"><\/p>","protected":false},"excerpt":{"rendered":"<p>Die Codequalit\u00e4t ist ein entscheidender Teil des Entwicklungsprozesses, vor allem wenn man langfristig effizient arbeiten will. Es gibt viele Ans\u00e4tze und bew\u00e4hrte Praktiken, einschlie\u00dflich der ganzen agilen Methodik, aber die meisten davon beziehen sich auf ein gro\u00dfes Unternehmensprojekt, das von mindestens sechs Personen durchgef\u00fchrt wird.<\/p>","protected":false},"author":2,"featured_media":3525,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3524","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project - The Codest<\/title>\n<meta name=\"description\" content=\"Code quality is a crucial part of the development process, especially when you want to work efficiently in a long-term manner. There are many approaches and best practices, including whole agile methodologies stuff, but most of them relate to some big, enterprise project conducted by at least 6 people.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/de\/blog\/qualitat-ersten-5-einfachen-schritten-zu-lint-ihren-code-mit-github-workflows-in-javascript-projekt\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project\" \/>\n<meta property=\"og:description\" content=\"Code quality is a crucial part of the development process, especially when you want to work efficiently in a long-term manner. There are many approaches and best practices, including whole agile methodologies stuff, but most of them relate to some big, enterprise project conducted by at least 6 people.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/de\/blog\/qualitat-ersten-5-einfachen-schritten-zu-lint-ihren-code-mit-github-workflows-in-javascript-projekt\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-14T08:51:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-24T11:32:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project\",\"datePublished\":\"2019-04-14T08:51:00+00:00\",\"dateModified\":\"2026-04-24T11:32:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/\"},\"wordCount\":1187,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-137.jpg\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/\",\"name\":\"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-137.jpg\",\"datePublished\":\"2019-04-14T08:51:00+00:00\",\"dateModified\":\"2026-04-24T11:32:09+00:00\",\"description\":\"Code quality is a crucial part of the development process, especially when you want to work efficiently in a long-term manner. There are many approaches and best practices, including whole agile methodologies stuff, but most of them relate to some big, enterprise project conducted by at least 6 people.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-137.jpg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/cover-image-137.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/de\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Qualit\u00e4t geht vor! 5 einfache Schritte zum Linting Ihres Codes mit GitHub-Workflows im JavaScript-Projekt - The Codest","description":"Die Codequalit\u00e4t ist ein entscheidender Teil des Entwicklungsprozesses, vor allem wenn man langfristig effizient arbeiten will. Es gibt viele Ans\u00e4tze und bew\u00e4hrte Praktiken, einschlie\u00dflich der ganzen agilen Methodik, aber die meisten davon beziehen sich auf ein gro\u00dfes Unternehmensprojekt, das von mindestens sechs Personen durchgef\u00fchrt wird.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thecodest.co\/de\/blog\/qualitat-ersten-5-einfachen-schritten-zu-lint-ihren-code-mit-github-workflows-in-javascript-projekt\/","og_locale":"de_DE","og_type":"article","og_title":"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project","og_description":"Code quality is a crucial part of the development process, especially when you want to work efficiently in a long-term manner. There are many approaches and best practices, including whole agile methodologies stuff, but most of them relate to some big, enterprise project conducted by at least 6 people.","og_url":"https:\/\/thecodest.co\/de\/blog\/qualitat-ersten-5-einfachen-schritten-zu-lint-ihren-code-mit-github-workflows-in-javascript-projekt\/","og_site_name":"The Codest","article_published_time":"2019-04-14T08:51:00+00:00","article_modified_time":"2026-04-24T11:32:09+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","type":"image\/jpeg"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"6\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project","datePublished":"2019-04-14T08:51:00+00:00","dateModified":"2026-04-24T11:32:09+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/"},"wordCount":1187,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","articleSection":["Software Development"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/","url":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/","name":"Qualit\u00e4t geht vor! 5 einfache Schritte zum Linting Ihres Codes mit GitHub-Workflows im JavaScript-Projekt - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","datePublished":"2019-04-14T08:51:00+00:00","dateModified":"2026-04-24T11:32:09+00:00","description":"Die Codequalit\u00e4t ist ein entscheidender Teil des Entwicklungsprozesses, vor allem wenn man langfristig effizient arbeiten will. Es gibt viele Ans\u00e4tze und bew\u00e4hrte Praktiken, einschlie\u00dflich der ganzen agilen Methodik, aber die meisten davon beziehen sich auf ein gro\u00dfes Unternehmensprojekt, das von mindestens sechs Personen durchgef\u00fchrt wird.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/cover-image-137.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/quality-first-5-easy-steps-to-lint-your-code-with-github-workflows-in-javascript-project\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Quality first! 5 easy steps to lint your code with GitHub workflows in JavaScript project"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"Der Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"Der Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/de\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/posts\/3524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/comments?post=3524"}],"version-history":[{"count":9,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/posts\/3524\/revisions"}],"predecessor-version":[{"id":8622,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/posts\/3524\/revisions\/8622"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/media\/3525"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/media?parent=3524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/categories?post=3524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/de\/wp-json\/wp\/v2\/tags?post=3524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}