Niklas Knaack Dev Blog: 2014/05

5/15/2014

Sublime Text 3 & Browser Preview

Wer mit Sublime Text 3 HTML-Code schreiben möchte, der will diesen auch bequem und auf direktem Weg im Browser testen. Ich möchte hier einen einfachen Weg zeigen, wie sich das über ein Build System realisieren lässt. Ganz ähnlich wie in meinem letzten Tutorial zum Thema: „Sublime Text 3 & JavaScript Build System“.

Öffnet den Sublime Text Editor und geht nun im Menü auf den Punkt „Tools“, und dann im Untermenü auf den Punkt „Build System“ und im Anschluss auf „New Build System...“.

Nun solltet ihr eine neue Datei mit dem Namen „untitled.sublime-build“ erzeugt haben, wie ihr im folgenden Screenshot sehen könnt.

In diese neue Datei müsst ihr nun folgenden Code einfügen (Der Pfad ist natürlich davon abhängig wo ihr den Browser, in meinem Fall, den Mozilla Firefox installiert habt).

 {  
   "cmd": ["firefox.exe", "$file"],  
   "path": "c:\\Program Files (x86)\\Mozilla Firefox",  
   "selector": ["source.html"]  
 }

Speichert die Datei mit STRG + S am folgenden Ort ab:

 C:\Users\[username in here]\AppData\Roaming\Sublime Text 3\Packages\User

Den Dateinamen vor „.sublime-build“ könnt ihr euch frei aussuchen. Ich hab die Datei
„FirefoxPreview.sublime-build“ genannt. Das Ganze sollte jetzt also so aussehen:

Geht nun wieder ins Menü, unter „Tools“, „Build System“ findet ihr den neuen Menüpunkt
„FirefoxPreview“. Klickt diesen an, um euer Build System zu aktivieren.

Zum Testen könnt ihr euch ganz einfach eine kleine Hello World HTML Datei erstellen. Hier ein Beispiel:

 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="utf-8">  
   <title>Hello World</title>  
  </head>  
  <body>  
   Hello World  
  </body>  
 </html>

Speichert die neue HTML Datei ab und öffnet diese nun mit der Tastenkombination STRG + B in eurem Browser.

Falls ihr alles richtig gemacht habt, öffnet sich nun der Firefox und zeigt die HelloWorld Beispiel Seite an.

Bitte beachtet, dass dieses Tutorial für Windows Rechner geschrieben worden ist und vorraussetzt, dass ihr den Mozilla Firefox Browser bereits installiert habt. Das Ganze lässt sich natürlich auch für alle anderen Browser umsetzen. Dazu muss lediglich das Script für das Build System entsprechend angepasst werden.
Für Google Chrome hab ich folgendes Build System erfolgreich getestet:

 {  
   "cmd": ["chrome.exe", "$file"],  
   "path": "c:\\Program Files (x86)\\Google\\Chrome\\Application",  
   "selector": ["source.html"]  
 }

5/14/2014

Sublime Text 3 & JavaScript Build System

Wenn ihr mit Sublime Text 3 JavaScript schreiben wollt, werdet ihr schnell feststellen, dass eine entsprechende Console nicht vorhanden ist zum Debuggen. Es fehlt ein JavaScript Build System. Und genau hier möchte ich ansetzen und euch zeigen wie man ein neues Build System hinzufügt. Im Netz gibt es dafür schon einen ganzen Haufen an mehr oder weniger nützlichen Tutorials zu dem Thema, aber die meisten haben bei mir nicht funktioniert.

Bevor es losgehen kann müsst ihr, falls nicht schon geschehen, Node.js installieren. Geht dazu einfach auf http://www.nodejs.org/ und klickt auf „INSTALL“ und folgt dann den Anweisungen.

Habt ihr Node.js erfolgreich installiert, öffnet den Sublime Text Editor und schaut im Menü unter dem Punkt „Tools“ nach „Build System“. Dort seht ihr nun eine ganze Reihe an Build Systems, wie z.B. für C++, Python, Ruby und viele andere. Nur eben nicht für JavaScript. Klickt nun, wie im folgenden Screenshot zu sehen ist, ganz unten auf den Menüpunkt „New Build System…“.

Nun solltet ihr eine neue Datei mit dem Namen „untitled.sublime-build“ erzeugt haben, wie ihr im folgenden Screenshot sehen könnt.

In diese neue Datei müsst ihr nun folgenden Code einfügen (Ggf. müsst ihr den Pfad in Zeile 3 anpassen, falls ihr bei der Installation von Node.js nicht den Standard-Ordner gewählt habt).

 {  
   "cmd": ["node.exe", "$file"],  
   "path": "c:\\Program Files\\nodejs",  
   "selector": ["source.js"]  
 }

Eure neue Datei sollte nun wie folgt aussehen.

Speichert die Datei nun mit z.B. STRG + S unter dem Namen „Javascript.sublime-build“, oder „Node.sublime-build“ ab. Den Namen vor „.sublime-build“ könnt ihr euch frei aussuchen. Die Datei speichert ihr unter diesem Pfad hier ab:

 C:\Users\[username in here]\AppData\Roaming\Sublime Text 3\Packages\User

Wenn ihr nun wieder im Menü auf „Tool“ und danach dann auf „Build System“ klickt, sollte in der Liste der Build Systems nun ein neuer Menüpunkt aufgetaucht sein. Wenn der Name von der eben neu erzeugten Datei „Javascript.sublime-build“ ist, steht nun unten in der Liste JavaScript als neuer Menpunkt. Ihr könnt jetzt noch auf genau diesen neuen Menüpunkt „JavaScript“ klicken und so das Build Script aktivieren, oder ihr startet Sublime Text neu, dann sollte Sublime Text das über den Menüpunkt „Automatic“ dank dem Selector auch automatisch hinbekommen. Siehe Screenshot:

Das war es eigentlich schon. Zum Testen könnt ihr einfach ein HelloWorld.js anlegen:

Drückt nun zum Testen STRG + B und ihr seht in der Console die Ausgabe „Hello World“.

Noch ein paar allgemeine Infos. Ich habe dieses Tutorial für die Version 3.047 von Sublime Text erstellt. Ich arbeite an einem Windows Rechner. Das Tutorial sollte aber sicher auch für Mac User funktionieren, nur müssen dann entsprechend die Pfade angepasst werden und die Tastenkombinationen sind entsprechend anders.