VS estensione per manipolare HTML/CSS

Question

Sto cercando di migliorare la mia esperienza di programmazione e credo di poterlo fare creando un'estensione di Visual Studio (2012). Ho iniziato a scavare nella documentazione su MSDN, ma è denso e ci sto lavorando.

ho avuto un paio di domande:

1. è un'estensione l'approccio corretto per lo scenario descritto di seguito ?
2. In tal caso, qualsiasi idea su quale spazio dei nomi dovrei iniziare a scavare?
3. Qualsiasi saggezza/collegamento di saggezza RE: "trappole" o "gotcha"?

L'installazione ho un blocco di codice HTML e ha un po 'di CSS in linea su alcuni elementi. Vorrei fare clic con il tasto destro sull'elemento e applicare il codice inline a un foglio di stile nuovo o esistente (CSS).

Il Codice

<div> 
    <div class="ui-bar-d ui-bar" > 
     <span class="WBHeaderDetail" style="margin-left: 5px; margin-right: 5px;"> 
      Name: <em class="WBHeaderDetailValue" style="text-decoration: underline;">@ViewBag.JobName</em> 
     </span> 
     <span class="WBHeaderDetail" style="margin-left: 5px; margin-right: 5px;"> 
      Status: <em class="WBHeaderDetailValue" style="text-decoration: underline;">@ViewBag.Status</em> 
     </span> 
     <a data-role="button" data-theme="b" data-icon="check" data-inline="true" data-mini="true" >Save</a>  
    </div> 
</div> 

Probabilmente, l'operazione che estensione esporrebbe potrebbe afferrare un riferimento ad un dato elemento e verificare la presenza di CSS in linea (tag di stile), rimuoverlo dal elemento, e quindi aggiungere quel CSS in un foglio di stile nuovo o esistente nel progetto/soluzione. Se l'elemento abbia già o meno un valore per l'attributo 'classe' potrebbe influire sul venditore selezionato per questo progetto.

UPDATE

trovato questo su: http://www.asp.net/vnext/overview/aspnet/whats-new

Task intelligenti

In visualizzazione struttura, complessi proprietà dei controlli server spesso hanno associato le finestre di dialogo e wizard per rendere più facile da impostare loro. Ad esempio, è possibile utilizzare una finestra di dialogo speciale per aggiungere un'origine dati a un controllo Repeater o aggiungere colonne a un controllo GridView.

Tuttavia, questo tipo di guida dell'interfaccia utente per le proprietà complesse non è stato disponibile in visualizzazione Origine. Pertanto, Visual Studio 11 introduce Attività intelligenti per la visualizzazione Origine. Le attività intelligenti sono scorciatoie in base al contesto per le funzioni di uso comune negli editor C# e Visual Basic.

per ASP.NET Web Forms controlli, attività intelligenti appaiono sui tag dei server come un piccolo glifo quando il punto di inserimento è all'interno dell'elemento:

Posso ottenere il mio codice in quella finestra?

GRAZIE!

Answer 1

Ho fatto una piccola estensione VS l'anno scorso per la classe che si è rivelata piuttosto buona. Aveva a che fare con l'ordinamento, la formattazione e la riorganizzazione dei file di codice C++. È un po 'diverso da quello che vuoi fare, ma posso suggerirti di dare un'occhiata allo CodeMaid. Ha un numero sorprendente di funzionalità e, poiché è open source, il codice sorgente mi ha davvero aiutato quando stavo lavorando sulla mia estensione.

Sfortunatamente, stai lavorando con HTML e Visual Studio fornisce solo il modello di codice (AST base) per C# e un po 'di C++. È improbabile che tu possa ottenere aiuto da Visual Studio con l'editing HTML.

Quindi vorrei fare 2 cose. Per prima cosa, guarda le esercitazioni these. Ti aiuteranno a creare la base per la tua estensione e familiarizzare con l'API. (Probabilmente dovrai cercare gli altri per aumentare le tue conoscenze, dato che i tutorial della MS non sono i più grandi.) In secondo luogo, ripulisci le tue espressioni regolari. Il modo migliore per completare ciò che si desidera è probabilmente analizzare il file personalmente e individuare tutte le istanze dei tag di stile in linea. Quindi aggiungi una voce di menu con il tasto destro del mouse e individua il tag appropriato quando necessario.

Ma ancora, vorrei iniziare con le esercitazioni di base. L'API di estensione VS è un po 'strana, quindi probabilmente vorrai abituarti a fare cose semplici prima.

Buona fortuna, ne avrai bisogno. : p

EDIT: So che questo non risponde alla tua domanda direttamente, solo offrendo un po 'di consigli.

Answer 2

Sì un VSIX è la strada da percorrere.

È possibile dare un'occhiata ad alcuni codici da Web Essentials. Il web essentials fa qualcosa di simile a quello che vuoi fare.

Il seguente è un link al sorter CSS su github: https://github.com/madskristensen/CssSorter

e questo è un collegamento alla funzionalità di HTML ZenCoding: https://github.com/madskristensen/zencoding

Dato che sia di coinvolgerli trattare con HTML, CSS potrebbe ottenere molte informazioni guardando il codice. L'unica differenza con il tuo progetto è che in realtà stai prendendo di mira entrambi contemporaneamente e stai cercando di accedere a più file. Non frettunatamente, per HTML e CSS non so se sia disponibile un parser integrato.

Ci sono alcuni pacchetti di catalogo disponibili su NuGet però, così si potrebbe provare questi fuori: ExCSS Stylesheet Parser: http://nuget.org/packages/ExCSS/ HtmlAgilityPack: http://nuget.org/packages/HtmlAgilityPack/

Non ho lavorato con questi pacchetti direttamente, ma immagino' Dovremo provarli e vedere se si adatta.

Per quanto riguarda le smarttasks: questo di solito fa parte del progettista di controlli e non penso sia appropriato per ciò che si vuole fare. Vorrei semplicemente aggiungere la tua estensione al menu contestuale