Share
Entwickler sind ein wählerischer Haufen, fast schon Aberglaube und Voodoo-Magie, wenn es um ihre Werkzeuge geht. Wenn Sie die unzählige Anzahl von Dingen berücksichtigen, die wir zum Erstellen von Apps verwenden (Node, Grunt, Fiddler, LESS, EC2 usw.), ist es kein Wunder, dass wir, sobald wir eine nette Combo gefunden haben, sie wie ein Eichhörnchen mit seinem letzten Stück bewachen Nuss. Und es macht Sinn, da Ihre Entwicklungsumgebung für Ihren Erfolg ziemlich wichtig ist.
Ich denke, dass Visual Studio eine ideale IDE für die Webentwicklung ist, ist eine Erweiterung namens Web Essentials.
Das einzige Werkzeug, das meiner Meinung nach schon immer eine wahnsinnig persönliche und meinungsbezogene Präferenz war, ist Ihre IDE oder Ihr Editor. Alles ist wichtig, von Tastatureingaben und Sprachunterstützung bis zu Plugins und Designs. In Ihrem Entwicklungsstil muss alles gut fließen und vor allem muss es Ihnen helfen, die Probleme zu lösen, ohne dass Sie durch den Reifen springen müssen.
Visual Studio ist eine der besten verfügbaren IDEs, die eine Fülle von Funktionen enthält, die Entwickler sehr erfolgreich machen. Es wurde jedoch nicht wirklich als "Webentwickler" -Editor betrachtet, da er traditionell auf die Microsoft-Plattform abzielte, mit vielen Features, die das Codieren für diese Plattform unglaublich einfach machten. Nun, viele dieser Funktionen galten eigentlich nicht für Entwickler, die nicht auf eine Microsoft-Plattform abzielten.
Da Microsoft HTML5, CSS3 und JavaScript sowohl für die Web- als auch für die Windows 8-App-Entwicklung uneingeschränkt nutzte, gab es in Visual Studio 2012 eine Menge Änderungen, die es zu einem großartigen Werkzeug für die Erstellung des Webs machen. Das ist das, was ich als nächstes besprechen möchte, und Sie werden es hoffentlich in einem ganz anderen Licht sehen.
Eine der besten Funktionen des Projektmappen-Explorers ist, dass ich innerhalb der gesamten Lösung nach einem bestimmten Asset suchen kann.
Ich erinnere mich, dass ich Visual Studio vor vielen Jahren selbst gesehen habe und es nicht wirklich ernst genommen habe. Das lag nicht daran, dass es keine leistungsfähige IDE war. Es fühlte sich einfach direkt an, .NET-Anwendungen und Sites zu erstellen - und das war es auch. Das ist nicht schlecht, denn wenn Sie einen .NET-Entwickler fragen, ist Visual Studio genau das Richtige für die Bienen und bietet eine umfangreiche Bearbeitungsumgebung mit integrierten Funktionen, die andere Editoren nicht standardmäßig haben. Und für die Funktionen, die fehlten, ist das Erweiterungs-Ökosystem so umfassend, wie Sie finden werden. Ich könnte also verstehen, warum .NET-Entwickler Visual Studio lieben.
Was das Web angeht, waren Technologien wie HTML, CSS und JavaScript ein Nachfolger, im Grunde genommen Bürger der zweiten Klasse. Die jQuery-Unterstützung, die für mich besonders wichtig war, wurde von Visual Studio nicht unterstützt. Die integrierte Unterstützung für die grundlegenden, aber kritischen Technologien und Frameworks des Webs war eine Schlüsselanforderung, und ohne sie war Visual Studio für mich DOA.
Glücklicherweise hat Microsoft deutlich gemacht, dass diese Technologien für ihre Richtung unglaublich wichtig sind. Dies führte zu einer Vielzahl von Updates, die den Weg von Visual Studio in Richtung einer besseren Unterstützung für Webentwickler, insbesondere Front-End-Entwickler, prägten. Dies beinhaltete die Unterstützung für HTML5, CSS3 und JavaScript sowie den Versand von jQuery mit Visual Studio. Alle wichtigen Updates, die mich veranlasst haben, die IDE für die Webentwicklung zu überdenken, als ich zu Microsoft kam.
Als ich 2010 erstmals mit Visual Studio begann, war das Erstellen einer Vorlage basierend auf HTML5 Boilerplate. Ich habe es gemacht, weil ich der Meinung war, dass die Standardvorlagen von Visual Studio nicht dem entsprachen, was ich wollte, und Boilerplate für die meisten neuen Dateien ziemlich genau der goto-Vorlage entspricht. Das hat für mich sehr gut funktioniert, weil ich dazu neigen muss, viele Proof-of-Concept-Seiten zu erstellen, und es ist nicht ideal, ein umfassendes Projekt zu erstellen.
Visual Studio 2012 behebt dies jetzt, indem es Ihnen ermöglicht wird, ein sehr einfaches HTML-Skelett zu erstellen, das den Wünschen der meisten Webentwickler entspricht:
Dies geschieht über ein einfaches "Datei-> Neue Datei" und die Auswahl von "HTML-Seite" aus den Vorlagenoptionen. Dasselbe kann für Stylesheets oder JavaScript-Dateien erfolgen, obwohl die Vorlagen Barebones sind.
Diese Vorlage ist weit weniger umfassend als die HTML5-Boilerplate. Wichtig ist jedoch, dass sie nicht von Microsoft stammt (was für meine Webentwicklung wichtig ist)..
Und wie ich in meinem Blogbeitrag beschrieben habe, können Sie eigene Vorlagen mit erweiterten Funktionen erstellen.
Ich weiß was du sagst: "Ja, das ist süß, Rey, aber zeig uns mehr als nur ein HTML-Skelett."Ich komme dorthin. Geduld, Heuschrecke.
Bei der Verwaltung einer großen Menge an Website-Code scheint mir Visual Studio wirklich gut zu sein. Ich habe das TodoMVC-Rahmenprojekt von Addy Osmani und Sindre Sorhus heruntergeladen, weil es eine ziemlich große Anzahl von Dateien ist, mit denen gearbeitet werden kann. Um die Site einzusaugen, müssen Sie einfach "Datei-> Website öffnen ..." wählen und ein Verzeichnis auswählen:
Dies gibt mir eine so genannte "Lösung", mit deren Hilfe alle Ressourcen für meine Website organisiert und in einer Baumansicht dargestellt werden:
Eine der besten Funktionen des Projektmappen-Explorers ist, dass ich innerhalb der gesamten Lösung nach einem bestimmten Asset suchen kann. Wenn ich also herausfinden wollte, wo sich jQuery befindet, kann ich einfach den Begriff "jquery" eingeben, und es wird eine Liste aller Verzeichnisse und zugehörigen Dateien zurückgegeben:
Der Editor selbst verfügt über die Funktionen, die ich von einer IDE erwarte. Grundlegende Funktionen wie Zeilennummern und Codeeinstürze machen es möglich, tatsächlich im Entwurfsmodus zu arbeiten und Ihre Dateien problemlos in den Split-Screen-Modus zu versetzen. Eine Sache, die für mich ein Muss ist, ist eine gute Einsicht in den Code, sodass ich mir beim Erstellen des Codes die Attribute anzeigen lassen kann. Es ist schwer genug, sich an die Syntax der Programmiersprachen zu erinnern, so dass ein kleiner Helfer, der Ihnen sagt, dass die Attribute ein Geschenk des Himmels sind. VS bietet dies über Intellisense an, das jetzt HTML5, CSS3 und JavaScript unterstützt.
Ich sehe also nicht nur die Attribute, die für ein Element verfügbar sind, sondern es zeigt mir auch die Methoden, die ich verwenden kann. Beachten Sie, dass in diesem Beispiel Intellisense für das HTML5-Videoelement verfügbar ist. Ich bin kein Verfechter von Inline-Code, aber die Tatsache, dass es dort ist, ist immer noch sehr nützlich.
Für CSS erhalten Sie immer noch die Intellisense, die neben der Beschreibung der einzelnen Funktionen die vollständige Liste der Eigenschaften enthält:
Sobald Sie eine Eigenschaft ausgewählt haben, enthält sie Codehinweise, mit deren Hilfe Sie sich erinnern können, wie Sie Ihre Anweisungen formatieren:
Neben diesen Funktionen verfügt VS über intelligente Funktionen, mit denen Aufgaben wie das Auswählen von Farben einfach gemacht werden können:
JavaScript und das DOM wurden auch in Visual Studio geliebt, wobei es sich um eine erstklassige Sprache in der IDE handelt. keine Plugins mehr um es nutzbar zu machen. Mit dem Fokus auf Intellisense bietet VS vollständige Unterstützung für JavaScript- und DOM-Objekte, -Methoden und -Eigenschaften:
Die jQuery-Unterstützung ist bereits seit einiger Zeit verfügbar, und die Unterstützung für andere beliebte Frameworks von Intellisense ist im gesamten Internet verfügbar. Visual Studio 2012 wird jetzt mit jQuery Mobile ausgeliefert, damit Entwickler mobile Websites erstellen können.
Hier ist etwas, was Sie vielleicht nicht gewusst haben. Mit Visual Studio können Sie nicht nur mit allen gängigen Browsern testen, die Sie auf Ihrem System installiert haben, sondern auch ein Tool namens Page Inspector, das den in den meisten Browsern verwendeten Web-Debugging-Tools ähnelt. Mit dem Seiteninspektor können Sie Ihre Seite in Echtzeit anzeigen und Live-Änderungen an CSS und DOM vornehmen. Wenn Sie mit diesen Änderungen zufrieden sind, können Sie sie in Ihren Quelldateien speichern. Beachten Sie zum Beispiel, wie ich den Text des Tweets im folgenden Screenshot geändert habe, indem Sie ihn innerhalb des Markups aktualisieren:
Der offensichtliche Vorteil davon ist, dass Sie Ihren Editor nicht verlassen müssen, um Ihre Seite zu testen und Änderungen vorzunehmen. Und da die Änderungen live stattfinden, müssen Sie den betroffenen Code einfach in Ihren Quellcode einfügen. Dies ist möglich, da Visual Studio die Trident-Rendering-Engine von Internet Explorer sowie eine integrierte Version von Internet Information Server (IIS) verwendet, um eine dynamische Ausführung Ihrer Site zu ermöglichen. Richtig, Visual Studio wird mit einem Webserver ausgeliefert (und das schon seit einiger Zeit)..
Dies sind zweifellos nützliche Funktionen, aber der Workflow eines Webentwicklers ist komplexer als das Bearbeiten einiger Seiten oder CSS-Stile. Und ehrlich gesagt, viele der Funktionen stehen Code-Editoren zur Verfügung, allerdings über Community-Plugins.
Visual Studio hat JavaScript zu einer erstklassigen Sprache gemacht.
Ich denke, dass Visual Studio eine ideale IDE für die Webentwicklung ist, ist eine Erweiterung namens Web Essentials. Es ist das fehlende Teil einer ansonsten soliden Codierungsumgebung, da es eine Reihe wichtiger Funktionen hinzufügt. Diese Erweiterung erweitert Visual Studio um Funktionen wie:
Und es gibt noch so viel mehr. Mads Kristensen, der Erfinder von Web Essentials, hat hervorragende Arbeit geleistet, um die verwendeten Webentwickler zu destillieren und in die Erweiterung zu integrieren.
Zum Beispiel ist die Gewährleistung der Browserkompatibilität ein kritischer Teil unserer Jobs, aber bei so vielen Eigenschaften, die man sich merken kann, kann es ein wenig schwierig sein, sich daran zu erinnern, was wo funktioniert. Web Essentials hilft dabei, die Browserunterstützung für CSS-Eigenschaften anzuzeigen:
Um noch einen Schritt weiter zu gehen, werden Sie sogar darüber informiert, wenn Sie Herstellerpräfixe vermissen. Dies ist eine wichtige Überlegung, um sicherzustellen, dass Ihre Website mit allen gängigen Browsern funktioniert:
Außerdem können Sie die Herstellerpräfixe auf der Grundlage Ihrer eigenen Zielbrowsereinstellungen einfügen:
Während dies nur die fehlenden Herstellerpräfixe für diese bestimmte Eigenschaft hinzufügt, bietet Web Essentials die Möglichkeit, es seitenweit auszuführen, und es kann auch die fehlende, nicht mit einem Präfix versehene Version der Eigenschaft hinzufügen, um den Code zukünftig sicherer zu machen.
Da es sich um Browser-Unterstützung handelt, ist die Unterstützung älterer IE-Versionen ein Kinderspiel, und es ist unmöglich, sich an alle Hacks zu erinnern, die zum Rendern einer Seite erforderlich sind. Ja, Web Essentials bietet die Möglichkeit, bestimmte Hacks einzusetzen, damit Ihre Seiten richtig funktionieren:
Der Schädel und die gekreuzten Knochen sind ziemlich passend.
CSS-Präprozessoren sind der letzte Schrei, und das zu Recht. Die Möglichkeit, Variablendeklarationen zu erstellen und Mixins in CSS zu erstellen, ist besonders bei der Verwaltung großer Stylesheets von großem Vorteil. WENIGER ist eine der beliebtesten Lösungen. Tatsächlich habe ich eine Umfrage durchgeführt, bei der LESS eines der beliebtesten Frameworks war. Web Essentials verleiht Visual Studio WENIGER, so dass Sie während des Schreibens die CSS-Ausgabe in Echtzeit über ein Vorschaufenster anzeigen können:
Das Vorschaufenster mit vollständiger Editor-Unterstützung und der Möglichkeit, Compiler-Optionen festzulegen, ist ein Segen für Entwickler, die Visual Studio verwenden möchten und weniger Unterstützung benötigen.
Ich habe nur die Oberfläche der CSS-Funktionen von Web Essentials zerkratzt. Es gibt einfach so viel Reichtum für diesen einen Artikel.
Visual Studio ist eine der besten verfügbaren IDEs.
Wie bereits erwähnt, hat Visual Studio JavaScript zu einer erstklassigen Sprache gemacht. Es fehlen jedoch einige wichtige Workflow-Anforderungen, und Web Essentials erfüllt diese. Zum Beispiel sollte jeder Entwickler seinen JavaScript-Code einfärben. Dies ist nur eine gute Praxis und hilft, häufige Sprachfehler zu vermeiden. JSHint ist eine sehr beliebte Gabel von JSLint, die von Anton Kovalyov erstellt wurde und von Entwicklern intensiv zur Analyse ihres Codes auf potenzielle Probleme verwendet wird. Web Essentials enthält JSHint, mit dem Sie jederzeit Ihren Code einbetten können. Es kann auch so konfiguriert werden, dass der gesamte Code zur Erstellungszeit abgelegt wird.
Da ich die Erstellungszeit erwähnt habe, bietet Web Essentials auch die Möglichkeit, Ihre Dateien jederzeit zu minimieren. Es geht jedoch noch einen Schritt weiter, indem minimierte Dateien aktualisiert werden, wenn die ursprüngliche Quelldatei aktualisiert wird. Außerdem wird eine Quellenzuordnung erstellt, die später beim Debuggen hilft.
Viele Entwickler verwenden gern domänenspezifische Sprachen wie CoffeeScript und TypeScript. Für einige ist die mit der Meinung versehene Sprache von CoffeeScript im Vergleich zum Codieren in einfachem Ole-JavaScript äußerst attraktiv. Nun, diese Entwickler können dank Web Essentials in VS bewertet werden. Mads hat Unterstützung für beide DSLs hinzugefügt und eine ähnliche Vorschauunterstützung hinzugefügt, die ich bereits über LESS erwähnt habe. Wenn Sie Ihren TypeScript- oder CoffeeScript-Code eingeben, können Sie das resultierende JavaScript in Echtzeit sehen. Sobald Sie fertig sind, kann Web Essentials den Code für Sie minimieren:
Mads fügte auch nette HTML-Funktionen hinzu. Wenn Sie sich für Zen-Coding interessieren (ich habe es immer etwas seltsam gefunden), dann haben Sie mit Web Essentials etwas zu tun. Wenn ich dies in VS eingebe und die Tabulatortaste drücke:
div # contentRegion.address
Ich bekomme den folgenden Code:
Das ist sehr cool. Nicht meine Tasse Tee, aber trotzdem cool.
Und während er dort war, fügte er Unterstützung für clientseitige Templating-Engines wie Handlebars & JSRender, Markdown und einen Lorem Ipsum-Generator hinzu.
Ich frage mich wirklich, ob Mads schläft.
Ich hoffe, ich habe gezeigt, dass Visual Studio für HTML, CSS und JavaScript wirklich großartige Unterstützung bietet. Das Team von Microsoft hat hart daran gearbeitet, es zu einer Weltklasse-IDE für Webentwickler zu machen. Für mich ist das wesentliche Element, das es zu meiner Wahl für die Webentwicklung macht, die Web Essentials-Erweiterung. Es bietet mir die zusätzliche Funktionalität, die ich zur Verwaltung meines Workflows benötige. Sicher, jeder Entwickler hat andere Bedürfnisse und ich gebe nicht zu, alle Ihre angesprochen zu haben. Ich hoffe jedoch, dass ich genügend großartige Funktionen vorgestellt und gezeigt habe, die zeigen, dass VS für die Webentwicklung mehr als geeignet ist.
Accentsconagua