{"id":1545,"date":"2021-02-16T13:25:11","date_gmt":"2021-02-16T12:25:11","guid":{"rendered":"https:\/\/html-und-css.de\/?p=1545"},"modified":"2025-07-03T14:07:39","modified_gmt":"2025-07-03T12:07:39","slug":"editoren","status":"publish","type":"post","link":"https:\/\/pmueller.de\/editoren\/","title":{"rendered":"3 wirklich gute kostenlose Editoren f\u00fcr HTML und CSS"},"content":{"rendered":"\n<p>In diesem Beitrag stelle ich Ihnen die drei beliebtesten kostenlosen Kandidaten kurz vor: <em>Visual Studio Code<\/em>, <em>Brackets<\/em> und <em>Atom<\/em>. Alle drei gibt es f\u00fcr Windows, macOS und Linux und eignen sich hervorragend zum Schreiben von HTML, CSS und auch JavaScript. <\/p>\n\n\n\n<!--more-->\n\n\n<div role=\"navigation\" aria-label=\"Inhaltsverzeichnis\" class=\"simpletoc wp-block-simpletoc-toc\"><h2 style=\"margin: 0;\"><button type=\"button\" aria-expanded=\"false\" aria-controls=\"simpletoc-content-container\" class=\"simpletoc-collapsible\">Inhaltsverzeichnis<span class=\"simpletoc-icon\" aria-hidden=\"true\"><\/span><\/button><\/h2><div id=\"simpletoc-content-container\" class=\"simpletoc-content\"><ul class=\"simpletoc-list\">\n<li><a href=\"#visual-studio-code-ist-ein-sehr-guter-editor\">Visual Studio Code ist ein sehr guter Editor<\/a>\n\n<\/li>\n<li><a href=\"#brackets-war-und-ist-ein-guter-editor-fuer-einsteiger\">Brackets war (und ist) ein guter Editor f\u00fcr Einsteiger<\/a>\n\n\n<ul><li>\n<a href=\"#adobe-hat-die-unterstuetzung-von-brackets-im-september-2021-beendet\">Adobe hat die Unterst\u00fctzung von Brackets im September 2021 beendet &#8230;<\/a>\n\n<\/li>\n<li><a href=\"#aber-brackets-lebt-weiter\">&#8230; aber Brackets lebt weiter<\/a>\n\n<\/li>\n<\/ul>\n<li><a href=\"#atom-ist-etwas-uebersichtlicher-als-code-und-besonders-gut-fuer-github\">Atom ist etwas \u00fcbersichtlicher als Code, und besonders gut f\u00fcr Github<\/a>\n\n<\/li>\n<li><a href=\"#bonus-onlineeditoren-zum-basteln-und-schnellen-ausprobieren\">Bonus: Online-Editoren zum Basteln und schnellen Ausprobieren<\/a>\n<\/li><\/ul><\/div><\/div>\n\n\n<h2 id=\"visual-studio-code-ist-ein-sehr-guter-editor\" class=\"wp-block-heading\">Visual Studio Code ist ein sehr guter Editor <\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized is-style-default\"><a href=\"https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/visual-studio-code-mit-quelltext.jpg\" data-lbwps-width=\"2346\" data-lbwps-height=\"1404\" data-lbwps-srcsmall=\"https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/visual-studio-code-mit-quelltext-300x180.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/visual-studio-code-mit-quelltext-1024x613.jpg\" alt=\"Screenshot von Visual Studio Code\" class=\"wp-image-5614\" width=\"768\" height=\"460\" srcset=\"https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/visual-studio-code-mit-quelltext-1024x613.jpg 1024w, https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/visual-studio-code-mit-quelltext-300x180.jpg 300w, https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/visual-studio-code-mit-quelltext-768x460.jpg 768w, https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/visual-studio-code-mit-quelltext-1536x919.jpg 1536w, https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/visual-studio-code-mit-quelltext-2048x1226.jpg 2048w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/a><figcaption class=\"wp-element-caption\">Visual Studio Code mit ge\u00f6ffneten \u00dcbungsdateien<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Website: <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">code.visualstudio.com<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/de.wikipedia.org\/wiki\/Visual_Studio_Code\" target=\"_blank\" rel=\"noreferrer noopener\">Visual Studio Code auf wikipedia.de<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/vscode.dev\" target=\"_blank\" rel=\"noopener\">vscode.dev &#8211; Visual Studio Code direkt im Browser<\/a> (ohne Installation) <\/li>\n<\/ul>\n\n\n\n<p>Visual Studio Code, meist <em>VS Code<\/em> oder einfach nur <em>Code<\/em> genannt, ist von Microsoft und als kostenlose Entwicklungsumgebung auf dem besten Weg zu einer Art Industriestandard. Genau richtig f\u00fcr (angehende) Entwickler. <\/p>\n\n\n\n<p>F\u00fcr Einsteiger kann VS Code anfangs ein bisschen \u00fcberw\u00e4ltigend wirken, denn \u00fcberall gibt es Bedienelemente, Optionen und Einstellm\u00f6glichkeiten, und manchmal sieht man den Wald vor l\u00e4uter B\u00e4umen nicht. <\/p>\n\n\n\n<p>Code ist nach dem Kennenlernen aber wirklich einfach praktisch: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Emmet<\/em> zum bequemen Schreiben von HTML ist bereits integriert<\/li>\n\n\n\n<li>Ein mit allen Browsern funktionierender <em>Live Server<\/em> ist als Erweiterung verf\u00fcgbar. <\/li>\n\n\n\n<li>Auch die Versionskontrolle mit Git und ein Terminal sind bereits an Bord. <\/li>\n<\/ul>\n\n\n\n<p>Kurzum: VS Code ist eine wirklich tolle Umgebung, aber Brackets sah einfach besser aus. Wenn Sie das auch finden, schauen Sie sich folgenden Beitrag einmal n\u00e4her an: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/html-und-css.de\/vs-code-mit-farbschema-von-brackets\/\" title=\"Visual Studio Code: Syntaxhervorhebung f\u00fcr HTML und CSS mit dem Farbschema von Brackets\">Visual Studio Code mit dem Farbschema von Brackets<\/a> <\/li>\n<\/ul>\n\n\n\n<p>Viel Spa\u00df beim Probieren! <\/p>\n\n\n\n<div class=\"wp-block-group has-base-background-color has-background is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"has-medium-font-size\"><strong>Fazit zu Visual Studio Code <\/strong><\/p>\n\n\n\n<p>Ein toller Editor, und f\u00fcr ambitionierte Einsteiger oder angehende Entwickler ist Visual Studio Code eine gute Wahl, und bei mir hat der Quelltext in Code inzwischen das <a href=\"https:\/\/pmueller.de\/vs-code-mit-farbschema-von-brackets\/\" data-type=\"post\" data-id=\"2931\">Farbschema von Brackets<\/a>. <\/p>\n<\/div>\n\n\n\n<h2 id=\"brackets-war-und-ist-ein-guter-editor-fuer-einsteiger\" class=\"wp-block-heading\">Brackets war (und ist) ein guter Editor f\u00fcr Einsteiger <\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/brackets-mit-quelltext.jpg\" data-lbwps-width=\"2342\" data-lbwps-height=\"1400\" data-lbwps-srcsmall=\"https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/brackets-mit-quelltext-300x179.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/brackets-mit-quelltext-1024x612.jpg\" alt=\"Screenshot von Adobe Brackets\" class=\"wp-image-5613\" width=\"768\" height=\"459\" srcset=\"https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/brackets-mit-quelltext-1024x612.jpg 1024w, https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/brackets-mit-quelltext-300x179.jpg 300w, https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/brackets-mit-quelltext-768x459.jpg 768w, https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/brackets-mit-quelltext-1536x918.jpg 1536w, https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/brackets-mit-quelltext-2048x1224.jpg 2048w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/a><figcaption class=\"wp-element-caption\">Brackets mit ge\u00f6ffneten \u00dcbungsdateien<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Download: <a href=\"http:\/\/brackets.io\" target=\"_blank\" rel=\"noreferrer noopener\">brackets.io<\/a> <\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/brackets-cont\/brackets\" target=\"_blank\" rel=\"noreferrer noopener\">Brackets-Repository auf Github<\/a> <\/li>\n\n\n\n<li><a href=\"https:\/\/de.wikipedia.org\/wiki\/Adobe_Brackets\" target=\"_blank\" rel=\"noreferrer noopener\">Artikel zu Brackets auf wikipedia.de<\/a> <\/li>\n<\/ul>\n\n\n\n<p>Brackets ist ein kostenloser Open-Source-Editor, der sehr \u00fcbersichtlich und f\u00fcr Einsteiger gut geeignet ist. Das selbst gew\u00e4hlte Motto <em>Tools shouldn&#8217;t get in your way<\/em> wird wirklich gut umgesetzt. <\/p>\n\n\n\n<p>Alles Wichtige ist vorhanden: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ein ge\u00f6ffneter Ordner wird als Projekt links in der Sidebar angezeigt<\/li>\n\n\n\n<li>Ein Live Preview ist integriert (funktioniert aber nur mit Chrome)<\/li>\n\n\n\n<li>Emmet gibt es als Erweiterung.  <\/li>\n<\/ul>\n\n\n\n<p>Gew\u00f6hnungsbed\u00fcrftig ist lediglich, dass mehrere ge\u00f6ffnete Fenster nicht als Tabs angezeigt werden, sondern als Liste links oben in der Sidebar.<\/p>\n\n\n\n<p>Ich habe Brackets bis 2020 in vielen Videokursen als Editor verwendet, denn man konnte sich sofort auf den eigentlichen Stoff konzentrieren, ohne den Editor gro\u00dfartig vorstellen zu m\u00fcssen. <\/p>\n\n\n\n<h3 id=\"adobe-hat-die-unterstuetzung-von-brackets-im-september-2021-beendet\" class=\"wp-block-heading\">Adobe hat die Unterst\u00fctzung von Brackets im September 2021 beendet &#8230; <\/h3>\n\n\n\n<p>Schon seit l\u00e4ngerem hatte man den den Eindruck, dass die Entwicklung von Brackets eingeschlafen war. W\u00e4hrend es fr\u00fcher alle paar Wochen oder Monate eine neue Version gab, passierte abgesehen von zwei Bugfixes im Dezember 2019 (1.14.1) und im April 2020 (1.14.2) schon seit einigen Jahren nichts mehr. Im M\u00e4rz 2021 k\u00fcndigte Adobe dann an, dass die Entwicklung von Brackets eingestellt wird.  <\/p>\n\n\n\n<h3 id=\"aber-brackets-lebt-weiter\" class=\"wp-block-heading\">&#8230; aber Brackets lebt weiter <\/h3>\n\n\n\n<p>Das Ende der Unterst\u00fctzung von Adobe bedeutet aber nicht automatisch das Ende von Brackets, denn der Code wurde von Adobe an die Community \u00fcbergeben. Seitdem gibt es tats\u00e4chlich ab und zu neue Releases, aber es bleiben nat\u00fcrlich Fragezeichen, wie lange das Projekt ohne die Unterst\u00fctzung von Adobe weiterhin gepflegt wird. <\/p>\n\n\n\n<div class=\"wp-block-group has-base-background-color has-background is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"has-medium-font-size\"><strong>Fazit zu Brackets<\/strong><\/p>\n\n\n\n<p>Wenn Sie einfach mal eben reinschnuppern und ein bisschen HTML oder CSS lernen m\u00f6chten, ist Brackets als Editor \u00fcbersichtlich und v\u00f6llig in Ordnung. Nach dem Ende der Unterst\u00fctzung durch Adobe im September 2021 wurde die Entwicklung durch enthusiastische Programmierer aus der Community \u00fcbernommen. <\/p>\n<\/div>\n\n\n\n<h2 id=\"atom-ist-etwas-uebersichtlicher-als-code-und-besonders-gut-fuer-github\" class=\"wp-block-heading\">Atom ist etwas \u00fcbersichtlicher als Code, und besonders gut f\u00fcr Github <\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/atom-mit-quelltext.jpg\" data-lbwps-width=\"1173\" data-lbwps-height=\"700\" data-lbwps-srcsmall=\"https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/atom-mit-quelltext-300x179.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/atom-mit-quelltext-1024x611.jpg\" alt=\"Screenshot von Atom\" class=\"wp-image-5612\" width=\"768\" height=\"458\" srcset=\"https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/atom-mit-quelltext-1024x611.jpg 1024w, https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/atom-mit-quelltext-300x179.jpg 300w, https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/atom-mit-quelltext-768x458.jpg 768w, https:\/\/pmueller.de\/wp-content\/uploads\/2021\/02\/atom-mit-quelltext.jpg 1173w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/a><figcaption class=\"wp-element-caption\">Atom mit ge\u00f6ffneten \u00dcbungsdateien<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Website: <a href=\"https:\/\/atom.io\" target=\"_blank\" rel=\"noreferrer noopener\">atom.io<\/a> <\/li>\n\n\n\n<li><a href=\"https:\/\/de.wikipedia.org\/wiki\/Atom_(Texteditor)\" target=\"_blank\" rel=\"noreferrer noopener\">Atom auf wikipedia.de<\/a>  <\/li>\n<\/ul>\n\n\n\n<p>Nicht unerw\u00e4hnt bleiben soll Atom. Atom ist ein sehr vielseitiger Editor mit einer h\u00fcbschen Oberfl\u00e4che, dessen Entwicklung von Github koordiniert wird. Atom sieht auf den ersten Blick aus wie ein guter Kompromiss: nicht so \u00fcberm\u00e4chtig wie Code, aber leistungsf\u00e4higer als Brackets. Wenn Sie viel mit Git und Github arbeiten &#8211; da ist Atom buchst\u00e4blich zu Hause. <\/p>\n\n\n\n<p>Github geh\u00f6rt seit einiger Zeit zu Microsoft, der treibenden Kraft hinter Code, und man darf gespannt sein, ob und wie sich das auf die Entwicklung von Atom auswirkt. Zumal Atom mit dem <a href=\"https:\/\/de.wikipedia.org\/wiki\/Electron_(Framework)\" target=\"_blank\" rel=\"noreferrer noopener\">Electron Framework<\/a> das gleiche technische Fundament hat wie Visual Studio Code.<\/p>\n\n\n\n<div class=\"wp-block-group has-base-background-color has-background is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"has-medium-font-size\"><strong>Fazit zu Atom <\/strong><\/p>\n\n\n\n<p>Atom ist ein schicker Editor und liegt irgendwo zwischen den anderen beiden Kandidaten. Und genau das ist vielleicht auch sein Problem: als Einsteiger w\u00fcrde ich Brackets bevorzugen, als Entwickler Visual Studio Code. <\/p>\n<\/div>\n\n\n\n<h2 id=\"bonus-onlineeditoren-zum-basteln-und-schnellen-ausprobieren\" class=\"wp-block-heading\">Bonus: Online-Editoren zum Basteln und schnellen Ausprobieren <\/h2>\n\n\n\n<p>Nicht unerw\u00e4hnt bleiben sollen Online-Editoren, die zum Basteln oder schnellen Ausprobieren von Codeschnipseln ideal sind. Ein Online-Editor l\u00e4uft direkt in Ihrem Browser und sehr beliebt sind zum Beispiel diese beiden:  <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/codepen.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">CodePen.io<\/a> <\/li>\n\n\n\n<li><a href=\"https:\/\/jsfiddle.net\">JSFiddle.net<\/a> <\/li>\n<\/ul>\n\n\n\n<p>Diese Tools sind kein Ersatz f\u00fcr einen guten Editor auf Ihrem Rechner, eher eine gute Erg\u00e4nzung. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Beitrag stelle ich Ihnen die drei beliebtesten kostenlosen Kandidaten kurz vor: Visual Studio Code, Brackets und Atom. Alle drei gibt es f\u00fcr Windows, macOS und Linux und eignen sich hervorragend zum Schreiben von HTML, CSS und auch JavaScript.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":1,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[96,95,190],"tags":[122,123,124],"class_list":["post-1545","post","type-post","status-publish","format-standard","hentry","category-css","category-html","category-tools","tag-brackets","tag-editoren","tag-visual-studio-code"],"_links":{"self":[{"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/posts\/1545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/comments?post=1545"}],"version-history":[{"count":1,"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/posts\/1545\/revisions"}],"predecessor-version":[{"id":7715,"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/posts\/1545\/revisions\/7715"}],"wp:attachment":[{"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/media?parent=1545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/categories?post=1545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pmueller.de\/wp-json\/wp\/v2\/tags?post=1545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}