Sublime text

W jednym z poprzednich wpisów wspomniałem na temat świetnego edytora Sublime Text.
Dzisiaj przyjrzymy się mu nieco uważniej.


Już w standardowej wersji program oferuje ciekawe rozwiązania. Przykładem może być ten filmik: http://www.kingluddite.com/wp-content/uploads/2012/04/multi_cursor_st2.swf

Aby program ten jeszcze bardziej spełniał nasze oczekiwania, zainstalujemy kilka dodatków.

Pierwszym i najważniejszym dodatkiem jest „Packages Control”, który umożliwia zarządzanie, przeglądanie, ustawianie i instalowanie innych dodatków :)
Aby go zainstalować, wchodzimy na stronę http://wbond.net/sublime_packages/package_control/installation, wybieramy odpowiednią wersję programu, kopiujemy tekst z szarej ramki, wklejamy go do konsoli w naszym edytorze (odpalamy ją klawiszami Ctrl + `) i naciskamy enter. Zainstalowane :) Teraz wystarczy zrestartować program i już mamy dostęp do zarządzania pluginami.
Robimy to wybierając z menu Preferences > Package Control, lub naciskamy Ctrl + Shift + P (co odpala menu „Command Palete”) wpisujemy kilka pierwszych liter „Package Control”.
Teraz wybieramy „Discover Packages” by przejrzeć i poczytać o dodatkach, lub install packages, by je zainstalować. Wystarczy wybrać interesujący nas dodatek, nacisnąć enter i już jest zainstalowane (bez resetowania programu!) :)

Dodatki, które warto mieć

  • Emmet – po prostu Zen Coding. Bardzo dobra implementacja tego sposobu pisania kodu
  • Alignment – wyrównywanie kodu
  • AutoFileName – podpowiadanie ścieżek do plików. Nie działa tak pięknie jak w PhpStorm, ale i tak pomaga
  • Nettuts+ Fetch – ściąganie najnowszych wersji bibliotek/projektów z internetu (np. BoilerPlate czy jQuery)
  • SidebarEnhancement– dodaje dodatkowe opcje do bocznej belki w edytorze
Uwagi odnośnie dodatków:
  • po zainstalowaniu Emmeta wchodzimy w Preferences>ZenCoding>Settings>You can finds… i ustawiamy „alt_gr” na true, co umożliwi nam pisanie literki „ń”. Konsolę Emmeta odpalamy klawiszami Ctrl+Alt+Enter (w pliku z kodem html, php itp)
  • po zainstalowaniu Alignment wchodzimy w Preferences>Package Settings>Alignment>Default Settings. Zmieniamy tutaj klawisze na jakieś inne (np Ctrl + Shift + =, co umożliwi nam pisanie literki „ą”
  • po zainstalowaniu „AutoFileName” wchodzimy w Preferences>Package Settings>AutoFileName>Settings Default i ustawiamy opcję „auto_file_name_use_project_root” na true. Dzięki temu ścieżki absolutne będą odnosić się do projektu, a nie dysku.
  • jeżeli robisz częste byki jak ja, wtedy może cię zainteresować dodatek Dictionary. Ściągnij go z https://github.com/SublimeText/Dictionaries/downloads. Następnie wchodzisz w Preferences>Browse Packages i tworzysz katalog „Language – Polish” do którego przegrywasz polskie słowniki. Wystarczy teraz w View->Dictionary wybrać nasz słownik po czym włączyć sprawdzanie pisowni klawiszem F6

Ustawienia programu itp

Poza dodatkami warto zainteresować się ustawieniami samego programu. Wchodzimy więc w Preferences>Settings-Default i dostajemy naprawdę sporo ustawień do zmiany. Myślę, że większość jest tak dobrze opisana, że nie ma sensu tutaj powtarzać tego opisu. Z pewnością od razu rzuci się wam w oczy możliwość zmiany kroju i wielkości czcionki. Chociaż to drugie spokojnie zrobimy naciskając Ctrl + +/-

Podobnie możemy ustawiać nasze motywy lub te, które ściągnęliśmy jako dodatki. Wchodzimy do Preferences>Browse Packages i wśród katalogów wyszukujemy Color Scheme – Default. Pewnie połowę z tych themów usuniemy :) Pliki z rozszerzeniem tmTheme zawierają czytelny opis poszczególnych składników kodu. Bardzo miła sprawa.

Dodatkowe materiały

Dodatkowych informacji o tym edytorze jest w necie tysiące. Warto w szczególności przejrzeć stronę http://net.tutsplus.com/tutorials/tools-and-tips/sublime-text-2-tips-and-tricks/ oraz http://www.kingluddite.com/st2/sublime-text-2-kick-start. Na tej drugiej przejrzyjcie linki, które znajdują się na jej końcu. Filmiki tam zawarte pokazują moc używania kilku kursorów, czy kodowania za pomocą ZenCoding. Jest moc!
W nowych wersjach ZenCoding został zastąpiony Emmetem

Tworzymy snippety

Snippety to kawałki kodu, które bardzo przyśpieszają pracę z kodem. Tworzymy sobie kilka szablonów, ustawiamy im klawisze i włala – rakieta zostaje poskromiona. W późmniejszej pracy wystarczy wpisać ustawione słowo kluczowe, wcisnąć klawisz TAB i w miejsce kursora wstawi się nam kod snippetu, który stworzyliśmy.

Aby stworzyć nowy snippet, klikamy Tools > New Snipped. Pojawi nam się nowy plik z kodem:

<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
     <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
     <!-- <tabTrigger>hello</tabTrigger> -->
     <!-- Optional: Set a scope to limit where the snippet will trigger -->
     <!-- <scope>source.python</scope> -->
</snippet>

Na samej górze jest treść kodu, który zostanie wstawiony. Musi się ona znajdować między znacznikami <![CDATA[ … ]]>. W jej wnętrzu znajdują się 2 zmienne $1 i $2, które wskazują miejsca po których będziemy się przemieszczać za pomocą Tab i Shift + Tab. W przykładzie zmienne te występują wraz z klamrami, dzięki czemu możemy podać ich domyślne wartości (w przykładzie jest to słowo this i snipped). Gdybyśmy teraz nasz snipped zapisali, wówczas po wpisaniu „hello” w naciśnięciu klawisza Tab do naszego kodu zostało by wstawione zdanie „Hello, this is a snipped”, w którym moglibyśmy za pomocą taba przemieszczać się po 2 zmiennych.

Każda zmienna w snippecie może występować wiele razy:

<content><![CDATA[
<img src="http://placehold.it/${1:100}x${2:100}" width="$1" height="$2" alt="$3" />
]]></content>

Wpisując wartość w pierwsze wystąpienie zmiennej, wpisujemy ją w pozostałe miejsca, gdzie ta zmienna występuje. Możemy to tak jak w powyższym przykładzie wykorzystać do generowania atrybutów obrazków itp.

Jeżeli w naszym kodzie chcemy wykorzystać znak $, musimy go wtedy poprzedzić ukośnikiem \$ :

<content><![CDATA[
for (\$${1:i}=0; \$$1<${2:10}; \$$1++) {
     $0
}
]]></content>

W powyższym przykładzie stworzyliśmy snipped wstawiający nam PHPowa pętlę for. Zmienna $0 określa położenie kursora po zakończeniu wstawiania snippedu do kodu.

Domyślny kod snippedu pokazuje nam także dodatkowe atrybuty, z którym możemy korzystać:

<!-- <tabTrigger>hello</tabTrigger> -->
     <!-- Optional: Set a scope to limit where the snippet will trigger -->
     <!-- <scope>source.python</scope> -->
  • <tabTrigger> – to tekst/słowo kluczowe po wpisaniu którego, naciśnięcie Tab odpali nam nasz snipped – np wpisanie słowa div i naciśnięcie tab powoduje odpalenie snippedu wpisującego tekst <div>$0</div>
  • <scope> – czyli w jakich językach dany snipped ma działać. Dzięki temu możemy np stworzyć snippedy komentarzy dla CSS i HTML odpalane tą samą komendą. Dla plików w których znajduje się PHP i HTML scope to text.html, w pozostałych łatwo się domyślić (np source.php, source.css). Wszystkie są wylistowane na stronie https://gist.github.com/iambibhas/4705378
  • <description> – nie podawany w domyślnym szablonie atrybut definiuje opis jaki będzie widniał w „command menu” (odpalanym za pomocą Ctrl + Shift + P). Nie każdy nasz snipped musi być wywoływany przez klawisz Tab. Te rzadziej wykorzystywane lepiej mieć w command menu :)

Tak naprawdę powyżej przedstawiłem wam tylko podstawy budowania snippedów. W praktyce jednak wystarczają one do większości zastosować. Jeżeli chcesz pogłębić swoją wiedzę na ten temat, zapraszam cię do dokumentacji Sublime Text

Tutaj możesz sobie ściągnąć paczkę kilku snippetów, które stworzyłem.

Naprawiamy submlime text

Co to w ogóle za temat się zapytasz. Z pluginami do ST2 jest tak samo jak z plugianmi do Firefoxa. Im więcej ich zainstalujesz, tym masz większą szansę, że twój program będzie mniej stabilny. Z ST2 jest identycznie. Osobiście spotkałem się z tym, że po zainstalowaniu kilku pluginów zapisywanie plików CSS stało się baaardzo długie. Wydaje mi się, że to plugin DetectSyntax powodował ten błąd, ale głowy za to nie dam. W każdym bądź razie naprawa takich problemów jest dziecinne prosta. Według instrukcji ze strony: http://www.sublimetext.com/docs/2/revert.html wchodzimy do katalogu:

  • OS X: ~/Library/Application Support/Sublime Text 2
  • Windows: %APPDATA%\Sublime Text 2
  • Linux: ~/.config/sublime-text-2

I usuwamy powyższy katalog. Spowoduje to przywrócenie ST do stanu początkowego, więc kolejnym krokiem będzie zainstalowanie Package Control i zabawy z pluginami (oczywiście w mniejszej ilości). W moim przypadku zadziałało wyśmienicie i wspomniany plugin powędrował do kosza.

Komentarze

  • Też go używam. Jest świetny i wszystko można sobie w nim ustawić. Polecam wszystkim.

  • kornell
  • Mi Nos

    Czy jest mozliwe budowanie strony html z sekcji zawierajacych wybrane dane w dodatkowych plikach? Np mam w 10 plikach menu chce zmienic je w jednym pliku ale aby we wszystkich pozostalych pojawila sie zmiana. Kiedys Dreamweaver oferowal taka mozliwosc.

    • Jeżeli chcesz takie coś to zainteresuj się albo jakimś kompilowanym językiem np Jade, albo po prostu użyj Php include (chyba najłatwiejsza i najlepsza opcja).
      Na siłę bez tych języków możesz generować kod w JS i całe menu tak generować, ale to opcja na siłę. Ogólnie więc – php include.

      • Mi Nos

        W sumie racja, lepiej pozostać przy prostym PHP