Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m293:learningunits:lu04:statischecodeanalyse [2024/03/28 14:07] – created - external edit 127.0.0.1
+++ modul:m293:learningunits:lu04:statischecodeanalyse [2025/05/15 13:12] (aktuell) – kmaurizi
@@ Zeile 4: / Zeile 4: @@
-WebStorm ist eine integrierte Entwicklungsumgebung (IDE) von JetBrains, die speziell für Webentwickler entwickelt wurde. Sie bietet eine Reihe von Funktionen, um Ihnen zu helfen, einen konsistenten und sauberen Code-Stil einzuhalten:
+WebStorm ist eine integrierte Entwicklungsumgebung (IDE) von JetBrains, die speziell für Webentwickler entwickelt wurde.
+Sie bietet eine Reihe von Funktionen, um Ihnen zu helfen, einen konsistenten und sauberen Code-Stil einzuhalten:
-  - **Automatische Formatierung:** WebStorm kann Ihren Code automatisch formatieren, um die Einrückung, Abstände und Zeilenumbrüche gemäß den konfigurierten Code-Style-Regeln anzupassen. Sie können die automatische Formatierung verwenden, indem Sie Strg + Alt + L (Windows/Linux) oder Cmd + Alt + L (Mac) drücken.
+=== Automatische Formatierung ===
-  - **Code-Style-Konfiguration:** WebStorm ermöglicht Ihnen, benutzerdefinierte Code-Style-Regeln für verschiedene Sprachen wie HTML, CSS und JavaScript einzustellen. Sie finden die Einstellungen unter File > Settings > Editor > Code Style. Sie können die Regeln für Einrückung, Leerzeichen, Umbrüche und Leerzeilen anpassen.
+WebStorm kann Ihren Code automatisch formatieren, um die Einrückung, Abstände und Zeilenumbrüche gemäss den konfigurierten Code-Style-Regeln anzupassen.
-  - **Linters und Code-Analyse-Tools:** WebStorm unterstützt die Integration von Lintern wie z.B TSLint. Diese Tools können Ihnen dabei helfen, Ihren Code-Stil zu überprüfen und sicherzustellen, dass er den festgelegten Standards entspricht.
+Sie können die automatische Formatierung verwenden, indem Sie Strg + Alt + L (Windows/Linux) oder Cmd + Alt + L (Mac) drücken.
-  - **Live-Vorlagen und Code-Snippets:** Sie können Live-Vorlagen und Code-Snippets verwenden, um häufig verwendete Codeblöcke schnell und konsistent einzufügen. Sie können eigene Vorlagen erstellen oder die von WebStorm bereitgestellten Vorlagen verwenden.
-  - **Datei- und Code-Vorlagen:** WebStorm bietet Datei- und Code-Vorlagen, die als Ausgangspunkt für neue Dateien dienen und den vom Projekt vorgegebenen Stil beibehalten. Sie können unter File > Settings > Editor > File and Code Templates angepasst und verwaltet werden.
+=== Code-Style-Konfiguration ===
-  - **Code-Inspektionen:** WebStorm führt Code-Inspektionen durch, um mögliche Probleme und Inkonsistenzen im Code-Stil zu erkennen. Die IDE hebt problematische Bereiche hervor und bietet schnelle Lösungen, um den Code-Stil zu verbessern.
+WebStorm ermöglicht Ihnen, benutzerdefinierte Code-Style-Regeln für verschiedene Sprachen wie HTML, CSS und JavaScript einzustellen.
-  - **Echtzeit-Feedback:** WebStorm bietet Echtzeit-Feedback zu Ihrem Code-Stil, während Sie tippen. Die IDE kann Ihnen dabei helfen, sofortige Korrekturen vorzunehmen und so einen konsistenten Stil beizubehalten.
+Sie finden die Einstellungen unter ''File > Settings > Editor > Code Style''.
+Sie können die Regeln für Einrückung, Leerzeichen, Umbrüche und Leerzeilen anpassen.
+=== Linters und Code-Analyse-Tools ===
+WebStorm unterstützt die Integration von Lintern wie z.B TSLint.
+Diese Tools können Ihnen dabei helfen, Ihren Code-Stil zu überprüfen und sicherzustellen, dass er den festgelegten Standards entspricht.
+=== Live-Vorlagen und Code-Snippets ===
+Sie können Live-Vorlagen und Code-Snippets verwenden, um häufig verwendete Codeblöcke schnell und konsistent einzufügen.
+Sie können eigene Vorlagen erstellen oder die von WebStorm bereitgestellten Vorlagen verwenden.
+=== Datei- und Code-Vorlagen ===
+WebStorm bietet Datei- und Code-Vorlagen, die als Ausgangspunkt für neue Dateien dienen und den vom Projekt vorgegebenen Stil beibehalten.
+Sie können unter ''File > Settings > Editor > File and Code Templates'' angepasst und verwaltet werden.
+=== Code-Inspektionen ===
+WebStorm führt Code-Inspektionen durch, um mögliche Probleme und Inkonsistenzen im Code-Stil zu erkennen.
+Die IDE hebt problematische Bereiche hervor und bietet schnelle Lösungen, um den Code-Stil zu verbessern.
+=== Echtzeit-Feedback ===
+WebStorm bietet Echtzeit-Feedback zu Ihrem Code-Stil, während Sie tippen.
+Die IDE kann Ihnen dabei helfen, sofortige Korrekturen vorzunehmen und so einen konsistenten Stil beizubehalten.
 Indem Sie diese Funktionen von WebStorm nutzen, können Sie sicherstellen, dass Ihr Code konsistent, sauber und in Übereinstimmung mit den gewünschten Code-Style-Regeln ist.
 ===== Linter für HTML installieren =====
-Ein Linter ist ein Programm, das den Quellcode analysiert und auf Probleme, Inkonsistenzen, Verstöße gegen Best Practices oder Stilrichtlinien hinweist. Linter helfen Entwicklern, potenzielle Fehler, Stilprobleme und schlechte Praktiken in ihrem Code frühzeitig zu erkennen, bevor sie zu Problemen führen. Sie unterstützen dabei, sauberen und konsistenten Code zu schreiben und die Codequalität insgesamt zu verbessern. Wenn Sie Ihren Code auf Github pushen, wird dieser durch [[https://htmlhint.com/|htmlhint]] einer statischen Code-Analyse unterzogen. Damit Sie diese auch bereits auf ihrem Notebook machen können installieren Sie htmlhint auf ihrem Notebook.
+Ein Linter ist ein Programm, das den Quellcode analysiert und auf Probleme, Inkonsistenzen, Verstösse gegen Best Practices oder Stilrichtlinien hinweist. Linter helfen Entwicklern, potenzielle Fehler, Stilprobleme und schlechte Praktiken in ihrem Code frühzeitig zu erkennen, bevor sie zu Problemen führen. Sie unterstützen dabei, sauberen und konsistenten Code zu schreiben und die Codequalität insgesamt zu verbessern. Wenn Sie Ihren Code auf Github pushen, wird dieser durch [[https://htmlhint.com/|htmlhint]] einer statischen Code-Analyse unterzogen. Damit Sie diese auch bereits auf ihrem Notebook machen können installieren Sie htmlhint auf ihrem Notebook.
 ==== Installation ====
@@ Zeile 28: / Zeile 50: @@
   - Nach der Installation können Sie HTMLHint verwenden, um Ihre HTML-Dateien zu überprüfen. Um beispielsweise eine Datei namens index.html zu überprüfen, navigieren Sie zum Verzeichnis, in dem sich die Datei befindet, und führen Sie den folgenden Befehl aus: \\ ''htmlhint index.html''
-HTMLHint wird die Datei analysieren und Probleme oder Verstösse gegen die Standardregeln melden. Sie können die Regeln anpassen, indem Sie eine Konfigurationsdatei namens ''.htmlhintrc'' in Ihrem Projektverzeichnis erstellen und die gewünschten Regeln darin festlegen.
+HTMLHint wird die Datei analysieren und Probleme oder Verstösse gegen die Standardregeln melden.
-Um Ihre Konfiguration zu verwenden, führen Sie den Befehl ''htmlhint index.html --config .\.htmlhintrc'' aus.
+Sie können die Regeln anpassen, indem Sie eine Konfigurationsdatei namens ''.htmlhintrc'' in Ihrem Projektverzeichnis erstellen und die gewünschten Regeln darin festlegen.
+Um Ihre Konfiguration zu verwenden, führen Sie diesen Befehl aus:
+<code>
+htmlhint --config .\.github\linters\.htmlhintrc index.html
+</code>
+Natürlich müssen Sie den Namen der zu prüfenden Datei (hier ''index.html'') anpassen.
+Um alle HTML-Dateien im aktuellen Projekt zu prüfen, verwenden Sie:
+<code>
+htmlhint --config .\.github\linters\.htmlhintrc *.html
+</code>
 Informationen zu den verfügbaren Regeln und ihrer Konfiguration finden Sie in der HTMLHint-Dokumentation (https://htmlhint.com/docs/user-guide/list-rules).
@@ Zeile 51: / Zeile 84: @@
 {{ :modul:m293:learningunits:lu04:terminal.png?800 |}}
 Dieses Terminal öffnet sich automatisch im Workspace-Ordner.
-Tippen Sie nun ''htmlhint --config .\.github\linters\.htmlhintrc'' ins Terminal-Fenster und hmtlhint wird ihren Code statisch analysieren und ihnen einen Bericht liefern.
+Tippen Sie nun ''htmlhint %%--%%config .\.github\linters\.htmlhintrc'' ins Terminal-Fenster und hmtlhint wird ihren Code statisch analysieren und ihnen einen Bericht liefern.
 <WRAP center round important 60%>
 Da wir eine an die BZZ-Standards angepasste htmlhint-Config verwenden müssen **wir den Pfad zur Config immer angeben**.
-**Windows:** ''htmlhint --config .\.github\linters\.htmlhintrc''
+**Windows:** ''htmlhint %%--%%config .\.github\linters\.htmlhintrc''
-**Unix:** ''htmlhint --config ./.github/linters/.htmlhintrc''
+**Unix:** ''htmlhint %%--%%config ./.github/linters/.htmlhintrc''
 </WRAP>