Intellisense JavaScriptu ve VS 2008

22.15 - 30. listopadu 2007 | ASP.NET 2.0

Jednou z novinek nového Visual Studia je nesrovnatelně lepší Intellisense pro psaní JavaScriptů. Pojďme si ji trochu přiblížit na následujících řádcích.

Kdysi byl pro mě JavaScript odporným jazykem bez ladu a skladu. Přibližně před rokem, se začala psát nová verze AMap postavená na API a frameworku Mootools. V rámci interního vzdělávání nás Dan zasvětil do tajů JavaScriptu a já pomalu začal objevovat jeho kouzlo. V průběh února jsem potřeboval psát nějaké AJAXové věci, a tak nastal čas se JavaScript naučit.

Zjistil jsem, že s MooToolama je to celkem sranda a postupem času člověk začne chápat víc a víc v různých souvislostech. Čím víc toho pak píše, začne se poohlížet po něčem, co by mu psaní ulehčilo. Zkoušel jsem Aptanu, ale ta mi moc nepomáhala, protože MooTooly neuměla. Zkoušel jsem i beta verze Orcasu, ale stejně to nebylo ono, aspoň mi to teď tak připadá…

Zkrátka, za poslední dva týdny jsem napsal JavaScriptu docela kopec, a poslední týden ve VS2008, takže můžu bezprostředně porovnat. No prostě s ním je to lepší. Konec románů a teď k věci.

Intellisense

Intellisense se nově objevuje po prvním napsaném písmenku, ne až po tečce jako v předchozí verzi. Nabízí i klíčová slova, takže funguje moje oblíbené ret mezera. Okénky intellisense jde i zprůhlednit, pokud potřebujete kouknout na kód, který je pod ním. Stačí podržet klávesu CTRL.

Intellisense je plněna parserem přilinkovaných JavaScriptů. Parser je podle mého názoru, ještě trošku v pubertě. Pokud píšete script, dokáže interpretovat, pouze to, co je před kurzorem. I když používá značnou cache, nedokáže vám nabídnout funkce, které jsou až dál.

Jelikož je JavaScript dynamicky typovaný, je tu občas problém, že parser nerozpozná aktuální typ a tak vám intellisense nenabídne nic. :) Toto chování by se dalo značně minimalizovat díky dokumentačním komentářům, kde se např. u parametrů dají nastavit datové typy. Snad v příští verzi.

Dokumentační komentáře

Aby byla intellisense živena kvalitním obsahem, přichází nové studio s dokumentačními komentáři, ve stylu jak je známe v C#, také v JavaScriptu. Hlavní rozdíl je, že se komentáře píší do těla funkce, nikoli před ní. A je tu i další chybka parseru, nedokáže zobrazovat v intellisense obsah dokumentace ze stejného souboru.

Jak tedy takové komentáře vypadají? Následovně:

function add(node) {
  /// <summary>Přidá uzel do stromu.</summary>
  /// <param name="node" type="TreeNode">Uzel.</param>
}

Dokumentační tag summary přidá popis funkce, v praxi to vypadá asi následovně:

Tag param popisuje parametr funkce a v tomto případě i jeho typ. Opět ukázka:

Reference na scripty

Pokud píšete něco většího, neobejdete se bez extrahování scriptů do samostatných souborů. V tom případě, ale intellisense neví, co je v ostatních souborech, a moc nám toho neukáže. Naštěstí je tu pseudodokumentační tag reference pomocí něhož se jde odkazovat na další scripty, jejichž kód využíváme (tradičně JS frameworky), nebo dokonce i na ScriptService v projektu. Užití může být následující:

/// <reference path="mootools.js" />
/// <reference path="/services/ajax.svc" />

Tento kód napíšeme na začátku souboru a studio už bude vědět. Občas se mi ale stává, že pokud provedu změnu v referencovaném souboru, změna se v intellisense neprojeví. Za vinu to kladu cacheování. Zatím 100% řešením, zdá se, je soubor zavřít a znovu otevřít. Po přeparsování už by měla být intellisense aktuální.

Uzávěr

Jak už jsem psal na začátku, podpora JavaScriptu ve Visual Studiu pokročila o pořádný kus dopředu, přesto má ale ještě pár much, které by stálo za to vychytat. S ohledem na to, jak Microsoft podporuje vývoj interpretů a kompilátorů pro dynamické jazyky, doufám, že se jejich podpora ve VS ještě zlepší.

Související

debuged by MiSHAK

Komentáře

Jestli tomu dobře rozumím, neumí VS2008 nic moc a ještě k tomu je potřeba svůj kód zaprasit jakýmisi s ničím jiným nekompatibilními komentáři.

Hmmm.

Visual Studio 2008 (a i předchozí verze) má nejlepší Javascript debugger široko daleko a nově i zlepšenou technologii intellisense, o které si jiné IDE mohou nechat zdát. Jediné, co mi trochu chybí, je podpora refactoringu, ale IntelliJ IDEA si kvůli tomu kupovat nebudu. Add. reference tag, chcete kompatibilitu s něčím, co jinde neexistuje ;)

No, vypadá to slibně, ale chtěl jsem se zeptat (něž to začnu stahovat :), dají se ty reference tagy nějak nastavit, aby se při publikování vymazaly (tj. aby tam byly pouze po dobu vývoje)?

[1] Martin Asi tomu opravdu moc dobře nerozumíš, ale to nevadí. Zkus ti to stáhnout a vyzkoušet. Ty komentáře jsou kompatibilní s ostatníma dotnetíma jazykama, existují nástroje pro export dokumentace. Co chceš víc?

[3] Tomik Zkus třeba JSUtils od Nikhila Kothariho nebo nějaký kompresor JavaScriptu. Ten ti nejen pročistí komentáře, ale i bílé znaky apod.

[4] rarouš Díky! To mě nenapadlo. Poměrně jednoduché řešení.

Čau,

zajímalo by mě, proč jste zvolili jako základ JavaSriptový framework Mootools. Stojíme před podobným rozhodnutím na našem projektu a Mootools bohužel kolidují se Seleniem (je postaveno na frameworku Prototype), které používáme k testování rozhraní.

Druhá věc – proč používáte JavaScriptový framework, který neni od Microsoftu? Měl jsem pocit, že ASP.NET AJAX taky poskytuje určitý framework a integrace s dalšími nástroji by byla určitě lepší. Nebo se pletu? =)

MooTools byla Danova volba, takže to je spíše otázka na něj. Mě osobně se s MooToolama píše líp. Je to asi otázka osobních preferencí.

ASP.NET AJAX Extension vyžadují složitější deployment (pokud používáte ASP.NET nastavbu nad JS), musejí být na serverech nainstalované, v době vývoje AMap nebyly ve stabilní verzi apod. Právě i ta integrace, závislost na některé infrastruktuře ASP.NET, kterou nepoužíváme, je i jedním zdůvodů proti.

Doufám, že to jako odpověď stačí :)

Taky se mi s MooTools píše dobře, až na tu jejich nešťastnou kolizi se Seleniem. Není příjemné měnit vývoj, kvůli testování, ale jak píšeš v článku o unit testech, občas je bohužel nutné vývoj přizpůsobit. Zkoušel jsem ještě na Davidovo doporučení jQuery a přijde mi taky dobré.

Děkuji za radu s ASP.NET AJAXem i za odpověď. Stačí. =)

MooTools jsou framework, jejichž autoři Javascript vřele milují, a na jeho kódu je to sakra znát :) MS Ajax je určen hlavně pro podporu komponent ASP.NET Na rozdíl od Moo nemůžu komunnikovat s autory, ani získat opravu nahlášeného bugu do pár dnů. Ale ani MooTools nejsou vhodné na vše. Javascript frameworky lze rozdělit do dvou skupin. První skupina (MooTools, Prototype) modifikuje prototype a netrpí obsesí namespaceování všeho. Výsledkem je maximálně rychlý a úsporný kód, nevýhodou jsou možné kolize s jiným JS. Oproti tomu, YUI nebo JQuery přísně všechno namespacují, ale hlavně nerozšiřují fukce objektů pomocí modifikace prototype (vytváření wrappery). Výsledkem je menší rychlost, potenciálně větší spotřeba paměti, ale hlavně to, že kolize s jiným js kodem je skoro vyloučena. Jako všude, je to trade off – pokud víš, že na stránce jiný js kód nebude, použij Mootools.

Díky za rady, tohle know-how se blbě shání. Framework MooTools mi sice přirostl k srdci, ale kvůli těm kolizím se budeme nejspíš rozhodovat mezi ASP.NET Ajaxem a JQuery a podobnými. Uf. Výběr správného JS frameworku je těžký, snad pak nebudeme litovat.

Dá se nějakým způsobem zařídit js intellisence i v .xsl šablonách? Docela by to bodlo.

Místo pro tvůj názor

O autorovi

Jmenuji se Aleš Roubíček a jsem vývojář webových aplikací na platformě ASP.NET. Pracoval jsem v portálu Atlas.cz na katalogových aplikacích. Nyní pracuji v Twaregu na web 2.0 projektech a na reklamním systému. Zajímám se o webové technologie všeho druhu v poslední době především o mikroformáty, ASP.NET MVC a Silverlight. Pokud na mne máte nějaký dotaz nebo tak, neváhejte mne kontaktovat.