Sublime Text 2 - uniwersalny edytor dla developera

Artykuł dodany: 13 listopada 2012. Ostatnia modyfikacja: 24 maja 2013.

Stopień trudności (1 - dla początkujących, 5 - dla ekspertów): 1

Bycie programistą oznacza zazwyczaj długie godziny spędzone na nauce, kodowaniu, nauce kodowaniu i tysiąc razy powtórzonym kodowaniu. Pisanie zaawansowanych aplikacji w notatniku mija się z celem, szybciej ukończony projekt oznacza zadowolonego pracodawcę, więcej wolnego czasu dla siebie i rodziny. Wychodząc naprzeciw tym oczekiwaniom wiele firm prześciga się w tworzeniu “kombajnów” do wszystkiego – ciężkich, wolnych ale trzeba to przyznać, spełniających swój cel. Dwaj najpoważniejsi gracze – Netbeans i Eclipse przez wszystkie lata obecności na rynku zdążyły zdobyć uznanie i szacunek rzeszy programistów. Równoległym nurtem podąża koncepcja, iż dobry edytor to szybki edytor. Oferujący stosunkowo dobre podpowiadanie składni, duże możliwości personalizacji ale nie obciążony domyślnie ogromem funkcji z których na co dzień wykorzystuje się 10%. Do takich edytorów można zaliczyć Notepad++, KDevelop czy w końcu Sublime Text. Zdecydowałem się opisać (a zarazem polecić) Sublime Text 2 z kilku powodów:

  • - dostępny jest na wszystkie platformy: Windows (również w wersji portable – nie wymagającej instalacji), Linux, OS X
  • - nie wymaga wielu zasobów systemowych
  • - posiada ogromny zbiór pluginów rozszerzających podstawowe możliwości (bazujących na świetnym TextMate)
  • - możliwości konfiguracyjne przewyższają większość obecnych na rynku rozwiązań
  • - większość osób uważa że jest wygodny w obsłudze

Trzeba też uczciwie przyznać że edytor nie jest bez wad (ostatnimi czasy zastopowany rozwój, kilka mniej lub bardziej poważnych błędów) – w podobnym tonie można jednak napisać o każdym środowisku.

Przygotowanie edytora do pracy

Po ściągnięciu paczki odpowiedniej dla naszego systemu (dla najbardziej popularnych dystrybucji Linuksa społeczność przygotowała odpowiednie pakiety) i uruchomieniu, naszym oczom ukaże się czarny ekran a edytor gotowy będzie do podstawowej pracy. Pierwszym krokiem jaki należy wykonać to instalacja pakietu Sublime Package Control – jest to nic innego jak menadżer pakietów wspomagający przeglądanie/usuwanie/dodawanie pakietów. Odpowiada również za proces automatycznej aktualizacji. Wszystkie pakiety możemy również instalować ręcznie (najczęściej pobierając odpowiednie pliki z GitHub). Sublime Text to edytor który bardzo mocno polega na skrótach klawiszowych. Większość akcji możemy oprogramować “pod siebie” zmieniając odpowiednio pliki konfiguracyjne. Jednym z głównych i najczęściej stosowanych skrótów będzie ctrl + shift + p. Otwiera on okno poleceń. Wraz z dodawaniem kolejnych pakietów na liście zaczną pojawiać się nowe opcje. Zacznij wpisywać “browse packages” i obserwuj jak edytor dynamicznie ogranicza listę. Kiedy zatwierdzisz wybór (enter) powinno otworzyć się okno systemowe z katalogiem “Packages” – to tutaj trafiają wszystkie pakiety instalowane automatycznie. Tutaj też możesz przenosić je ręcznie. Co ciekawe większość pakietów działa od razu po instalacji – nie trzeba restartować edytora. Innym ważnym skrótem jest ctrl + ` – otwiera on okno konsoli w której możesz obserwować ostatnie zdarzenia, błędy bądź akcje, które miały miejsce w edytorze. Możesz również wpisywać własne polecenia. Zainstaluj teraz Sublime Package Control przepisując do konsoli polecenie widoczne na stronie instalacyjnej pakietu albo ręcznie wgrywając paczkę. Od tej chwili będziesz w stanie szybko dodawać nowe pakiety ze strony http://wbond.net/sublime_packages/community. Gdy ponownie otworzysz okno poleceń będziesz mógł zauważyć, że pojawiło się kilka nowych opcji – “Package Control: *”. Dzięki “Install Package” możliwa jest instalacja nowego pakietu bezpośrednio z sieci, lista zostanie pobrana przy pierwszej próbie uzyskania dostępu. “List Packages” wyświetla wszystkie zainstalowane pakiety. Dzięki “Add Channel/Repository” możesz dodać zewnętrzne repozytoria oprogramowania. Uzbrojeni w nowe, potężne narzędzie możemy skonfigurować nasz edytor do pracy z technologiami webowymi.

Podpowiadanie składni HTML, CSS, JavaScript

Jednym z moich ulubionych dodatków który chcę mieć dostępny niezależnie od zainstalowanego edytora jest Zen Coding. Umożliwia on szybkie generowanie struktury HTML/XML, CSS na podstawie selektorów CSS i skrótów. Przykładowo wpisując:

ul#menu>li*5>a

i wciskając tab w celu rozwinięcia podpowiedzi, otrzymamy strukturę:

<ul id="menu">
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

Natomiast poniższe zapisy:

ta:c
fl:l

Rozwiną CSS do pełnego kodu w postaci:

text-align: center;
float: left;

Skróty są dość intuicyjne i szybko można się ich nauczyć. Pełen ich spis znajdziesz w dokumentacji. Skoro już wiesz jak instalować pakiety wyszukaj “ZenCoding” “emmet” i spróbuj poeksperymentować ze składnią. Zen Coding umożliwia również generowanie pełnej przykładowej struktury dokumentu np. dla HTML 5 poprzez skrót

html:5

Może się jednak zdarzyć że będziemy potrzebowali wygenerować wyłącznie sam DOCTYPE albo bardziej zaawansowaną strukturę podstawową i wtedy z pomocą przyjdzie nam pakiet sublime-text-doctypes. Gdy zerkniesz w źródła na GitHub zobaczysz, że kod składa się ze “snippetów” czyli małych, powtarzalnych kawałków kodu. Przykładowo plik bootstrap-button.sublime-snippet zawiera kod generujący podstawowy button w opraciu o Twitter Bootstrap. Kod uruchamiany jest skrótem “boost-button[tab]” albo z okna poleceń (wygodne jeśli nie pamiętasz skrótu a wiesz że takowy istnieje). Każdy snippet możesz wyedytować dostosowując do własnych potrzeb albo dodać nowy, własny. Kod “snippetu” to nic więcej jak uproszczony dokument XML zawierający definicję, opis, skrót uruchamiający i zasięg czyli opis w jakich językach snippet jest aktywny. Więcej na ten temat znajdziesz w dokumentacji Sublime text – snippety.

Automatyzacja pewnych czynności w pracy z edytorem Sublime Text to jego wielka siła. Kolejnym bardzo przydatnym pakietem znacząco wpływającym na wydajność pracy może być automatyczna minimalizacja kodu JS i CSS za pomocą YUI Compressor. Sam kompresor znany jest zapewne wielu programistom. Oprócz typowej minimalizacji poprzez usunięcie białych znaków i zbędnych komentarzy skraca również nazwy zmiennych. Do pracy wymaga zainstalowanej Javy. Po instalacji zwróć uwagę na to, czy ścieżka do JRE podana jest prawidłowo gdyby system nie potrafił wykryć jej automatycznie. Zmienić możesz ją w pliku “YUI Compressor.sublime-build” razem z innymi opcjami. Wystarczy teraz wcisnąć klawisz F7 aby edytor automatycznie wygenerował odpowiedni plik .min.js/css.

Jest wielce prawdopodbne że w swojej pracy będziesz chciał wykorzystać bibliotekę jQuery. Dobrze było by mieć aktywne podpowiadanie nazw funkcji. Umożliwia to pakiet Sublime jQuery. Podobne jak wcześniej opisywany Doctype bazuje w głównej mierze na snippetach. Dzięki temu w szybki i przyjemny sposób jesteś w stanie dopasować podpowiadanie do własnych potrzeb albo dopisać nowe funkcje. Warto w tym momencie zwrócić uwagę na sposób, w jaki informujesz edytor w którym języku aktualnie piszesz. Zmianę dokonuje się standardowo poprzez okno konsoli. Składnia “Set Syntax” przełącza na jeden z wielu dostępnych języków. Po instalacji pakietu powinien na tej liście pojawić się również wpis “jQuery”. Wpisz znak dolara $[tab], edytor uzupełni obiekt jQuery, popraw wyszukiwny element, dopisz jedną z funkcji przykładowo .on[tab]. Jak widzisz, oprócz typowego dopełnienia z opisem parametrów pojawiła się często stosowana w takich sytuacjach funkcja “event.preventDefault()”.

Innym bardzo użytecznym pakietem będzie poprawione podpowiadanie składni atrybutów HTML dostępne na stronie github.com/agibsonsw/HTMLAttributes lub oczywiście instalowane przez menedżera pakietów. Zmienia on sposób w jaki Sublime Text sugeruje treść dla poszczegónych atrybutów HTML na bardziej naturalny, pasujący do konkretnego kontekstu. Gdy już poprawimy atrybuty możemy zająć się też tagami. Pakiet pozwala nam m.in. konwertować tekst na tag, czy automatycznie formatować składnie dokonując właściwych wcięć (ctrl + alt + f).

W pracy grupowej, albo nawet jako zabezpieczenie dla własnych pomyłek, niezastąpiony będzie jeden z systemów kontroli wersji. Sublime Text posiada wsparcie dla najpopularniejszych – w tym SVN i Git. Przykładowo, po instalacji pakietu do obsługi Git pojawią nam się takie opcje jak porównywanie wersji, adnotacje czy przeglądarka logów.

Na koniec chciałbym zwrócić uwagę na jeszcze jeden pakiet wart instalacji. To SublimeCodeIntel – zawiera przeportowane z edytora Open Komodo podpowiadanie składni dla głównych języków jak PHP, Python, Ruby. To jeden z “must have” jeśli chcemy wykorzystywać Sublime Text do bardziej zaawansowanego kodowania.

Oczywiście przedstawione powyżej pakiety to zaledwie mały wierchołek góry. Gdyby chcieć wymienić po krótce wszystkie należało by napisać co najmniej małą książkę. Każdy może znaleźć coś dla siebie zarówno gdy jest programistą, jak i edytorem. Taki ogrom możliwości świadczy tylko o sile edytora.

Oprócz pakietów warto prześledzić też bazowe możliwości Sublime Text. Jedną z ciekawszych opcji jest odczyt i zapis plików w dowolnym z dostępnych kodowań. Opcja bardzo przydatna gdy pracujemy z tekstami wielojęzycznymi zarazem nie wykorzystując kodowania Unicode, albo gdy w bazie danych pojawia się problem z “krzakami”. Użyteczne mogą być również makra. Edytor umożliwia zapisanie i wielokrotne odtworzenie zadanej czynności co jest jednym z procesów automatyzacji pracy. Możliwe jest także zaawansowane wyszukiwanie i zamiana tekstu na podstawie wyrażeń regularnych oraz przykładowo przeskok do wybranej linii lub pliku w całym projekcie. Jak zawsze warto przeczytać dokumentację aby poznać lepiej swoje narzędzie pracy. Ja mam nadzieję, że ten krótki tekst przedstawił Sublime Text w nowym świetle, pokazał że czasami dobrze jest dopełnić swoje środowisko programistyczne mniejszym edytorem w którym część czynności jesteśmy w stanie wykonać szybciej. Zapraszam również do komentowania i dzielenia się swoją wiedzą o rozszerzeniach i sztuczkach dostępnych w Sublime Text.

Komentarze

Nie ma jeszcze żadnych komentarzy do wyświetlenia. Może chcesz zostać pierwszą osobą która podzieli się swoją opinią?

Dodaj komentarz

*
Nazwa zostanie wyświetlona wraz z komentarzem. Możesz też utworzyć nowe konto w serwisie, dzięki czemu uzyskasz dodatkową funkcjonalność.
*
Akceptowana jest ograniczona składnia Textile. Wszystkie tagi HTML zostaną usunięte.