image

Niedawno był wpis o naprawdę wspaniałym edytorze jakim jest Sublime Text 2. Wtedy postarałem się przedstawić sporo użyteczności i ciekawostek jakie do tego czasu udało mi się zlokalizować/poznać. Dziś ciąg dalszy nowości (tak na “gorąco” bym rzekł), które przedstawię w formie, która - mam nadzieję – rzuci czytelnikiem na kolana (u mnie było całkiem blisko).

W gwoli ścisłości – ja obecnie korzystam z wersji deweloperskich (czyli coś zbliżonego do Night Buildów); wersje beta, które pojawiają się od czasu do czasu mogą się nieznacznie różnić – trzeba to mieć na uwadze.

A więc bez owijania w bawełnę – zaczynamy!

Mercurial i Git

Okazuje się, że są gotowe wtyczki do Sublime Text 2 do obsługi 2 najpopularniejszych systemów kontroli wersji – Gita i Mercuriala. Uprzedzając możliwe wątpliwości – nie są to te wtyczki, które pododają wesołe zielone lub czerwone ikonki gdzie się tylko da, tylko rozszerzą nieco funkcjonalność Command Palette o przydatne opcje związane z obsługą tychże VCS-ów. Krótko o tym jak się instaluje pluginy (zakładając, że wykonaliście instrukcję odnośnie tego samego tematu w poprzednim moim wpisie). Instalacja wygląda następująco: We włączonym Sublime Text 2, włączamy Command Palette przez skrót Ctrl + Shift + P i wpisujemy “Install”. Ładuje nam się chwilę lista dostępnych paczek do zainstalowania. Po wybraniu któregoś elementu z listy, dana paczka zostanie zainstalowana. W ten sposób wyszukujemy w dostępnych paczkach słów hg lub git, w zależności od tego co nam jest bardziej potrzebne.

Przykładowy diff

Po zainstalowaniu plugina do np. mercuriala i otworzeniu sobie projektu, który tego systemu kontroli wersji korzysta możemy wypróbować możliwości tej wtyczki w prawdziwym świecie. Szczególnie przydatną funkcją jest diff otwartego pliku (który porównywany jest z poprzednią wersją w repozytorium) lub np. status repozytorium. Wyniki wszystkich komend mercurialowych są w postaci tekstowej w nowej zakładce. Przykładowe zastosowanie: otwieramy dokument, którego zmiany nas interesują (musi być objęty systemem kontroli wersji – co jest oczywiste), włączamy Command Palette (Ctrl + Shift + P), wpisujemy “Hg”, Enter, wybieramy diff (this file) z listy i znów Enter. Pojawi się nam piękny diff danego pliku.

Motyw Soda

Motyw Soda W którejś wersji beta pojawiła się możliwość stylizowania całego okna programu, a nie tylko okna z tekstem. Właśnie w tym celu powstał motyw Soda, który dostępny jest tutaj: https://github.com/buymeasoda/soda-theme/. Jest to punkt szczególnie warty polecenia wszystkim tym, którzy naprawdę lubią dopieszczać wygląd narzędzi, z których korzystają (ja do takich m.in. się zaliczam) oraz – co dość mocno wątpilwe – tym, którym poprzedni wygląd Sublime’a się nie podobał.

Na stronie z podanego linka jest instrukcja jak samemu sprawić sobie taki wygląd jak na screenie obok.

Wbudowany diff

image

Skoro o diffach już była mowa, to warto też wspomnieć, że Sublime Text 2 ma wbudowaną obsługę diff dla plików nieobjętych kontrolą wersji. Jest to rozwiązanie częściowo podobne do Compare z Notepad++. Aby wypróbować to o czym mówię, należy na liście dokumentów (nie muszą być otwarte – mogą być jakiekolwiek pliki z projektu) zaznaczyć konkretnie 2 różne pliki (z Ctrl na przykład) i pod prawym przyciskiem myszki będzie opcja Diff files. Prezentacja różnic odbywa się w zgoła odmienny sposób niż w przypadku Notepad++, ale w domyślny dla osób, które pracują częściej z Mercurialem lub gitem niż z TFS.

Zen Coding

Na koniec prawdziwa perełka, która nie jest związana bezpośrednio z omawianym edytorem tekstu, jednak dostępny jest od niedawna plugin dodający obsługę Zen Coding w tym fenomenalnym edytorze. Dla wszystkich niewtajemniczonych przedstawię czym to w ogóle jest i dlaczego zmieni wasze życie na lepsze :)

Zen Coding jest to projekt, który przyspiesza edycję plików opartych o XML (tj. HTML, XSL, aspx i inne podobne) przez zastosowanie mechanizmu skrótów (selektory CSS to są właśnie takie skróty do poruszania się po strukturze pliku XML). Najprostszym takim skrótem jest np. #main>p, które powoduje wybór paragrafu (p) bezpośrednio z taga o id=main. To – dla osoby znającej choć odrobinę HTML i CSS – jest oczywiste. Zen Coding zaś wychodzi z założenia, że jeśli skrót opisuje jednoznacznie kod xml, to ten kawałek kodu xml można wygenerować znając tylko skrót.

Innymi słowy: otwierając nowy dokument html w Sublime Text 2 i mając zainstalowany plugin Zen Coding, wystarczy wskazać miejsce w dokumencie, gdzie ma być wstawiony nasz kod, nacisnąć "Ctrl + Alt + Enter" i w panelu poniżej, który się pojawi, należy wpisać skrót, z którego chcemy wygenerować kod html i voilà.

Jak zauważyłem wcześniej Zen Coding nie ogranicza się tylko do html, przez co z równą łatwością możemy sobie nim pomagać przy edycji plików ASPX, ASCX, CONFIG i innych, które sobie Microsoft wymyślił. Jako przykład podam dość zaawansowane zastosowanie, które pokrywa chyba większą funkcjonalność całego projektu z wynikowym kodem, który otrzymamy:

asp:Panel[runat="server"]#resultsDiv>tlk:RadGrid#issues[CssClass="costam" runat="server"]>MasterTableView>(Columns>tlk:GridTemplateColumn*5>HeaderStyle[Width="10"]+ItemTemplate>{Click }+a[href="http://google.pl"]{here}+{ to continue})+PagerStyle[Mode="NumericPages" AlwaysVisible="true"]  

A oto wynikowy kod xml:

<asp:Panel runat="server" id="resultsDiv">  
  <tlk:RadGrid id="issues" CssClass="costam" runat="server">
    <MasterTableView>
      <Columns>
        <tlk:GridTemplateColumn>
          <HeaderStyle Width="10">
        </HeaderStyle>
          <ItemTemplate>Click <a href="http://google.pl">here</a> to continue </ItemTemplate>
        </tlk:GridTemplateColumn>
        <tlk:GridTemplateColumn>
          <HeaderStyle Width="10">
        </HeaderStyle>
          <ItemTemplate>Click <a href="http://google.pl">here</a> to continue </ItemTemplate>
        </tlk:GridTemplateColumn>
        <tlk:GridTemplateColumn>
          <HeaderStyle Width="10">
        </HeaderStyle>
          <ItemTemplate>Click <a href="http://google.pl">here</a> to continue </ItemTemplate>
        </tlk:GridTemplateColumn>
        <tlk:GridTemplateColumn>
          <HeaderStyle Width="10">
        </HeaderStyle>
          <ItemTemplate>Click <a href="http://google.pl">here</a> to continue </ItemTemplate>
        </tlk:GridTemplateColumn>
        <tlk:GridTemplateColumn>
          <HeaderStyle Width="10">
        </HeaderStyle>
          <ItemTemplate>Click <a href="http://google.pl">here</a> to continue </ItemTemplate>
        </tlk:GridTemplateColumn>
      </Columns>
      <PagerStyle Mode="NumericPages" AlwaysVisible="true"> </PagerStyle>
      </MasterTableView>
    </tlk:RadGrid>
</asp:Panel>

Poniżej jeszcze animowany gif, na którym można zobaczyć tę funkcjonalność w akcji:

Trudno ukrywać jak bardzo przydatna jest to funkcjonalność w codziennym życiu programisty, a w przypadku Sublime Text 2 – wykonana w pięknym stylu :)

Referencje

http://www.w3.org/TR/CSS2/selector.html

http://code.google.com/p/zen-coding/wiki/Actions

Wątek na forum Sublime Text na temat Zen Coding