PhpStorm Zen Coding

0

Shortcuts sind für jeden Programmierer, das Salz in der Suppe. Sie machen das Programmieren effektiver und motivieren dazu, da es viel Freude macht schnell und einfach zu arbeiten. PhpStorm Zen Coding ist schon installiert und direkt einsatzbereit. Die einfachste Art es zu testen ist in einer HTML-Datei „h1“ zu schreiben und die Tab-Taste zu drücken. Jetzt erzeugt PhpStorm „<h1></h1>“ und setzt den Curser dazwischen. Im täglichen Anwendungsfall brauche ich gar nicht lange verschachtelte Zen-Coding Snippets, sondern nur einzelne Tags. Aber nun erstmal zum Thema.

PhpStorm Zen Coding

PhpStorm Zen Coding

PhpStorm Zen Coding

Zen Coding ist eine Art Marko Sprache, damit man schnell und effektiv HTML, CSS, XML, XLS oder andere strukturierte Sprachen editieren kann. Die offizielle Seite zen-coding- Set of Plugins zeigt hierbei ein Beispiel und auch eine Liste von Webdevelopment IDEs. Man sieht hier, das praktisch alle die praktische Art Code zu schreiben implementiert haben, oder es einfach über ein Plugin nachgeladen werden kann. Kommen wir nun zu dem Beispiel Code.

PhpStorm Zen Coding Beispiel Code

hat man den Curser direkt hinter dem a-Tag stehen und drückt die Tabulator Taste wird folgender HTML-Code erzeugt.

Das ist ein sehr komplexes Beispiel und findet sich selten in der Praxis im praktischen Anwendungsbereich. Generell sind solch ausformulierte Listen auch eher selten und finden sich höchstens im Bereich des HTML Prototyping. Genau hier ist es aber schnell ein Werkzeug, welches man nicht mehr aus den Händen gibt. In dem oben genannten PhpStorm Zen Coding Beispiel sind verschiedene Code Snippets angewendet. Grundsätzlich startet jeder Part mit einem HTML Tag.

Dieses kleine Zen-Coding Snippet erzeugt

Die # wird also als Pendent zum CSS-Selector eine id erzeugt. Dasselbe gilt in diesem Zusammenhang natürlich auch für eine Klasse und kann an der Stelle auch kombiniert werden.

erzeugt also folegenden HTML-Code

Das Beispiel ist jetzt mal eine Anlehnung an Smacss. Da ich im täglichen Anwendungsgebiet eher in Bootstrap und Foundation zu Hause bin vielleicht mal ein hilfreicher Tip für die CSS Architektur.

Das „>“ Zeichen verschachtelt die HTML Tags und das „+“ Zeichen setzt sie hintereinander. Dazu kommt in dem Beispiel noch das „*“ als Multiplikator. Tatsächlich ist in täglichen Anwendungsfall aber eher ein einzelnes Tag mit ID und Klasse im Gebrauch. Das ist jedoch dann tatsächlich ein unverzichtbares Werkzeug und wichtiges Tool für die Produktivität beim Programmieren.

PhpStorm Zen Coding Video Tutorial

About Author

PHP Kurs und Inhouse Schulungen für Webdevelopment mit Continuous Integration - Clean Coder, Blogger, Autor, Dozent und Senior Webdeveloper www.rolandgolla.de

Leave A Reply

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.