Die besten IDEs und Texteditoren für den Front-End-Entwickler

Vor ein Dutzend oder zwei Jahren wurden Websites mit den Händen und einem normalen Texteditor erstellt. Schreiben Sie Ihre eigenen HTML-Tags, ein wenig Magie mithilfe von Inline-Stilen in CSS, gewürzt mit unterhaltsamen Animationen – und schon ist die Website einsatzbereit. Heutzutage ist die Erstellung und Entwicklung einer Website oder Anwendung ein strukturierter Prozess. Sie können mit dem Website-Builder in einer Minute eine Website erstellen oder sich mehrere Monate lang damit herumquälen. Da sich die Webentwicklung verändert, entstehen neue Frameworks, Plugins und Anwendungen, um die Codierung zu optimieren. Zusätzliche Tools vereinfachen Ihre Arbeitsumgebung und steigern die Produktivität. Wir nutzen Versionskontrollsysteme für die kollaborative Open-Source-Projektverwaltung und Bibliotheken wie jQuery. Die Entwicklungsumgebung spielt bei der Erstellung einer Website eine sehr wichtige Rolle. Die Auswahl des idealen Textverarbeitungsprogramms kann eine herausfordernde, aber machbare Aufgabe sein, die den Einsatz empirischer Forschung erfordert. Wie kann man sich in diesem Meer aus Tools, Anwendungen und Plugins nicht verlieren? Welchen Texteditor sollten Sie für die tägliche Arbeit und welchen für Lieblingsprojekte wählen? Wir haben eine kurze Liste der beliebtesten Tools für Einsteiger in Frontend-Entwickler zusammengestellt. Haben wir vergessen, Ihren Lieblingsredakteur im Artikel zu erwähnen? Hinterlasse einen Kommentar!

Notepad++

Veröffentlichung: 24. November 2003. Der einfachste Texteditor mit Syntaxhervorhebung und Tabulatoren. Unterstützt viele Programmiersprachen und Technologien. Perfekt für einen Anfänger, der gerade erst auf die schlüpfrige Seite der Webentwicklung getreten ist. Möglichkeiten:

• Lesezeichen erstellen;
• automatisches Kopieren und Speichern erstellter Dateien;
• Unterstützung und Konvertierung von Standard-Textkodierungen;
• Benutzer können selbstständig Regeln für die Syntaxhervorhebung festlegen;
• Installation verschiedener nützlicher Plugins;
• Festlegen und Neudefinieren von Hotkeys;
• Rechtschreibprüfung und Textverschlüsselung;
• Tetris spielen (falls Sie das Programmieren satt haben);
• kann große Datenmengen verwalten.

Als zusätzliches „Feature“ dieses Editors gilt ein „Easter Egg“ in Form der Anzeige von Zitaten des Dunklen Vaters – Darth Vader und des Vaters des „Hassordners“ – Bill Gates. Der Wermutstropfen: eine zu vereinfachte Benutzeroberfläche, die nicht den heutigen Entwicklungsstandards entspricht. Es kann mit dem Licht einer Taschenlampe am Tag verglichen werden. Syntaxhervorhebung: + Automatische Tag-Erkennung: + Betriebssystemkompatibilität: Windows, ReactOS. Kostenlose Version: ja. Link: https://notepad-plus-plus.org/download/v7.5.1.html

Klammern

Veröffentlicht: 4. November 2014. Adobe hat viele coole Produkte, die bei Frontend-Entwicklern und -Designern beliebt sind. Und Brackets ist einer von ihnen. Dieser kostenlose, quelloffene und plattformübergreifende Editor basiert auf JavaScript, HTML5 und CSS3 und konzentriert sich daher in seiner Arbeit speziell auf diese. Wenn Sie über grundlegende JavaScript-Kenntnisse verfügen, ist dies der Editor, mit dem Sie beginnen sollten. Denn er ist es, der alle notwendigen Werkzeuge für die Expansion bereitstellt. Der Editor bedarf einiger Verbesserungen, aber insgesamt wird er recht aktiv weiterentwickelt und erfreut sich bei Entwicklern großer Beliebtheit. Darüber hinaus kann jeder Benutzer eigene Änderungen vornehmen und zusätzliche Erweiterungen erstellen. Möglichkeiten:

• Tipps zum Bearbeiten von JS-, CSS- und HTML-Dateien;
• Unterstützung für die Anzeige von Code in einem Browser in Echtzeit (Live-Vorschau);
• Synchronisierung mit FTP-Server;
• Unterstützung und automatische Kompilierung von CSS in weniger Dateien;
• bietet eine Auswahl an Schriftarten (mit der Möglichkeit, diese hinzuzufügen), die Sie beim Arbeiten mit Text verwenden können;
• Arbeiten mit dem Versionskontrollsystem – Git.

Die neue Version von 2017 führte die Möglichkeit ein, den Verlauf zu durchsuchen, Dateien mit unterschiedlichen Kodierungen zu senden und zu empfangen, mithilfe von Hotkeys durch den Bearbeitungsverlauf zu navigieren, Erweiterungen zu aktivieren und zu deaktivieren sowie ein natives Menü für Linux. Syntaxhervorhebung: + Automatische Tag-Erkennung: + Betriebssystemkompatibilität: macOS, Windows und Linux. Kostenlose Version: ja. Link: http://brackets.io

Sublimieren

Veröffentlichung: 18. Januar 2008. Plattformübergreifender Code-Editor und integrierte Entwicklungsumgebung (IDE). Wir mochten diesen Editor wegen seiner Geschwindigkeit und Benutzerfreundlichkeit, während Coda und TextMate auf der Strecke blieben und die Hauptbenutzerbasis mit sehr umständlichen Updates enttäuschten. Möglichkeiten:

• schnelle Navigation durch Dateien, Symbole und bestimmte Codeabschnitte (weshalb es von vielen Benutzern geliebt wird);
• Die Syntaxprüfung funktioniert sofort, wenn Sie Zeichen eingeben;
• Optimierung und Wiederholung aktueller Aktionen mithilfe von Makros;
• automatische Speicherung des Codes, um dessen Verlust zu verhindern;
• Unterstützung für verschiedene visuelle Themen und Programmiersprachen;
• Speichern häufig verwendeter Schlüsselwörter und Codefragmente;
• eine Reihe vorgefertigter Plugins in Python;

Syntaxhervorhebung: + Automatische Tag-Erkennung: + Betriebssystemkompatibilität: Windows, Mac OS, GNU/Linux. Kostenlose Version: ja (ohne Funktionseinschränkungen), aber nach Prüfung der Anwendung müssen Sie eine Lizenz erwerben. Link: http://www.sublimetext.com/3

WebStorm

Veröffentlichung: 2015. Dies ist kein gewöhnlicher Texteditor, sondern auch eine integrierte Entwicklungsumgebung für JavaScript, CSS und HTML. Seine Autoren sind JetBrains, dasselbe Unternehmen, das die von JavaRush-Studenten beliebte IntelliJ IDEA-Umgebung entwickelt hat. WebStorm ist einer der intelligentesten und beliebtesten Editoren. Unterstützt die wichtigsten Frameworks: AngularJS, React und Meteor und wird zum Erstellen einer Anwendung auf Node.js verwendet. WebStorm ist eine recht komplexe Umgebung, eignet sich aber gleichzeitig hervorragend für diejenigen, die viele Erweiterungen und Funktionen benötigen. Möglichkeiten:

• Funktioniert dank der Integration mit den Versionskontrollsystemen Git, GitHub und Mercurial effektiv mit Projekten unterschiedlicher Größe. Dadurch können Sie direkt in der IDE Dateien „festschreiben“, Änderungen überprüfen und Konflikte lösen.
• LiveEdit – zeigt vorläufige Änderungen an, ohne die Seite neu zu laden (funktioniert mit dem Google Chrome-Browser);
• Code-Analyse während der Bearbeitung;
• Refactoring und Debugging von Code für Javascript- und Node.js-Anwendungen;
• Unterstützung für die Sprachen ECMAScript, TypeScript, CoffeeScript und Dart;
• Erstellen von Anwendungen mithilfe der Node.js Express-Vorlage;
• Starten und Debuggen mit Frameworks wie Mocha, Karma und Protractor. Sie können es im Editor selbst oder in einem praktischen Baummenü testen, von dem aus Sie schnell zum Text zurückkehren können;
• LESS-, Sass-, SCSS- und Stylus-Präprozessoren werden vollständig unterstützt;
• Schnellsuche im Terminalfenster;
• Strukturierung von Projekten, die mehrere Javascript-Bibliotheken umfassen;
• Unterstützung für JQuery, YUI, Prototype, DoJo, MooTools, Qooxdoo und Bindows;
• Erstunterstützung und Arbeit mit Angular 2.

Syntaxhervorhebung: + Automatische Tag-Erkennung: + Betriebssystemkompatibilität: Windows, Mac OS, GNU/Linux. Kostenlose Version: Es gibt eine Testversion für 30 Tage, danach müssen Sie eine Lizenz erwerben. Link: http://www.jetbrains.com/webstorm/

Atom

Veröffentlichung: 26. Februar 2014. Kostenlose Open-Source-Software, erstellt von den Autoren des beliebtesten Github aller . Es basiert auf 50 Modulen und ist in Node JS, CoffeeScript, CSS, HTML und C++ geschrieben. Sie können auch eigene Module entwickeln und diese in einem Repository für den offenen Zugriff veröffentlichen. Diese Entwicklungsumgebung ist recht einfach zu bedienen und zusätzliche Plugins tragen dazu bei, die Möglichkeiten der Arbeit damit zu erweitern. Möglichkeiten:

• verwendet GUI für die Konfiguration anstelle von JSON-Dateien;
• Anzeigen einer Minikarte des Codes und seiner Fragmente;
• schnelle Suche nach Projekten und Dateien;
• praktische Seitenleiste und Dateibaum;
• eine große Anzahl an Erweiterungspaketen, die auf Github verfügbar sind;
• Emmet, Autoprefixer, Livereload-Unterstützung;
• Anzeigen einer Datei über den Seitenleistenbaum;
• die Möglichkeit, den Editor an individuelle Benutzerpräferenzen anzupassen;
• Vorhandensein eines integrierten Dateimanagers;
• Es ist nicht erforderlich, ein Steuerungspaket mit Plugins zu installieren, es reicht aus, die grafische Benutzeroberfläche zu verwenden;
• Unterstützung für in Node.js geschriebene Plugins;
• Vorschau von PNG- und JPEG-Bildern direkt im Editor;
• bietet die Arbeit mit dem Git-Versionskontrollsystem an.

Der Nachteil könnte sein, dass es viel Speicher benötigt und nicht in der Lage ist, große Datendateien zu verarbeiten. Syntaxhervorhebung: + Automatische Tag-Erkennung: + Betriebssystemkompatibilität: Windows 7, 8, Mac OS 10.8, Linux. Kostenlose Version: ja. Link: https://atom.io

Vim

Veröffentlichung: 2. November 1991. Sie fragen sich vielleicht: Was hat der alte Vim in dieser Liste moderner Editoren vergessen? Tatsächlich ist Vim ein völlig moderner und leistungsstarker Texteditor, der auf der Grundlage des alten vi erstellt wurde und auf UNIX-Betriebssystemen verfügbar ist. Und es entwickelt sich ständig weiter. Entwickler nehmen fast jedes Jahr Änderungen vor und fügen neue Plugins und Add-ons hinzu. Das letzte Mal geschah dies im Jahr 2016, und die Anzahl der Erweiterungen und die Geschwindigkeit sind wirklich erstaunlich und einen Blick wert. Vim ist ein Multimodus-Editor. Sie können in mehreren gleichzeitig arbeiten: Befehl, Einfügen oder Visual. Es ist jedoch zu bedenken, dass es für einen unerfahrenen Entwickler recht komplex ist. Obwohl Spezialisten mit langjähriger Erfahrung viele seiner Funktionen nicht kennen. Möglichkeiten:

• Unterstützung für Standardtextkodierungen;
• Sie können mit mehreren Dateien gleichzeitig arbeiten;
• automatische Erkennung und Konvertierung von Dateien;
• Kompatibilität mit den Programmiersprachen Perl, Tcl, Python und Ruby;
• Erstellen komfortabler Einstellungen für die Bedürfnisse jedes Benutzers;
• Aufzeichnen und Implementieren von Makros;
• Der visuelle Modus kann viele nützliche Funktionen ausführen (z. B. Textblöcke hervorheben).
• Unterstützung für nicht standardmäßige Sprachen, die von rechts nach links geschrieben werden (wie Arabisch oder Hebräisch);
• praktische Einstellungen für Suchwörter und Befehlsverlauf;
• Unterstützt die vollständige Nutzung der Tastatur ohne Maus;
• zeigt erstaunliche Leistung bei der Arbeit mit großen Dateien.

Syntaxhervorhebung: + Automatische Tag-Erkennung: + Betriebssystemkompatibilität: Windows, DOS, Linux, BSD und Mac OS, iOS, Android, AmigaOS, Atari MiNT, BeOS, NextStep, OS/2, OSF, RISC OS, SGI, VMS. Kostenlose Version: ja. Link: https://vim.sourceforge.io/download.php

Netbeans

Veröffentlicht: 1997. Kostenlose Open-Source-IDE, gesponsert von Oracle und unterstützt von begeisterten Entwicklern. Es wird ständig weiterentwickelt und durch verschiedene Erweiterungen zur Komfort- und Geschwindigkeitsverbesserung ergänzt. Möglichkeiten:

• Fenster- und Speicherverwaltung;
• Änderungen an der Benutzeroberfläche und am Design (einschließlich Menüs und Popups);
• Einrichten einer Verbindung mit einem Remote-Server;
• Code-Refactoring verfügbar;
• es gibt Add-ons, Vorlagen und Codegeneratoren;
• unterstützt viele Programmiersprachen;
• automatische Syntaxprüfung und -korrektur;
• Anpassen des Editors an die Bedürfnisse des Benutzers;
• Starten und Debuggen von JavaScript- und Node.JS-Anwendungen;
• Unterstützung für PHP-Frameworks (Symfony, Zend und Yii).

Wermutstropfen: Es verbraucht viel Speicher. Syntaxhervorhebung: + Automatische Tag-Erkennung: + Betriebssystemkompatibilität: Microsoft Windows, Linux, FreeBSD, Mac OS X, OpenSolaris und Solaris. Kostenlose Version: ja. Nur ist es kostenlos. Link: https://netbeans.org

Hardcore-Bonus: Notepad, auch bekannt als „Notepad“

Veröffentlichung: 1985, zusammen mit Windows 1.0. Ja, ja, derselbe Notepad, der standardmäßig auf allen Ihren Windows-Computern installiert ist. „Was hat diese Antike hier vergessen? Was hat DAS mit Entwicklung zu tun?“, fragen Sie. Tatsächlich verstehen wir, dass es unwahrscheinlich ist, dass irgendjemand heute etwas Ernsthaftes im klassischen Notepad erstellen wird. Allerdings haben viele unerfahrene Entwickler in den letzten 15 bis 20 Jahren mit diesem Programm ihre ersten Websites „zusammengestellt“ und ihre ersten Programme geschrieben. Wir meinen damit, dass Sie nichts aufhalten sollte, wenn Sie lernen wollen. Für einen echten Entwickler (und jemanden, der es werden möchte) ist Notepad kein Hindernis. Features: nur schwarzer Text, nur Hardcore. Ein Wermutstropfen: Kein Wermutstropfen: „Notepad“ ist perfekt in seinem Minimalismus! Syntaxhervorhebung: nein. Trainieren Sie Ihr Gedächtnis! Automatische Tag-Erkennung: Wow! Kostenlose Version: Notepad ist nur so kostenlos wie Ihr Windows.