Sobald Sie mit der Entwicklung einer Website beginnen, ist ein Texteditor, egal ob es sich um eine einfache oder IDE.
In dieser Folge haben Addy und Matt sieht sich die Plug-ins an Sublime Text und besprechen Sie, alle bei ihrem Workflow helfen.
Paketsteuerung
Um auf die Pakete (oder Plug-ins) in der Folge zu verweisen, müssen Sie Installieren Sie Package Control, die Sie installieren möchten, finden Sie Anleitung dazu finden Sie hier.
JSHint
JSHint ist ein JavaScript-Linter, der Ihren JavaScript-Code überprüft und hebt mögliche Fehler oder unzulässige Praktiken in Ihrem Code hervor.
Wenn Sie beispielsweise versehentlich einen Variablennamen falsch eingegeben haben,
unten zeigt JSHint an, dass fo nie definiert wurde und
verursacht einen Fehler.
var foo = { bar: 'Hello, World.' };
var msg = fo.bar;
JSHint-Plug-in weist auf das Problem hin, indem es ein gelbes Feld um den entsprechenden Wenn Sie den Cursor in dieses Code-Snippet platzieren, wird eine Fehlermeldung angezeigt, die links unten in Sublime angezeigt wird.
Andere Probleme, die auftreten können:
- Variablen, die definiert, aber nie verwendet werden
- Das Erstellen von Funktionen innerhalb von Schleifen vermeiden
- Die richtigen Vergleichsmethoden verwenden
Installieren des SublimeLinter-JSHint-Pakets müssen Sie auch das SublimeLinter installieren Anleitung zum SublimeLinter-JSHint Package.
Für einige Entwickler kann es hilfreich sein, JSHint-Gutter Plug-ins hinzu. Es fügt einen kleinen Punkt in das Feld in eine Zeile ein, die ein JSHint-Problem aufweist.
JSCS
JSCS hebt alle Stellen hervor, an denen Ihrem JavaScript-Code keinem bestimmten Programmierstil entspricht.
Mit JSCS kann z. B. definiert werden, ob Leerzeichen wird nach Keywords wie "if" oder zur Definition, ob geschweifte Klammern sollte sich in derselben oder in einer neuen Zeile einer Methode befinden.
SublimeLinter-JSCS-Paket Alle Probleme werden inline in einem ähnlichen Stil wie in JSHint hervorgehoben. sodass Probleme leicht behoben werden können.
Das ist äußerst hilfreich, wenn es um die Arbeit in einem da alle dem gleichen Styleguide folgen Ihren Code einheitlich zu halten.
Und das Beste ist, dass Sie mit dem JSCS-Formatter-Paket alle Probleme auf der Seite automatisch beheben können.
durch Drücken von ctrl + shift + p und Eingabe von "JSCS Formatter: Diese Datei formatieren"
und drücken Sie die Eingabetaste. Weitere Informationen dazu findest du in Addys Blogpost.
Farbmarker
Farbmarker eine Farbe zum Hintergrund Ihrer in Ihrem CSS- oder Sass-Tool festlegen.
Sie können festlegen, ob sie als Unterstreichung mit einem wenn Sie mit der Maus darauf zeigen, oder immer auf den Hintergrund. zeigt Farbe auf dem Definitionshintergrund an. Gehe einfach zu „Package Settings“ (Paketeinstellungen) > „Color Highlighter“ > „Einstellungen – Standard“ um die Anfangseinstellungen und ändern Sie Ihre Einstellungen unter 'Einstellungen - Nutzer'.
Zur vollständigen Hervorhebung im Hintergrund Fügen Sie unter 'Einstellungen - Nutzer' Folgendes hinzu: Datei:
{
"ha_style": "filled"
}
Dachrinnenfarbe
Rinnenfarbe ist eine Alternative zur Farbhervorhebung. statt die Farbe über der Variablen Farbe anzuzeigen, die Farbe in den Spaltenabstand dieser Linie.
Farbauswahl
Wenn Sie schnell und einfach eine Farbe aus Ihrem Bildschirm auswählen möchten dann das Color Picker Package ist vielleicht das Richtige für Sie.
Drücken Sie ctrl + shift + c und boomen – schon haben Sie eine Farbauswahl.
AutoFileName
AutoFileName ist ein einfaches Plug-in, wird Ihnen während der Eingabe eine Liste möglicher Dateien angezeigt. Das ist super wenn Sie einen Bildnamen eingeben oder CSS- oder JS-Datei hinzufügen, um Zeit zu sparen und reduziert das Risiko von Tippfehlern.
Autopräfix
Wir alle haben einen Moment der Erkenntnis erlebt, in dem wir vergessen haben, CSS-Eigenschaft mit Präfix hinzufügen. Mit Autopräfix führen Sie es einfach in Ihrem CSS aus. fügen Sie alle benötigten Präfixe hinzu.
Es bedeutet, dass wir von hier aus weitermachen...
.container-thingy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
indem Sie ctrl + shift + p drücken und
„CSS mit Autopräfix“ und drücken Sie die Eingabetaste.
.container-thingy {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
Sie können auch festlegen, welche Browser und Browserversionen die Sie in den Paketeinstellungen unterstützen möchten. Rufen Sie die Seite Paketkontrolle .
Mehr...
Es gibt noch viele weitere Plug-ins, Sublime Text. Sehen Sie sich daher die Funktion Paketsteuerung an.
Weitere Tipps und Ratschläge finden Sie finden Sie in der hervorragenden Präsentation von WesBos Tastenkombinationen und andere Plug-ins für Sublime Text.
WesBos hat außerdem ein Buch mit dem Titel „Sublime Text for the Power User“ was auch für euch interessant sein könnte :)