Każdy deweloper stara się dostosować swoje środowisko pracy czyniąc je wydajniejszym, szybszym i skrojonym na miarę potrzeb przy konkretnym projekcie. Jak pewnie większość osób zajmujących się front-end development’em polegam na Sublime Text. Sublime Text to rozbudowany i wysoce konfigurowalny edytor tekstu i to właśnie on jest moim głównym narzędziem pracy.

Sublime Text to bardzo surowy jeśli chodzi o wygląd a jednocześnie wyrafinowany edytor kodu. Podczas pracy wypróbowałem dziesiątki narzędzi, zaczynając od bardzo popularnego IDE Coda, 1 przez Espresso i wiele, wiele innych ale to dopiero Sublime Text sprawił, że już przy pierwszym uruchomieniu wiedziałem, że to narzędzie dla mnie. À propos pierwszego uruchomienia to może ono wprawić w zakłopotanie, bynamniej nie chodzi o problemy z instalacją a o główne okno aplikacji. Dla osób przyzwyczajonych do rozbudowanych IDE, pokroju Eclipse, Visual Studio czy wspomnianej Cody; Sublime Text może wydawać się surowy i zupełnie niepasujące do edytorów kodu a bardziej do minimalistycznego edytora tekstowego. To wyjątkowo złudne wrażenie i już po kilku minutach z Sublime Text byłem przekonany, że to napotężniejszy edytor kodu z jakim miałem styczność.

Dlaczego Sublime Text?

Sublime Text dostępny na większość popularnych systemów operacyjnych: OS X, Windows oraz Linux’a. Co więcej, posiadając jedną licencję autorzy pozwalają używać edytora na wszystkich dostępnych systemach i na dowolnej ilości maszyn bo licencja raczej związana jest z użytkownikiem niż z instancją aplikacji. To, co jako pierwsze rzuca się w oczy przy używaniu Sublime Text to jego szybkość – wszystkie pliki otwierają się błyskawicznie, nawet gigantyczne zrzuty baz SQL czy projekty liczące sobie tysiące plików. Co więcej Sublime Text można używać za darmo2. Jak możemy przeczytać na oficjalnej witrynie Sublime Text website:

Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use.

W skrócie, jeśli zaczynasz przygodę z tym edytorem możesz pobrać go zupełnie bezpłatnie ze strony producenta.

Swobodny sposób licencjonowanie, niewysoka cena i szybkość działania to dopiero początek zalet Sublime Text. Niewątpliwą zaletą są to wszelkiego rodzaju rozszerzenia dzięki, którym możemy ten edytor dostosować do naszych potrzeb, przyzwyczajeń czy typu pracy jaki wykonujemy. Oczywiście nie jest tak, że Sublime Text sam w sobie nie zapewnia nic – wręcz przeciwnie. Mnogość opcji może przytłoczy a tutaj wspomnę tylko kilku z nich. Goto anything pozwala na z przełączenie się z okienka terminala edytora do dowolnego pliku bez potrzebny przeklikiwania się przez drzewko katalogów. Multiple selection czy Split editing są niezastąpione przy zmianach wielu fraz oraz moja ulubiona opcja, czyli Find in files 3, która pozwala znaleźć dowolną frazę (lub dopasować do wyrażenia regularnego) i zamienić na inną w wielu plikach jednocześnie 4.

Zanim zaczniemy…

Zanim przejdziemy do samych rozszerzeń warto byłoby wiedzieć jak je zainstalować. Doświadczeni użytkownicy Sublime Text ten fragment mogą pominąc. Istnieje wiele metod instalacji danego rozszerzenia w Sublime Text ale najprostszą metodą jest skorzystanie z dodatku o nazwie Package Control, który pozwala przeszukiwać ogólnodostępne repozytorium i instalować rozszerzenia jednym kliknięciem. Instalacja Package Manager’a 5 jest bardzo prosta. W tym celu uruchamiamy edytor, wybieramy z menu opcję View > Show Console i wklejamy tekst z linka powyżej w pole konsoli kończąc cały proces enterem. To wszystko. Aby sprawdzić efekty najłatwiej skorzystać jest ze skrótu klawiszowego CMD/⌘ + Shift + P i wpisać w pole tesktowe Package Control:Install package – jeśli taka opcja istnieje to wybranie jej pozwoli nam już cieszyć się dostępem do repozytorium z rozszerzeniami. Jeśli wszystko wygląda jak na grafice poniżej oznacza to, że możemy zaczynać przygodę z rozszerzaniem funkcjonalności Sublime Text.

Sublime Text Package Manager

Lista poniżej zawiera rozszerzenia z różnych kategorii często zupełnie ze sobą niepowiązanych. Niektóre mogą okazać się przydatne dla front-end’owców, inne dla osób zajmujących się back-end’em. Kolejność jest zupełnie przypadkowa a pluginy przedstawione w tym artykule to jedynie fragment tego co wykorzystuję przy codziennej pracy.

Color Highlighter

Sublime Text Color Highlighter

Standardowo Sublime Text jak i większość edytorów nie zapewnia żadnego specjalnego wsparcia dla kolorów w plikach CSS. Dzięki temu małemu rozszerzeniu każdy kolor użyty przy tworzeniu styli będzie rozpoznany i zaznaczony poprzez odpowiadającą mu wartość. Domyślnie, każda forma zapisu kolor w CSS posiada podkreślenie odpowiednim kolorem a po kliknięciu w wartość zobaczymy cały tekst na odpowiednim tle. Jest to rozwiązanie optymalne – podkreślenia są na tyle subtelne, że nie przeszkadzają w pracy a pełny podgląda dostajemy edytując wartość. Dodatkowo Color Highlighter dodaje do Sublime Text mały próbnik kolorów i zapewnia wsparcie dla zmiennych LESS oraz SASS. Color Highlighter dostępny jest także na repozytorium GitHub’a oraz poprzez Package Manager. Aby dodać to rozszerzenie do edytora wystarczy jedynie wybrać Ctrl/⌘+SHFT+P 6 następnie znaną już opcję Package Control: Install Package, wyszukać Color Highlighter i wcisnąć Enter.

Sublime GitHub (Gists)

Must-have dla wszystkich korzystających z GitHub’a i lubiących przechowywać swoje fragmenty kodu używając Gits. Gists to nic innego jak schowek gdzie możemy zapisać kawałek kodu a w połączeniu z możliwościami GiHub’a każdy taki fragment staje się repozytorium ze wszystkimi jego zaletami czyli wersjonowaniem, dostępem publicznym lub prywatnym i możliwością stworzenia swojego fragmentu na bazie istniejącego (fork). Rozszerzenie pozwala na stworzenie Gist’a bezpośrednio z edytora zaznaczając jedynie fragment kodu, który chcemy wykorzystać. Plugin jest także bardzo przydatny także jeśli chodzi o nasze repozytoria (historia, zmiany itp). Instalacja jest dziecinnie prosta dzięki Package Manager’owi. Ctrl/⌘+SHFT+P 7, dalej wybieramy Package Control: Install Package i wyszukujemy sublime-github.

Emmet

Tego rozszerzenie chyba nie trzeba przedstawiać bo nie wyobrażam sobie aby jakiś Web Developer go nie znał. Emmet występujący wcześniej pod nazwą Zen-coding jest najlepszym narzędziem pozwalających zaoszczędzić czas gdy pracuje się z plikami CSS czy kodem HTML. Emmet zapewnia ogromną ilość skrótów, które znacznie wpływają na ilość poświęconego czasu przy pracy nad CSS/HTML. Dla przykładu wpisanie gdziekolwiek w dokumencie HTML kodu:

ul>li*5

i rozwinięcie tego skrótu dzięki klawiszowi Tab lub kombinacji CTRL/⌘ + E sprawi, że Emmet zamieni to na:

To tylko mały przykład bo możliwości wykorzystania jest o wiele więcej. Emmet pozwala tworzyć tzw. vendor prefixes jeśli tylko poprzedzimy skrót myślnikiem, lub po prostu sprawić, że nigdy więcej nie napiszemy pełnej nazwy właściwości CSS bo rozwinięcia skrótów tak przypadną nam do gustu. Pełna lista funkcji, podana w przystępny sposób dostępna jest na Emmet Cheat Sheet. Plugin ma jeszcze jedną ogromną zaletę – w połączeniu z Sublime Text i jego zdolnością do edycji wielu linii jednocześnie mamy możliwość umieszczania tam skrótów Emmet’a i ten mix staje się małym szwajcarskim scyzorykiem jeśli idzie o front-end development.

Aby zainstlować Emmet’a postępujemy tak jak w poprzednich przypadkach wyszukując rozszerzenia o nazwie Emmet.

Sublime​Linter-phplint

PHPLint jak sama nazwa wskazuje to Linter; czyli narzędzie pozwalające znaleźć błędy w kodzie zanim zostanie on uruchomiony. Może to brzmieć dziwnie ale jest to wyjątkowo przydatne narzędzie. Wyobraźmy sobie sytuację, że naszym kodzie PHP, który piszemy lokalnie a uruchamiany jest na serwerze występuje błąd bo np. brakuje znak średnika. Normalnie, błąd ujrzelibyśmy dopiero przełączając się do okna przeglądarki widząc jedną z informacji od parsera PHP typu Notice, Error lub po prostu White screen of death.

Dzięki PHPLint takie błędy możemy wychwycić już w oknie edytora. Rozszerzenie może pracować w dwóch trybach: dynamicznym i uruchamianym przy zapisie pliku. Ten drugi wydaje się o wiele praktyczniejszy i pozwoli na przeparsowanie kodu PHP w naszym edytorze przy zapisie wychwytując przy tym wszystkie znalezione błędy i zaznaczając linie, które wymagają naszej interwencji. Pozwala to zaoszczędzić parę sekund przy każdym przełączaniu na linii edytor – przeglądarka.

Instalacja rozszerzenia jest wymaga dodatkowego kroku poza użyciem Package Manager’a. Oczywiście standardowo wyszukujemy rozszerzenie o nazwie phplint i instalujemy ale to nie wszystko. Wymagane jest także zainstalowanie phplint co najlepiej jest uczynić za pomocą brew. Dokładny proces instalacji opisany jest na oficjalnej stronie rozszerzenia.

Sublime​Linter-jshint

Znajoma nazwa i identyczny sposób działania jak w rozszerzeniu powyżej z tą różnicą, że to rozszerzenie sprawdzi jakość naszego kodu JavaScript. Narzędzie JSHint pozwoli wykryć potencjalne błędy w naszym kodzie ale również „zmusi” do stosowania poprawnych konwencji zapisu kodu. Dzięki niemu kod sprawdzany jest bezpośrednio w edytorze. Identycznie jak w przypadku PHPLint, JSHint wymaga dodatkowego kroku przy instalacji i zaisntalowania narzędzia w naszym system co z kolei najłatwiej jest zrobić za pomocą npm 8. Dokładny proces instalacji dostępny jest na repozytorium rozszerzenia.

DocBlockr

DocBlockr Sublime Text extension

DocBlockr poza nazwą w konwencji, która nie bardzo przypadła mi do gustu jest całkiem przydatnym rozszerzeniem i sprawia, że tworzenie dokumentacji jest o wiele wygodniejsze. Jeśli używasz jednego z wspieranych języków, czyli PHP lub JavaScript to DocBlockr pozwoli Ci na wygenerowanie komentarzy do funkcji czy klas prosty i szybki sposób. Po wpisania /** tuż przed nazwą funkcji lub na początku klasy i naciśnięciu klawisza Tab lub Enter DocBlockr wygeneruje blok komentarza dla danego fragmentu kodu. Rozszerzenie jest o tyle „inteligentne”, że potrafi wykryć ilość parametrów funkcji i zwracaną funkcję, co ogranicza nasz nakład pracy do minimum. Pełna lista funkcjonalności opisana jest na oficjalnym repozytorium. Tym razem instalacja jest prosta i nie wymaga dodatkowych kroków, wystarczy jedynie otworzyć Package Manager’a Ctrl/⌘+SHFT+P (Tools > Command Pallete) i wybrać opcję *Package Control: Install Package a następnie wyszukać plugin o nazwie DocBlockr.

Więcej?

Krótka lista powyżej to tylko wstęp jeśli chodzi o rozszerzenia dla Sublime Text. W miarę możliwości postaram się rozbudowywać listę o napotkanie przeze mnie ciekawe pluginy i skórki.


  1. gorąco polecam od tego dewelpera klienta FTP o nazwie Transmit

  2. zachęcam przy tym gorąco do zakupu

  3. ⌘+⇧+F

  4. Taki odpowiedni komendy MARKDOWN_HASH4a037fbac753c858472c616f6ec6d498MARKDOWN_HASH

  5. jakkolwiek dziwnie to brzmi to faktycznie instalujemy w Sublime instalator, który pozwoli nam instalować kolejne rozszerzenia

  6. Tools > Command Palette

  7. Tools > Command Palette

  8. node package manager

Category
Back to top