Einführung in Sublime Text 2, ein Web-Frontend-Tool

Einführung in Sublime Text 2, ein Web-Frontend-Tool

Sublime Text 2 ist ein leichter, einfacher, effizienter und plattformübergreifender Editor. Der Blogger verwendet Notepdd++ zum Schreiben von Front-End-Code und es ist recht einfach zu verwenden. Ich habe schon lange von Sublime gehört, war aber nie zu faul, es auszuprobieren, da ich dachte, es sei in Ordnung, solange das Tool einfach zu verwenden ist. Ich hatte diese Tage plötzlich Lust, es herunterzuladen und probierte es aus. Das Ergebnis ist... . . Infolgedessen hat der Blogger Notepad++ schamlos aufgegeben. . . Im Folgenden werde ich dieses Front-End-Artefakt basierend auf den Erfahrungen des Bloggers in den letzten Tagen vorstellen. Da ich es erst seit kurzer Zeit verwende, hoffe ich, dass Sie mir verzeihen, wenn ich einige unangemessene Dinge sage.

Es gibt zwei Versionen von Sublime für Windows:
Normal
Sublime Text-bezogene Dateien werden in zwei Verzeichnissen abgelegt, eines für das Programm und seine zugehörigen Dateien und eines für die portable Datenversion (Portable).
Alle mit Sublime Text verbundenen Dateien werden in einem Ordner abgelegt (das wird empfohlen, damit Sie den Computer wechseln und die Dateien direkt kopieren können. Sie müssen keine Plug-Ins installieren oder irgendetwas konfigurieren. Das ist doch so cool, oder?)

Sublime ist nicht nur einfach zu bedienen, sondern verfügt auch über leistungsstarke Plugins. So installieren Sie die Plugins:
1. Direkt installieren <br />Die Installation des Sublime Text 2-Plug-Ins ist sehr praktisch. Sie können das Installationspaket direkt herunterladen und in das Verzeichnis „Pakete“ (Einstellungen -> Pakete) entpacken.
2. Installation mit der Package Control-Komponente (empfohlen)
Drücken Sie Strg+` (` ist das Symbol über der Tabulatortaste. Ich habe in anderen Tutorials danach gesucht, aber es hat lange gedauert, bis ich es gefunden habe...), um die Konsole aufzurufen.
Fügen Sie den folgenden Code in die untere Befehlszeile ein und drücken Sie die Eingabetaste:
importiere urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) wenn nicht os.path.exists(ipp) sonst None;öffnen(os.path.join(ipp,pf),'wb').schreiben(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).lesen())
Starten Sie Sublime Text 2 neu.
Wenn Sie unter „Einstellungen“ -> „Paketeinstellungen“ den Eintrag „Paketsteuerung“ sehen, war die Installation erfolgreich.

Drücken Sie dann Strg+Umschalt+P, geben Sie „Installationspaket“ ein, geben Sie schließlich den Plug-In-Namen ein und drücken Sie die Eingabetaste. Alles sieht gut aus, aber diese Installationsmethode kann in einer Umgebung mit einem Proxy fehlschlagen. Die Umgebung meines Unternehmens ist so. Wie kann ich das Problem lösen? Die Lösung lautet wie folgt:

1. Laden Sie den Proxifier herunter, bitte googeln Sie (die Registrierung des Proxifiers kann von Sicherheitssoftware als Trojaner angesehen werden, Sie müssen ihn also zuerst freigeben)
2. Richten Sie einen Proxyserver ein
Konfigurationsdatei =》Proxyserver =》Hinzufügen
Proxy-Adresse: z. B. xx.xx.com
Port: z.B. 8080
https
3. Konfigurieren Sie die Proxy-Regeln und fügen Sie die entsprechende EXE zu den Proxy-Regeln von Sublime hinzu

Liste nützlicher Plugins (die folgenden Plugins wurden vom Blogger installiert und sind wirklich cool) :

Emmet (Zencoding, hat seinen Namen geändert, aber viele Websites verwenden immer noch diesen Namen)
Schreiben Sie schnell HTML-Code und drücken Sie zum Aufrufen Strg+Alt+Eingabe. Weitere Informationen finden Sie unter: http://docs.emmet.io/abbreviations/syntax/

SublimeLinter
Ein Plugin, das die Lint-Syntax unterstützt. Drücken Sie Strg+Alt+L, um es aufzurufen (es steht im Konflikt mit der QQ-Sperre, ändern Sie also den Hotkey selbst), um die Codezeilen hervorzuheben, die der Linter für falsch hält.

jQuery
Das sollten sich Studierende, die mit jQuery arbeiten, nicht entgehen lassen. Nach dem Schreiben einfach die Tabulatortaste drücken und schon erwartet euch eine Überraschung.

Ausrichtung
Code-Ausrichtung, z. B. das Schreiben einiger Variablen, deren Auswahl, Strg+Alt+A, das wird Leuten gefallen, die von Code-Sauberkeit besessen sind

Klammern-Textmarker
Markieren Sie übereinstimmende Codes. Klammern, Anführungszeichen, Tags usw. können übereinstimmen.

DocBlockr
Automatische Kommentare, vollständig konform mit jsdoc-Standards, drücken Sie einfach /**, Sie müssen sich keine Gedanken mehr über Kommentare machen

Präfixr
Beim Schreiben von CSS können Sie automatisch private Affixe wie -webkit hinzufügen, ausgelöst durch Strg+Alt+X


Schlagwörter
HTML-Formatierung: Klicken Sie mit der rechten Maustaste auf „Tags automatisch formatieren“ im Dokument.


JS-Format
Ein Plugin zur Formatierung von JS-Code. Mit Strg+Alt+F formatieren Sie den Code und machen ihn in wenigen Minuten schön.

Thema - Limonade

Dieses Thema ist ziemlich cool. Fügen Sie in den Einstellungen->Benutzereinstellungen "color_scheme" hinzu: "Pakete/Farbschema - Standard/Monokai Soda.tmTheme",
"Thema": "Soda Dark.sublime-Thema"
Installieren Sie ein neues Codefarbschema. Klicken Sie auf „Einstellungen“ -> „Pakete durchsuchen“, um das Paketinstallationsverzeichnis zu öffnen, suchen Sie den Ordner „Farbschema – Standard“ und installieren Sie das heruntergeladene neue Farbschema.


Tastenkombinationen für Sublime Text:
Strg+Umschalt+P: Befehlsfeld öffnenStrg+P: Im Projekt nach Dateien suchenStrg+G: Zur Zeile springenStrg+W: Aktuell geöffnete Datei schließenStrg+Umschalt+W: Alle geöffneten Dateien schließenStrg+Umschalt+V: Einfügen und formatierenStrg+D: Wort auswählen. Wiederholen, um das nächste identische Wort auszuwählenStrg+L: Zeile auswählen. Wiederholen, um die nächste Zeile in der Sequenz auszuwählenStrg+Umschalt+L: Mehrere Zeilen auswählenStrg+Umschalt+Eingabe: Neue Zeile vor der aktuellen Zeile einfügenStrg+M: Zur entsprechenden Klammer springenStrg+U: Soft Undo, Cursorposition rückgängig machenStrg+J: Tag-Inhalt auswählenStrg+F: Inhalt suchenStrg+Umschalt+F: Suchen und ersetzenStrg+H: ErsetzenStrg+R: Zur Methode gehen
Strg+N: Neues Fenster erstellenStrg+K+B: Seitenleiste wechselnStrg+Umschalt+M: Aktuellen Inhalt der Klammer auswählen, die Klammer selbst kann wiederholt ausgewählt werdenStrg+F2: Markierung setzen/löschenStrg+/: Aktuelle Zeile kommentierenStrg+Umschalt+/: Kommentar an aktueller Position einfügenStrg+Alt+/: Kommentar blockieren und auf erste Zeile fokussieren, Kommentarbeschreibung schreibenF11: VollbildUmschalt+F11: Vollbild, Nicht stören-Modus, nur aktuelle Datei bearbeitenAlt+F3: Alle identischen Wörter auswählenAlt+Umschalt+Zahl: Bildschirmanzeige teilenAlt+Zahl: Wechseln, um die N-te Datei zu öffnenStrg+Tab: Registerkarte wechseln
Strg+Umschalt+Auf- und Ab-Tasten zum Ersetzen von Zeilen

Wenn Sie Ihre Arbeit gut machen möchten, müssen Sie zuerst Ihre Werkzeuge schärfen. Ja, Sublime ist definitiv ein leistungsstarkes Front-End-Tool. Verwenden Sie es weiterhin und fassen Sie es zusammen. Wenn Sie gute, großartige Plug-Ins und Tipps haben, fügen Sie sie bitte hinzu, danke.

<<:  Leitfaden zum Schreiben von HTML-Code

>>:  So starten Sie die RabbitMq-Software automatisch, wenn CentOS gestartet wird

Artikel empfehlen

jQuery-Plugin zur Implementierung des Suchverlaufs

Jeden Tag ein jQuery-Plugin – um einen Suchverlau...

So öffnen Sie den Port in Centos7

Die Standard-Firewall von CentOS7 ist nicht iptab...

Beispielcode für horizontales Balkendiagramm von Echarts Bar

Inhaltsverzeichnis Horizontales Balkendiagramm Da...

Strategie zur Optimierung der Leistung von MySQL-Datenbankabfragen

Optimieren von Abfragen Verwenden der Explain-Anw...

Installieren Sie Python 3.6 unter Linux und vermeiden Sie Fallstricke

Installation von Python 3 1. Abhängige Umgebung i...

JavaScript, um den Effekt des Klickens auf das Untermenü zu erzielen

In diesem Artikel wird der spezifische JavaScript...

Lösung für das Routing-Hervorhebungsproblem von Vue-Komponenten

Vorwort Früher habe ich den Cache verwendet, um d...

Nginx leitet dynamisch an Upstream weiter, entsprechend dem Pfad in der URL

In Nginx gibt es einige erweiterte Szenarien, in ...

JavaScript-Komposition und Vererbung erklärt

Inhaltsverzeichnis 1. Einleitung 2. Vererbung der...