Entwicklungsumgebung einstellen

01 - Sublime Text 2 04 - JSHint
02 - Sublime Package Control 05 - SublimeLinter
03 - node.js

01

Sublime Text 2

Der erste Schritt zu einer guten Entwicklungsumgebung liegt in der Installation eines ordentlichen Editors. Wichtig ist vor allem dass der Editor eine Syntaxhighlighting Funktion hat für mindestens JavaScript, HTML und CSS.

Es gibt mittlerweile sehr viele Editoren und jeder Entwickler ist davon überzeugt dass sein Editor der Beste ist. Allerdings setzt sich in letzter Zeit der sehr gute Sublime Text 2 durch, der allerdings nur in einer Evaluationsversion heruntergeladen werden kann und der irgendwann kostenpflichtig wird. Als Alternative gilt noch immer der auch sehr gute Notepad++.

Um Sublime Text 2 zu installieren muss man nur das Installationsprogramm für die richtige Architektur herunterladen und das Setup durchlaufen.

Die weiteren Schritte gehen davon aus dass Sublime Text 2 als Editor genutzt wird.

02

Sublime Package Control

Sublime Text 2 ist vielfältig erweiterbar durch Packages, was spezielle Addons sind die Zusatzfunktionen zur Verfügung stellen wie z.B. FTP Zugriff, Source Control usw. Um nicht den Überblick zu verlieren und um Packages effizienter zu installieren und zu entfernen, empfiehlt es sich Sublime Package Control zu installieren. Damit kann man bequem aus Sublime Text 2 heraus Packages finden, installieren und updaten.

Um Sublime Package Control zu installieren muss man nicht einmal Sublime Text 2 verlassen sondern man kann in der Console einen Befehl eingeben. Um die Console anzuzeigen kann man in Sublime Text 2 im Menü "View" und dann "Show Console" auswählen.

Danach muss man folgenden Befehl einfügen, ausführen und Sublime Text 2 neu starten:

Sublime Package Control installieren
import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

03

node.js

Etliche Packages für Sublime Text 2 sind selber in JavaScript geschrieben. Da sie allerdings nicht in einem Browser ausgeführt werden, muss man zuerst eine Plattform installieren die es erlaubt, diese JavaScript Packages auszuführen. Eine solche Plattform ist z.B. node.js.

Um node.js zu installieren muss man auf der Download Seite das Installationsprogramm für die richtige Architektur herunderladen und ausführen.

04

JSHint

JavaScript ist eine sehr flexible Programmiersprache die sehr viele Fehler vergibt. Deshalb gibt es Qualitätswerkzeuge für JavaScript (und andere Programmiersprachen) die einen während der Entwicklung darüber informieren, ob man Fehler gemacht hat. Der Vorteil ist zum einen dass man nicht erst das Programm im Browser ausführen muss und zum anderen dass man auf eventuelle Probleme aufmerksam gemacht werden kann, die der Browser erst gar nicht anzeigt.

Ein solches Qualitätswerkzeug für JavaScript, auch JavaScript Linter genannt, ist unter anderem JSHint. JSHint ist sehr konfigurierbar und erlaubt es, den Qualitätsgrad den man programmieren will, beliebig einzustellen.

JSHint funktioniert einwandfrei mit node.js und ist am leichtesten über den Node Package Manager zu installieren. Der Node Package Manager (kurz NPM) wurde bereits mit node.js mitinstalliert und wird über die Kommandozeile des Betriebsystems verwendet.

Um mittels NPM das oben erwähnte JSHint zu installieren muss man folgenden Befehl in der Kommandozeile eingeben:

JSHint installieren
npm install jshint -g

05

SublimeLinter

SublimeLinter ist ein Package für Sublime Text 2 das es erlaubt, JSHint aus Sublime Text 2 heraus zu benutzen um dort direkt im Quelltext die Fehler zu markieren. SublimeLinter ist auch frei konfigurierbar und kann unter anderem auch HTML und CSS testen (sowie sehr viele andere Programmsprachen falls die nötigen Linter installiert sind).

SublimeLinter lässt sich am leichtesten über Sublime Package Control installieren. Dazu muss man im Menü von Sublime Text 2 "Preferences" auswählen, dann "Package Control". Im erscheinenden Menü wählt man dann "Install Package" und schreibt dann "SublimeLinter" in das Eingabefenster. Mit der Maus kann man dann "SublimeLinter" auswählen und die Installation beginnt.

Nach der Installation sollte man Sublime Text 2 neu starten.

Um SublimeLinter zu konfigurieren kann man sogenannte User Settings definieren, die die globalen Einstellungen von SublimeLinter überschreiben. Damit lässt sich das Package auf die eigenen Bedürfnisse einstellen.

Um SublimeLinter einzustellen wählt man im Menü von Sublime Text 2 zuerst "Preferences", dann "Package Settings, "SublimeLinter" und schlussendlich "Settings - User". Sublime Text 2 öffnet nun eine Textdatei in der man die Einstellungen eingeben kann.

Im Kurs CLISS1 werden folgende Einstellungen benutzt, die man von hier kopieren und in die Textdatei einfügen soll. Danach die Textdatei speicheren und schliessen.

SublimeLinter Einstellungen
{
  /*
    Sets the mode in which SublimeLinter runs:

    true - Linting occurs in the background as you type (the default).
    false - Linting only occurs when you initiate it.
    "load-save" - Linting occurs only when a file is loaded and saved.
    "save-only" - Linting occurs only when a file is saved.
  */
  "sublimelinter": "save-only",
  
  // mark lines with errors by putting an "x" in the gutter
  "sublimelinter_gutter_marks": true,
  
  // http://www.jshint.com/docs/
  "jshint_options":
  {
    
    "regexdash": true,
    "browser": true,
    "wsh": true,
    "sub": true,
    "curly": true,
    "undef": true,
    "unused": true
  }
}
Sign In