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.