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:
„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.
„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.
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"]
}
Keine Kommentare:
Kommentar veröffentlichen