Rozszerzenie VS do manipulowania HTML/CSS

Question

Chcę poprawić swoje doświadczenie w programowaniu i wierzę, że mogę to zrobić, tworząc rozszerzenie Visual Studio (2012). Zacząłem zagłębiać się w dokumentacji na MSDN, ale jest gęsta i pracuję nad nią.

miałem kilka pytań:

1. jest rozszerzeniem właściwe podejście do scenariusza opisanego poniżej?
2. Jeśli tak, to jaki jest pomysł, w jakim obszarze nazw powinienem zacząć się zastanawiać?
3. Dowolna mądrość/linki RE: "pułapki" lub "grosz"?

Setup Mam bloku HTML i CSS ma pewne inline na niektórych elementach. Chciałbym kliknąć element prawym przyciskiem myszy i zastosować kod wbudowany do nowego lub istniejącego arkusza stylów (CSS).

Kodeks

<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> 

Prawdopodobnie operacja że przedłużenie naraziłoby mógł chwycić odniesienie do danego elementu i sprawdzić CSS inline (tag styl), należy go usunąć z elementu, a następnie dołączyć ten CSS do nowego lub istniejącego arkusza stylów w projekcie/rozwiązaniu. To, czy element ma już wartość atrybutu "klasa", może mieć wpływ na dostawcę wybranego dla tego projektu.

UPDATE

Piła tym na: http://www.asp.net/vnext/overview/aspnet/whats-new

inteligentnych Zadania

W widoku projektu, złożone właściwości formantów serwera często związanych okna dialogowe i kreatory ułatwiają ustawienie im. Można na przykład użyć specjalnego okna dialogowego, aby dodać źródło danych do elementu sterującego Repeater lub dodać kolumny do formantu GridView.

Jednak ten typ interfejsu użytkownika dla złożonych właściwości nie był dostępny w widoku źródłowym. Dlatego Visual Studio 11 wprowadza inteligentne zadania dla widoku źródła. Inteligentne zadania to kontekstowe skróty do często używanych funkcji w edytorach C# i Visual Basic.

dla ASP.NET Web Forms kontroli, Inteligentne Zadania pojawiają się na metkach serwerowych jako mały glifów, gdy punkt wstawiania znajduje się wewnątrz elementu:

mogę dostać kod do tego okna?

DZIĘKI!

Answer 1

Zrobiłem małe rozszerzenie VS w zeszłym roku dla klasy, która wyszła całkiem nieźle. Miało to związek z sortowaniem, formatowaniem i ponownym porządkowaniem plików kodu C++. Jest trochę inny niż to, co chcesz zrobić, ale mogę zasugerować, że przyjrzysz się CodeMaid. Ma zaskakującą liczbę funkcji, a ponieważ jest to open source, kod źródłowy bardzo mi pomógł, kiedy pracowałem nad moim rozszerzeniem.

Niestety, pracujesz z HTMLem, a Visual Studio dostarcza tylko model kodu (podstawowy AST) dla C# i odrobinę C++. Prawdopodobnie nie uzyskasz pomocy ze studia graficznego przy edycji HTML.

Więc zrobiłbym 2 rzeczy. Najpierw spójrz na samouczki these. Pomogą Ci utworzyć bazę rozszerzenia i zapoznać się z interfejsem API. (Najprawdopodobniej będziesz musiał szukać innych, aby poszerzyć swoją wiedzę, ponieważ tutoriale MS nie są najlepsze.) Po drugie, dopracuj wyrazy regularne. Najlepszym sposobem wykonania tego, co chcesz, jest prawdopodobnie samodzielne przeanalizowanie pliku i zlokalizowanie wszystkich instancji wbudowanych znaczników stylu. Następnie dodaj element menu prawym przyciskiem myszy i znajdź odpowiedni znacznik, gdy zajdzie taka potrzeba.

Ale znowu, zacznę od podstawowych samouczków. Interfejs API rozszerzeń VS jest nieco dziwny, więc prawdopodobnie będziesz chciał się do niego przyzwyczaić, wykonując najpierw proste czynności.

Powodzenia, będziesz go potrzebować. : p

EDYCJA: Wiem, że to nie odpowiada bezpośrednio na twoje pytanie, tylko oferuje trochę rad.

Answer 2

Tak, do wyboru jest VSIX.

Możesz rzucić okiem na niektóre z kodu z Web Essentials. Podstawowe informacje o sieci działają podobnie do tego, co chcesz robić.

Poniżej znajduje się link do sortowania CSS na github: https://github.com/madskristensen/CssSorter

A ten jest link do funkcji Kopiuj ZenCoding: https://github.com/madskristensen/zencoding

Ponieważ oboje zaangażować do czynienia z HTML, CSS cię może uzyskać wiele informacji na temat kodu. Jedyną różnicą w projekcie jest to, że jednocześnie celujesz jednocześnie i szukasz dostępu do wielu plików. Na szczęście dla HTML i CSS nie wiem, czy istnieje wbudowany parser.

Istnieje kilka pakietów one dostępne na Nuget chociaż, więc można próbować je out: ExCSS stylów Parser: http://nuget.org/packages/ExCSS/ HtmlAgilityPack: http://nuget.org/packages/HtmlAgilityPack/

ja nie pracowałem z tych pakietów bezpośrednio, ale myślę, że ci” Będę musiał je wypróbować i sprawdzić, czy pasuje.

Co do smarttasków: zwykle jest to część projektanta kontroli i nie sądzę, że jest to odpowiednie do tego, co chcesz robić. Dodałbym tylko twoje rozszerzenie do menu kontekstowego.