Web-Editoren

[andy_m4]

Bisher hatte ich viel mit BlueFish gemacht, wenns um HTML, CSS und Javascript ging.

In den letzten Monaten ist es aber meist Brackets gewesen. Find ich ansich auch ok. Insbesondere auch das man Informationen einblenden kann die man gerade benötigt (zum Beispiel CSS zu einem HTML-Element, welches man gerade bearbeitet und man sich damit herumspringen erspart).

Trotzalledem haben ja auch andere Mütter schöne Töchter und deshalb wollte ich mich mal umhören, was so in der Webentwicklung noch so gibt. Sowas wie Atom oder [Aptana Studio](ist aber oversized für meinen Bedarf) welche es ja schon länger gibt bis hin zu jüngeren Entwicklungen wie Visual Studio Code.

Mich interessieren da weniger so Allerweltsfeatures wie Syntaxhighlighting, sondern sozusagen das Feature bzw. die 2 oder 3 Funktionen, die genau diesen Editor so interessant machen und deshalb von dem (bekannten) Rest spürbar abheben.
Wie bei Brackets eben das Einblenden oder auch solche Sachen wie die nahe Interaktion mit dem Browser (das man sozusagen auch ne Sofort-Vorschau hat und ggf. auch Debugging in Zusammenarbeit mit dem Browser sehr einfach möglich ist).

Wonach ich eher nicht suche sind Sachen wie VIM. Sozusagen ein General Purpose Editor, der viele Sachen kann und unter anderem auch Web. Ich habe bereits meinen Editor den ich auch in und auswendig kenne (inkl. des Quelltextes, um Anpassungen vorzunehmen oder Features einzubauen) und der sozusagen auch gesetzt. Und ich möchte nicht VIM or whatever lernen wegen nur dieser einen Sache.

Die muss also nix können (brauch von mir aus nicht mal erweiterbar zu sein; oder solche Sachen wie FTP-Unterstützung oder git-Integration und ähnlichen Kram den ich eh nicht darüber mache). Nur Web. Aber das dafür richtig gut.

 

[schnälli]

Probier dich doch mal an einem Django-Projekt.

NotePad++ für HTML, CSS, JavaScript
Eclipse für Python (und optional SQL)

Für Eclipse gibt es ne extra Django (Python) Extension

 

[andy_m4]

Probier dich doch mal an einem Django-Projekt.

Ich such nicht nach nem Webframework oder eine serverseitige Programmiersprache (da bin ich gut abgedeckt), sondern nach nem Editor für HTML, CSS und Javascript.

NotePad++ für HTML, CSS, JavaScript

Ähm nein. Notepad++ ist genau was ich nicht suche. Der kann zwar alles, aber sozusagen nix richtig. Damit bin ich versorgt.

Eclipse für Python (und optional SQL)

Python brauch ich nicht. Eclipse bietet trotzdem ein paar nette Sachen. Aber insgesamt im Webbereich zu wenig. Vor allem verglichen mit der Konkurrenz.

Insgesamt werde ich das Gefühl nicht los, Du hast mein Posting gar nicht richtig gelesen.
Wenn etwas missverständlich formuliert ist, dann ruhig nachfragen und nicht einfach davon ausgehen 'der wird wohl das&das gemeint haben'.

 

[Hooo]

Also ich verwende WebStorm von Jetbrains für die Web-Entwicklung, wenn du Student bist kannst du eine kostenlose Lizenz erhalten (sonst 30 Tage Test-Version). Neben den üblichen Features einer größeren IDE gibt es hier zusätzlich Unterstützung für Frameworks wie React.js, Angular, Vue.js.
Was für mich sehr angenehm ist, dass Jetbrains eine ganze IDE-Familie anbietet, und man sich nicht umgewöhnen muss, wenn man z.B. auf eine Go oder Java IDE für die Backend-Entwicklung umsteigt (bei Jetbrains, Goland u. IntelliJ).

Aber ich glaube am besten ist es, wenn du einfach mal ein paar IDEs installierst und eine Weile herumexperimentierst, jeder hat da seine eigenen Vorlieben.

 

[empy]

ja und wie wäre es einfach mit adobe dreamweaver?

 

[ayngush]

Die Tools von Jetbrains sind quasi Branchenstandard.

Ich verwende jedoch beruflich und privat den Atom Editor, wenn es um Webentwicklung geht.
Das hat aber primär damit zu tun, dass ich noch nicht dazu gekommen bin mir die Tools von Jetbrains im Businessumfeld näher anzuschauen. Ist aber geplant.

Visual Studio Code ist quasi wie Atom. Beide haben ihre persönlichen Stärken und Schwächen. Jedoch unterscheiden sie sich nur minimal.

 

[andy_m4]

Also ich verwende WebStorm von Jetbrains für die Web-Entwicklung

Ja. Ich kenne zumindest IntelliJ IDEA. Ansonsten hatte ich jetzt JEtBrains-Produkte weniger auf dem Radar. Vor allem weil es als IDE auch mehr kann, als ich brauche.

Was für mich sehr angenehm ist, dass Jetbrains eine ganze IDE-Familie anbietet, und man sich nicht umgewöhnen muss, wenn man z.B. auf eine Go oder Java IDE für die Backend-Entwicklung umsteigt (bei Jetbrains, Goland u. IntelliJ).

Ja. Ist aber für mich eher irrelevant. Für mich hat JetBrains sonst nix im Angebot was ich brauche. Mir reicht es, wenn der HTML, CSS und Javascript-Bereich abgedeckt ist. Aber das muss halt gut und mit nicht zu steiler Lernkurve gehen.

WebStorm ist damit noch nicht aus dem Rennen. Aber bisher hab ich noch nix gesehen wo ich sage: Wow. Ja das wäre cool das zu haben. Und nach solchen Punkten suche ich.

Aber ich glaube am besten ist es, wenn du einfach mal ein paar IDEs installierst und eine Weile herumexperimentierst, jeder hat da seine eigenen Vorlieben.

So groß ist der Leidensdruck nicht als das ich da viel Zeit reinstecken möchte. Ich bin eigentlich so weit ganz gut ausgestattet. Nichtsdestotrotz kann man sich umhören-. Ich betrachte das hier auch eher so als lockeren Erfahrungsaustausch a-la "Guck Dir mal Editor XYZ da finde ich besonders hilfreich, das man 'dies&das' machen kann, was die Arbeit unheimlich erleichtert".

Ergänzung (9. Mai 2018)

ja und wie wäre es einfach mit adobe dreamweaver?

*lol* ?

 

[kling1]

aktuell webstorm wenn du eine ganze edee brauchst.. aber gerade wenn man mit aktuellen javascript technologien arbeitet ist visual studio code schon das beste.. hat für alles gut umgesetzte plugins.. ist der modernste editor

 

[empy]

Ergänzung (9. Mai 2018)

*lol* ?

also scheinbar verstehe ich deine Frage nicht und warum dreamweaver belächelt wird. würdest du mich aufklären?
kann doch das gleiche wie dein brackets + mehr? (strg + e) oder die eingebaute befehlerreferenz auf code (Strg + k), wenn es dir um solchen nippes geht.

bitte bring mal licht in mein dunkel...

 

[andy_m4]

Die Tools von Jetbrains sind quasi Branchenstandard.

Wenn ich so Worte höre wie Branchenstandard rollen sich bei mir eher die Fußnägel hoch.
Wenngleich die Jetbrains-Produkte ja tatsächich ganz gut sind

Ich verwende jedoch beruflich und privat den Atom Editor, wenn es um Webentwicklung geht.

, weil ....?

Visual Studio Code ist quasi wie Atom. Beide haben ihre persönlichen Stärken und Schwächen. Jedoch unterscheiden sie sich nur minimal.

Bei Visual Studio Code finde ich ja ganz interessant das Language Server Protocol, über das die IDE quasi den Programmiersprachenimplementation abfragen kann über die Syntax.
Ist jetzt kein Feature für hier und jetzt. Aber auf lange Sicht könnte das mal interessant werden.

Ergänzung (9. Mai 2018)

also scheinbar verstehe ich deine Frage nicht und warum dreamweaver belächelt wird. würdest du mich aufklären?

Naja. Mit DreamWeaver verbinde ich immer WYSIWYG. Und ja, ich weiß auch das Dreamweaver auch Quellcode-Editierung kann und man sozusagen sogar damit ein Two-Way-Editor hat.
Aber eigentlich brauch ich den WYSIWYG-Teil nicht. Das heißt, der Quelltext-Editor muss dann schon überzeugen.
Und dann läuft DreamWeaver nativ auch nur auf Windows und MacOS. Gut. Das kriegt man alles geregelt. Aber dann muss Dreamweaver auch überzeugen. Und das sehe ich im Augenblick nicht.
Aber Du weißt da sicher besser Bescheid.

kann doch das gleiche wie dein brackets + mehr? (strg + e) oder die eingebaute befehlerreferenz auf code (Strg + k)

Na wenns nur das Gleiche kann wie Brackets ists ja eh eher uninteressant. Warum soll ich eine funktionierende Lösung gegen was tauschen, was gleich gut ist?

Ergänzung (9. Mai 2018)

aktuell webstorm wenn du eine ganze edee brauchst..

Nein. Eine IDE brauche ich nicht. Hab ich schon. Danke. :-)

aber gerade wenn man mit aktuellen javascript technologien arbeitet ist visual studio code schon das beste.. hat für alles gut umgesetzte plugins..

Was ist denn daran nun das Beste?
Ich will nicht hören, dass Editor XYZ das Beste ist, sondern warum es eurer Meinung nach so ist.

 

[empy]

ok, viel erfolg bei der suche. kannst ja mitteilen, was es dann geworden ist. vg

 

[ayngush]

Nur mal so am Rande: Atom hatte LSP vor Visual Studio Code implementiert. Wie gesagt: Die beiden (VS Code und Atom) unterscheiden sich Primär im Logo.
Beides sind Elektron Apps mit den damit verbundenen Vor- und Nachteilen.
Beide verfügen über nahezu identische Erweiterungsmöglichkeiten.
Das eine ist OSS von Microsoft, das andere OSS von Github ~ kann man sich jetzt aussuchen, was man will.

Die Jetbrains IDE sind quasi Branchenstandard, weil es halt so ist. Da kannst Du mit deinen Augen oder Fußnägeln rollen, sooft du möchtest.
Nahezu überall, wo gegen Geld professionelle Webapplikationen / Mobile Games und Apps / Microservices entstehen findet man früher oder später etwas von Jetbrains in der Toolbox. Häufig aus dem einen Grund: Jetbrains baut funktionierende IDE, Alle andere genannten Produkte sind Editoren, die man wie eine IDE aussehen lassen kann, wo am Ende aber doch immer noch was fehlt ~ meistens das Debugging. Aber lieber erst mal mit Fußnägeln rollen, anstatt sich mit den Fakten zu beschäftigen, macht halt Sinn so ein Auftreten in der Öffentlichkeit.

Das ist übrigens auch ein Grund, warum ich Atom verwende. Ich würde gerne die Produkte von Jetbrains verwenden, vor allem für PHP ist PHPStorm sehr sehr sehr (maximales Superlativ sehr) gut, aber mir fehlt on the Job in meinem laufenden Projektgeschäft die Zeit mit damit zu beschäftigen. Da ich Atom privat mitgestaltet und erweitert habe (Atom 1.0 Contributor), bin ich damit sehr gut vertraut, kenne die Shortcodes usw. und kann es beruflich sicher und schnell verwenden. Das ist bei den Produkten von Jetbrains out of the box nicht der Fall, da müsste ich mich erst einarbeiten - auch wenn sie am Ende das bessere Produkt haben und ich sehr, sehr gerne den Laufzeitdebugger und die intelligentere Code Completion als sie bei VS Code / Atom der Fall ist haben würde...

Dreamweaver ist kein Web-Editor, das ist ein WYSIWYG-Malprogramm für Internetweisen, danach war hier aber irgendwie nicht gefragt.
Sonst könnte ich speziell für die Umsetzung mit dem Bootstrap Framework noch Bootstrap Studio rein werfen, das ist aber auch kein Web-Editor, sondern ein WYSIWYG-Malprogramm für Internetseiten.
Auch ist nicht nach Programmen für UX / Wireframes / Rapid Prototyping usw. gefragt worden. (Adobe XD)

 

[empy]

oh mei. ich will ja echt keine lanze für dreamweaver brechen, aber mir scheint als beurteilt man hier ein programm, das man nie benutzt hat


vor allem, wenn ich den originalen beitrag lese in dem von bluefish und brackets die rede war, und dass atom oversized sei. ich denke für den von mir erahnten einsatzzweck kann dreamweaver eine option sein.
kann aber auch nicht.

 

[Darrel]

Ein weiterer beliebter Web-Editor ist Sublime Text. Was dieser Web-Editor meiner Meinung nach besser macht als die anderen ist die Performance. Das Programm startet schnell, man kann mit der "Goto Anything"-Funktion sehr schnell zwischen Dateien und gesuchten Ausdrücken hin- und her springen. Insgesamt mache ich kleine Änderungen hier am schnellsten fertig.

Selbst auf einem Notebook mit Centrino 2 Platform und 3GB RAM läuft Sublime Text rasend schnell, Atom und VS Code dagegen brauchen da etwas länger.

 

[kling1]

Wie gesagt: Die beiden (VS Code und Atom) unterscheiden sich Primär im Logo.
Beides sind Elektron Apps mit den damit verbundenen Vor- und Nachteilen.

die beiden unterscheiden sich deutlich bei der perfomace und bei qualität der plugins.. atom ist langsam und die plugins sind qualitativ auch eher mies

 

[andy_m4]

Nur mal so am Rande: Atom hatte LSP vor Visual Studio Code implementiert. Wie gesagt: Die beiden (VS Code und Atom) unterscheiden sich Primär im Logo.

Ah ok. Das wusste ich bisher nicht

Beides sind Elektron Apps mit den damit verbundenen Vor- und Nachteilen. Beide verfügen über nahezu identische Erweiterungsmöglichkeiten.
Das eine ist OSS von Microsoft, das andere OSS von Github ~ kann man sich jetzt aussuchen, was man will.

Das war mir bewusst. Ich hätte nur vermutet, dass die unterschiede größer sind. Aber gut.

Die Jetbrains IDE sind quasi Branchenstandard, weil es halt so ist. Da kannst Du mit deinen Augen oder Fußnägeln rollen, sooft du möchtest.

Es ging nicht um Jetbrains, sondern um die Bezeichnung Branchenstandard. Schrieb ich aber meines Erachtens nach auch sehr deutlich.

Nahezu überall, wo gegen Geld professionelle Webapplikationen / Mobile Games und Apps / Microservices entstehen findet man früher oder später etwas von Jetbrains in der Toolbox.

Wie schon gesagt. Es ging mir vorwiegend um den HTML/CSS/Javascript-Part. Mag sein, dass da Webstorm gut ist (wobei hier bisher noch keiner so richtig gesagt hat, warum).
Für den serverseitigen Kram hat Jetbrains aber für mich nix im Angebot und ich bin dort auch zufriedenstellend versorgt.
Wenn ich jetzt also Python/Django Entwickler wäre der eben auch mit HTML usw. zu tun hat, dann wäre JetBrains schon allein deshalb ne Alternative, weil man dann eine IDE für alles hat. Das ist aber bei mir nicht der Fall.

Nu bleibt halt die Frage, ob Webstorm allein wirklich gegen reine HTML,CSS,Javascript-Editoren genug Vorteile hat, damit sich deren Einsatz rechtfertigt.

Häufig aus dem einen Grund: Jetbrains baut funktionierende IDE, Alle andere genannten Produkte sind Editoren, die man wie eine IDE aussehen lassen kann, wo am Ende aber doch immer noch was fehlt ~ meistens das Debugging.

Gut. Mit Debugging hatte ich bisher die wenigsten Probleme.

Das ist übrigens auch ein Grund, warum ich Atom verwende. Ich würde gerne die Produkte von Jetbrains verwenden, vor allem für PHP ist PHPStorm sehr sehr sehr (maximales Superlativ sehr) gut, aber mir fehlt on the Job in meinem laufenden Projektgeschäft die Zeit mit damit zu beschäftigen.

Ja. Das würde im Endeffekt für mich bedeuten, dass Webstorm schon fast wieder uninteressant ist.

Da ich Atom privat mitgestaltet und erweitert habe (Atom 1.0 Contributor), bin ich damit sehr gut vertraut, kenne die Shortcodes usw. und kann es beruflich sicher und schnell verwenden.

Ich verstehe, was Du meinst. Unter Berücksichtigung aller Umstände wäre meine Wahl an Deiner Stelle auch Atom.

Dreamweaver ist kein Web-Editor, das ist ein WYSIWYG-Malprogramm für Internetweisen, danach war hier aber irgendwie nicht gefragt.

Ja eben. In der Ecke hatte ich es auch verortet. Ich kenne DreamWeaver noch aus der Zeit als der es von Macromedia kam.

Ergänzung (9. Mai 2018)

oh mei. ich will ja echt keine lanze für dreamweaver brechen, aber mir scheint als beurteilt man hier ein programm, das man nie benutzt hat

Ja dann sag doch mal konkret, was an DreamWeaver gut ist. Nur irgendein Tool in die Runde werfen und nix dazu sagen bringt mir irgendwie nicht so viel.

vor allem, wenn ich den originalen beitrag lese in dem von bluefish und brackets die rede war, und dass atom oversized sei.

Bei Oversized sprach ich nicht von Atom, sondern Aptana

 

[empy]

Bei Oversized sprach ich nicht von Atom, sondern Aptana

ok, sorry das war dann von mir falsch verstanden.

ich persönlich mag sehr die git-integration, wobei ich denke, das das nichts ist was du benötigst.
bei code hat mir häufig geholfen, mehrere cursor zu verwenden. so kann man code an mehreren stellen gleichzeitig bearbeiten.
die inline css dokumentation hatte ich bereits angesprochen sowie das inline editing.
live-browser-preview ist vorhanden, zudem ist es möglich, auch eine cross-device-preview zu aktivieren, so kann man das ergebnis gleich auf dem smartphone ansehen. dazu scannt man mit dem smartphone einfach einen qr-code in dreamweaver.
code completion, debugger etc alles da.

aber letztlich musst du selbst entscheiden, ob du dem tool eine gleichwertige chance einräumst und du es dir anschaust, oder eben nicht. ich jedenfalls habe unter den oberen alternativen kaum was gelesen, was mich davon abbringt dreamweaver zu nutzen. für mich überwiegen zudem die vorteile durch die hervorragende integration in die anderen adobe anwendungen, die man womöglich auch mal bei der entwicklung für front-ends gelegentlich mal so braucht. inkl der cloud zwecks collaboration.

edit: und da ich es wiederholt gelesen hatte: das wysiwyg-malprogramm von adobe nennt sich Muse, nicht Dreamweaver. EOL aber mittlerweile angekündigt.

 

[andy_m4]

Ein weiterer beliebter Web-Editor ist Sublime Text.

Stimmt. Der läuft einem auch regelmäßig über den Weg.

Was dieser Web-Editor meiner Meinung nach besser macht als die anderen ist die Performance.

Gut. Das Problem habe ich weniger. Und für schnell mal eben Edits hab ich dafür auch ein leichtgewichtigen Editor.

Das Programm startet schnell, man kann mit der "Goto Anything"-Funktion sehr schnell zwischen Dateien und gesuchten Ausdrücken hin- und her springen.

Das klingt in der Tat sehr interessant und werde ich mir auch mal näher angucken.

Ergänzung (10. Mai 2018)

ich persönlich mag sehr die git-integration, wobei ich denke, das das nichts ist was du benötigst.
bei code hat mir häufig geholfen, mehrere cursor zu verwenden. so kann man code an mehreren stellen gleichzeitig bearbeiten.
die inline css dokumentation hatte ich bereits angesprochen sowie das inline editing.
live-browser-preview ist vorhanden, zudem ist es möglich, auch eine cross-device-preview zu aktivieren, so kann man das ergebnis gleich auf dem smartphone ansehen. dazu scannt man mit dem smartphone einfach einen qr-code in dreamweaver.
code completion, debugger etc alles da.

Danke für den kurzen Überblick.

aber letztlich musst du selbst entscheiden, ob du dem tool eine gleichwertige chance einräumst und du es dir anschaust, oder eben nicht.

Ja.

ich jedenfalls habe unter den oberen alternativen kaum was gelesen, was mich davon abbringt dreamweaver zu nutzen. für mich überwiegen zudem die vorteile durch die hervorragende integration in die anderen adobe anwendungen, die man womöglich auch mal bei der entwicklung für front-ends gelegentlich mal so braucht. inkl der cloud zwecks collaboration.

Ja. Ich wollte mich auch keinesfalls über DreamWeaver lustig machen oder so. Wie gesagt, ich kannte es primär als WYSIWYG-Programm mit parallelen Quelltexteditor.
Ich spreche auch DreamWeaver seine Berechtigung nicht ab.

Was den Umfang angeht, würde ich es eher in Richtung IDE sehen. Und damit weniger als schicken, kleinen, schnörkellosen aber dennoch guten/effizienten HTML-Editor mit dem man ohne grße Einarbeitung gleich losstarten kann. So wie bei Atom oder Brackets.

Ich brauch weder sowas wie Vorlagen, noch irgendwelche sonstigen Funktionen die ich nicht nutzen würde (Sachen die git-Integration). Die Funktionen die man nicht braucht sind ja trotzdem in der GUI des Programms, was die Sache schnell unübersichtlich macht.
Halt wie bei einer IDE. Man kann viel damit machen aber man braucht eben auch etwas Zeit, um sich da einzufuchsen.

Die Zeit würde ich sogar investieren wollen, wenns wie bei den JetBrain-Beispiel ich die IDE sowieso auch für andere Sachen verwende.
Da das nicht der Fall ist, sehe ich es eher als Ballast denn als leichtgewichtige Lösung. Und das meisste HTML/CSS/JS wird bei mir eh programmatisch erzeugt. Für die paar Sachen die dann noch über bleiben brauch ich da nix Großartiges. Nichtsdestotrotz soll es natürlich trotzdem anständig zu machen gehen.

 

[ayngush]

Was bei HTML CSS und JS enorm hilfreich ist, ist das schnelle Markieren identischer Wörter der bestehenden Markierung z.B. Attribute / CSS-Bezeichner usw. Bei Atom und Sublime ist es der Shortcode Ctrl + D. Auch möchte ich Ctrl + alt + Pfeiltasten rauf oder runter nicht mehr missen, um den Cursor zu vervielfachen. Oder Shift + Ctrl + D um die aktuelle Line oder die ganze Markierung zu duplizieren.

Außerdem sehr hilfreich:
+ Die TODO Syntax von Atom und das Package "todo-show".
+ Die schnelle Projektanordnung über Verzeichnisse
+ Suchen und Ersetzen in mehreren Dateien
+ Linter für Javascript (Typescript) (in meinem Fall auch für PHP & Python)
+ automatisches Komprimieren von CSS und JS bei Änderungen (YUI Compressor, ...)
+ Autocompletion von HTML Tags
+ Smart Intention
+ Smart Completion
+ Code-Snippets
+ CSS-Beautifier
Insbesondere bei HTML arbeite ich oft mit Templates und der "Mustache-Syntax" oder der TWIG-Syntax. Gerade für TWIG sind dann wieder Syntax Highlightning, Autocompletion, Code-Snippets usw. sehr angenehm.

Auch habe ich mir angewöhnt quasi nur noch "div" zu schreiben und tab zu drücken, und erhalte dann (korrekt eingerückt)

<div class="">

</div>

Wobei der Cursor in dem Class-Attribut steht, damit man gleich noch den ganzen Bootstrap-Code reindrücken kann

Und es gibt noch sehr viel mehr Snippets, nicht nur für einen div Container
Teilweise auch ganze Bootstrap-Vorlagen (modals, forms usw.)

Das ist mir mittlerweile so in Fleisch und Blut übergegangen ist, dass ich ohne solche Unterstützungen sehr viel Zeit verliere und viel ineffizienter bin, weil ich teilweise wieder in den Referenzen oder anderen Projekten nachschauen muss, wie man jetzt genau ein Bootstrap-Modal formatieren muss usw. Da man es sich nicht merken muss, merkt man es sich einfach nicht Effizienz halt...

Ach und Unterstützung für Javadoc brauche ich dringend...

 

[andy_m4]

Was bei HTML CSS und JS enorm hilfreich ist, ist das schnelle Markieren identischer Wörter der bestehenden Markierung z.B. Attribute / CSS-Bezeichner usw. Bei Atom und Sublime ist es der Shortcode Ctrl + D. Auch möchte ich Ctrl + alt + Pfeiltasten rauf oder runter nicht mehr missen, um den Cursor zu vervielfachen. Oder Shift + Ctrl + D um die aktuelle Line oder die ganze Markierung zu duplizieren.
....

Danke für das ausführliche Posting.