Tutorial i szybka ściąga dla Sublime 3

Sublime 3 jest niesamowitym narzędziem programistycznym. Czyste, funkcjonalne i bardzo szybkie IDE. Edytor kodu o potężnych możliwościach, który przy pierwszym uruchomieniu niczym się nie wyróżnia. Prawdziwe możliwości drzemią głębiej. Trzeba się postarać, aby je odkryć. Dziś przychodzę z pomocą. Małą ściągą. Dzięki temu proces poznawania narzędzia stanie się dużo łatwiejszy i przyjemniejszy.

Otwórz, zapisz i poruszaj się

Niby banał, a jednak o tym wspominam.

Dla Windows zamiast cmd, używasz ctrl.

Otwarcie folderu / pliku

cmd + o

Najlepiej ogranicz się do wyboru folderu. Wtedy po lewej stronie będzie dostępny wygodny panel nawigacyjny ze strukturą całego folderu.

cmd + s  //Zapisanie konkretnego pliku

cmd + alt + s  //Zapisanie wszystkich plików

cmd + p  //Szybkie poruszanie się po plikach projektu

Switch File Sublime

Paleta komend

cmd + shift + p

Daje możliwość bardzo szybkiego wywoływania komend bez pamiętania konkretnych skrótów. Wystarczy znać fragment nazwy komendy.

Wybór metod i symboli

cmd + r

Docenia się przy dużych plikach. Ułatwia poruszanie się.

Pełna lista skrótów klawiaturowych znajduje się na końcu artykułu.

Projekty

Ułatwiają pracę. Projekt może zupełnie inaczej wyglądać od rzeczywistej struktury folderów. Zaś to ułatwia życie przy codziennej pracy. Przykład? Podpowiadanie wyboru plików. Można wykluczyć w zupełności te foldery z bibliotekami, których nie mamy zamiaru edytować.
Aby zapisać własny projekt wystarczy z palety komend ( cmd + shift + p) wybrać „Project: Save as”.
Projekty SublimeOtwarcie projektu

cmd + alt + p

Dodatki do Sublime

Bez poniższych featerów Sublime nie miałby u mnie szans. To właśnie w tym drzemie siła tego programu.

Package Control

Instalator, dzięki któremu można zainstalować dowolne, inne dodatki do Sublime. Szkoda, że nie jest wbudowany. Należy zainstalować zgodnie z instrukcją podaną na stronie Package Control. Czyli wywołanie konsoli (cmd + `), a następnie wklejenie specjalnego kodu ze strony.

W celu użycia wystarczy wywołać paletę komend (cmd + shift + p), a następnie wpisać „Install”
Sublime Package Control
Zaś teraz można zabrać się do instalacji najlepszych dodaktów. Jest ich mnóstwo! Można przekopać pół sieci w celu znalezienia tych najbardziej polecanych i lubianych. Wypiszę tutaj te najpotrzebniejsze.

1. Emmet

Kto zna, ten rozumie dlaczego polecam. Kto nie zna, ten musi poznać.
Pisanie kodu html przy pomocy jednej linijki kodu. Zen Coding!
Aby użyć:

cmd + alt + enter

div.adku>ul>li>*3>a

divAdku

2. Tags

Usprawnia formatowanie tekstu przede wszystkim.

cmd + a // Zaznacz wszystko
cmd + alt + f 

3. SideBar Enhancements

Dodaje bardzo wiele opcji, gdy klikniemy prawym przyciskiem myszy w panelu bocznym.

4. Bracket Highlighter

Usprawnienia dla podświetlenia nawiasów, cudzysłowów. Sprawia, że Sublime zdecydowanie wyróżnia się na tle innych IDE.

5. Live Reload

Wystarczy zapisać plik, a otwarta strona w przeglądarce od razu się odświeża. Wręcz obowiązek, żeby z tego korzystać. 🙂

6. File Diffs

Porównywanie plików. Można porównywać z plikiem w projekcie, ze schowkiem oraz z otwartą kartą. Aby użyć w palecie komend wpisz „diff”, a następnie wybierz FileMenu:Diff.

7. Colorpicker

Podręczny przybornik kolorów. W Windowsie jest bardzo brzydki, za to na Macu świetny.

cmd + shift + c

8. Git & GitGutter

Git pozwala na korzystanie w Sublime z komend takich jak commit, push, pull, branch, init itd.
GitGutter pokazuje co zostało dodane i zmienione w porównaniu do ostatniego commita.

9. Snippety

Czyli gotowe fragmenty kodów. Chociażby szablon startowego pliku html. Jest już wiele wbudowanych, a dodatkowo można zainstalować kolejne.

Szablony

Startowy wygląd nie wszystkim musi się podobać. Z łatwością można go zmienić. Zainstalować sobie inny theme.
Do wyboru jest bardzo wiele. Oto dwa najpopularniejsze i te ponoć najbardziej lubiane.

Soda Light

soda

Flatland

flatland

Skróty klawiaturowe dla Sublime 3

ctrl + `	        // Konsola
ctrl + shift + p	// Paleta komend
ctrl + /	        // Komentarz
ctrl + shift + /	// Blokowy komentarz

ctrl + d         	// Zaznaczenie słowa
ctrl + f                // Wyszukanie frazy
alt + enter             // Zaznacza wszystkie frazy, zacznij pisać, aby podmienić wszystkie jednocześnie.

// Idź:
ctrl + r	        // do metody, symbolu
ctrl + p	        // do pliku
ctrl + g	        // do numeru linii

// Linie:
ctrl + l	        // zaznaczenie linii
ctrl + shift + k        // usunięcie linii
ctrl + ]	        // tab w prawo
ctrl + [	        // tab w lewo 
ctrl + enter	        // dodaje nową linie po
ctrl + shift + enter	// dodaje nową linie przed
ctrl + shift + d	// duplikowanie linii
ctrl + j	        // łączyu linie         

To już wszystko! Być może Ty również będziesz kolejną osobą, która polubi te proste, ale bardzo użyteczne IDE. Zaś jeśli masz jakieś inne jeszcze swoje ulubione dodatki, to napisz. Z chęcią się o nich dowiem.

You may also like...

  • Adam

    Dzieki za wpis 😉 W sumie znałem i korzystałem tylko z zen-coding, a tak na prawde wszystkiego mi brakowało.

  • Cieszę się, czyli wpis jest przydatny. 🙂
    Zaś jest wiele alternatyw, wielkich kombajnów. Chociażby Adobe Dreamweaver albo JetBrains Webstorm. Problem tylko w tym, że przy szybkich pracach przy front-endzie się nie sprawdzają.
    Jakbyś odkrył jakiś fajny dodatek, to daj znać.

  • Od jakiegoś czasu obserwuje ten blog z racji podobieństwa domeny. Musze przyznać że jest to pierwszy konkretny artykuł który przeczytałem z przyjemnością na tej stronie. Proszę o więcej takich!

    • adku

      Dzięki za miłe słowa! Jestem pozytywnie zaskoczony podobną domeną. Życzę powodzenia w rozwoju własnej strony. 🙂
      Z artykułami cały czas się rozkręcam. Tego typu, duże tutoriale kosztują bardzo dużo pracy. Zupełnie inaczej się je pisze w porównaniu do zwykłych, luźnych wpisów. Jednak takie reakcje, jak Twoja bardzo motywują, żeby się bardziej poświęcać. 😉

  • Damian Wilkołek

    a powiedz Ty mnie jak wygląda wsparcie pod PHP?
    i co z Javą? wszystko musze ręcznie z palca klepać czy moge wygenerować conieco?

    • adku

      Nie programuję w Javie & PHP, więc na swoim przykładzie nie pomogę. Linkuję do zewnętrznych materiałów.
      Odnośnie PHP: http://wasil.org/sublime-text-3-perfect-php-development-set-up
      Zaś Java to kompletnie inna bajka, inny styl pracy. IMO lepiej korzystać z Eclipse.

      • Damian Wilkołek

        no inna bajka ale eclipse jest ciężki wbrew pozorom… 500mb mają same źródła i eclipse trochę cierpi….

        • adku

          Jest jeszcze NetBeans. Z resztą Eclipse można porównywać do Visual Studio albo Xcode, oba zajmują jeszcze więcej miejsca 😉
          Stąd też takie rozmiary trzeba przyjąć na klatę i tyle.

  • Jeśli chodzi o szablony, to uważam, że spacegray jest również godnym polecenia -> https://github.com/kkga/spacegray
    A poza tym, to się zgadzam – świetny edytor jak się go dobrze pozna :))

  • Wyrównywanie kodu. Prosta rzecz.
    Rozwiązań jest kilka, przedstawiam dwa:
    Wbudowany „Reindent” ( Edit -> Line -> Reindent) + dodanie customowego skrótu klawiaturowego:
    { „keys”: [„ctrl+shift+r”], „command”: „reindent” , „args”: { „single_line”: false } }

    Ewentualnie szybkie i ponoć najlepsze rozwiązanie:
    Plugin: HTML/CSS/JS Prettify i korzystanie z ctrl + shift + h

  • Pingback: Jak zrobić stronę internetową? Darmowa książka. - adku()

  • Borys

    Napisz coś jeszcze o automatycznym uploadzie plików na serwer ftp. bardzo by się przydało.

  • cmd + alt + p – powinno być shift + alt + p

  • Dariusz Hozer

    Jest gdzieś funkcja: zawsze na wierzchu ?