Bootstrap tutorial logo

Krótki przewodnik po Sublime Text

autor: Robert

24 czerwca 2013

Jak wspomniałem w poprzednim poście, używam Sublime Text 2 i postaram się pokazać kilka jego opcji które znacząco usprawniają pisanie kodu.

  1. Tworzenie nowego pliku
    Nowy plik tworzymy poprzez skrót klawiszowy CTRL + N lub wybieramy zakładkę File -> New File
  2. Zapisywanie pliku
    Plik zapisujemy poprzez kombinację klawiszy CTRL + S lub wybieramy zakładkę File -> Save
  3. Otwieranie pliku
    Plik otwieramy poprzez kombinację klawiszy CTRL + O lub wybieramy zakładkę File -> Open File.
    Możliwe jest także otwieranie pliku poprzez przeciągnięcie go z eksploratora windows na pasek „kart” w Sublime
  4. Otwieranie folderu
    Gdy nasz projekt posiada więcej plików możemy otworzyć cały folder, robimy to poprzez zakładkę File -> Open Folder
  5. Otwieranie panelu bocznego
    Aby zobaczyć nasz przed chwilą dodany folder należy otworzyć boczny panel. Robimy to kombinacją klawiszy ‚CTRL + K’ + ‚CTRL + B’ lub wybieramy zakładkę View -> Sidebar -> Show Sidebar
  6. Dodawanie folderu do panelu bocznego
    Czasami może się zdarzyć tak, że chcemy mieć dostęp do plików znajdujących się w  kilku folderach a nie uśmiecha się nam zapełniać pasek kart albo otwierać je ciągle jak opisałem w pkt 3. Gdy wybierzemy opcję File -> Open Folder to otworzy się nam nowe okno edytora a przecież nie o to chodzi. Rozwiązaniem jest wybranie opcji Project -> Add Folder To Project

Sublime Text posiada także wiele skrótów klawiszowych które są niesamowicie przydatne:

  • CTRL + D – Znajduje kolejne wystąpienia zaznaczonego tekstu (np. wszystkie span8 w danym rzędzie chcemy zamienić na span4. Zaznaczamy pierwsze wystąpienie span8, klikamy CTRL + D aż dojdziemy do końca rzędu a następnie wpisujemy span4. Funkcja ta umożliwia także dopisanie czegoś przed lub za przykładowym span8)
  • ALT + SHIFT + W – Umożliwia otoczenie jednego znacznika HTML innym (np. posiadamy obrazek <img src=”…” /> chcemy z niego zrobić linka <a href =”#”><img src=”…” /></a>. Zamiast przesuwać kursor do początku znacznika a następnie do końca tylko go zaznaczamy i wciskamy w/w kombinację klawiszy. Pojawi się nam nowy znacznik otaczający zaznaczony.
  • ‚znacznik HTML’ + TAB – Otwiera i zamyka wybrany znacznik HTML (np. p + TAB = <p></p>, img + TAB = <img src=””>, div + TAB = <div></div> itd.)
  • ‚znacznik HTML’ . ‚klasa’ + TAB – Podobnie jak powyżej ale w znaczniku jest dodatkowo zawarta klasa (np. div.span8 + TAB = <div class=”span8″</div>, a.btn + TAB = <a class=”btn”></a>)
  • CTRL + / – Otacza zaznaczony tekst komentarzem (bardzo często chcemy otoczyć jakiś blok kodu komentarzem, wystarczy go zaznaczyć i wcisnąć opisaną kombinację klawiszy, edytor sam zadba o zastosowanie odpowiedniego rodzaju komentarza)
  • lorem + TAB – wyświetla tekst Lorem Ipsum… zwykle przydatny gdy chcemy wypełniać paragrafy tekstem

Postaram się dodawać kolejne skróty gdy tylko będę ich używać, zapraszam także do podawania swoich typów  w komentarzach.


Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (7 głosów, średnia: 3,57 na 5)
Loading...

Komentarze: 11 komentarzy

Artur 11 czerwca 2014 o 11:09

Nawiązując do komentarza z poprzedniego artykułu, powiem, że odkąd przesiadłem się na ST (aktualnie v3) w zasadzie już nic innego nie używam, no może poza kED’em, bo w ST akurat do kodowania html nie wszystko jest wygodne nawet po zainstalowaniu pluginu Emmet.

Do listy skrótów, których często używam dodałbym jeszcze:

Ctrl+P lub Ctrl+G – wyświetla okno wyszukiwania nazwy pliku we wszystkich otwartych folderach i plikach
Ctrl+Shift+Strzałka góra/dół – zamienia miejscami 2 linie (świetna jak dla mnie sprawa!)
Ctrl + ` – otwiera nam się okno konsoli
Ctrl+Shift+P – otwiera nam się okienko Command Palette z listą komend i gdzie można uruchomić instalator pluginów
Ctrl + LPM – klikając w różnych miejscach, wstawiamy kursor i możemy teraz pisać w kilku miejscach jednocześnie

http://tmtheme-editor.herokuapp.com/#/theme/Monokai – na koniec polecam Theme edytor, gdzie można sobie dostosować kolorystykę pod własny gust. Niestety, działa na razie tylko i wyłącznie pod Chrome, ale raczej nie jest to przeszkodą.

Odpowiedz
Łukasz 7 lipca 2014 o 17:06

Ja polecam aptan studio 3, jest darmowy. Można zainstalować pod Windows , Linux i Mac.

Odpowiedz
    Robert 8 lipca 2014 o 07:44

    Jest wiele edytorów, każdy musi znaleźć taki, który mu najbardziej odpowiada:)

    Odpowiedz
Andrzej 15 lipca 2014 o 13:17

Mam pytanie, jaki jest skrót klawiszowy do posprzątania kodu? Tzn. do zrobienia odpowiednich wycięć, poprawienia czytelności.

Odpowiedz
    Robert 21 sierpnia 2014 o 15:59

    Można to zrobić tak:
    CTRL + a
    A następnie Edit -> Line -> Reindent

    Odpowiedz
Jacek 5 września 2014 o 18:21

A co z FTP?

Odpowiedz
    Robert 8 września 2014 o 10:37

    Czy możesz rozwinąć pytanie?

    Odpowiedz
      Konrad 25 listopada 2014 o 23:51

      czy można w SublimeText jak np w notepad++ łączyć się bezpośrednio z serwerem i zapisywać już na serwerze?

      Odpowiedz
        Robert 26 listopada 2014 o 09:02

        Sublime Text jest potężnym edytorem, do którego istnieje wiele pluginów rozszerzających jego funkcjonalności. Co do łączenia z FTP istnieje wtyczka -> http://wbond.net/sublime_packages/sftp wersja darmowa w zupełności wystarcza:)

        Odpowiedz
Łukasz 9 stycznia 2016 o 23:14

Witam,

mam pytanie. Czy trzeba wykupić licencje żeby korzystać z Sublime Text 3, Jaki jest koszt na zł ?

Pozdrawiam

Odpowiedz
    Robert 11 stycznia 2016 o 07:57

    Z Sublime Text można korzystać bez limitów. Ale gdy dojdziesz do wniosku, że dzięki temu edytorowi zarabiasz już pieniądze to dobrze było by zapłacić twórcom za ich pracę:)
    Koszt to 70$ czyli jakieś 280zł i jest to licencja na użytkownika więc możesz wtedy instalować ST na wszystkich twoich komputerach.

    Odpowiedz