Sublime Text 3 to jeden z najpopularniejszych edytorów tekstu dla programistów. Zapewnia swoim użytkownikom unikalne funkcje, które nie są dostępne nigdzie indziej. Jedną z najważniejszych zalet jest wieloplatformowość i rozszerzalność.

Tutaj możesz skonfigurować wszystko - od wyglądu po komponenty programu (wtyczki). Ale poziom dostosowania w Sublime Text jest odpowiedni - jako edytor dla programistów jest konfigurowany za pomocą kodu źródłowego, co nie każdy może zrobić. W tym artykule przyjrzymy się, jak skonfigurowany jest Sublime Text 3.

W przypadku Sublime Text od pierwszych wersji możliwości były znacznie większe niż w przypadku innych edytorów. Czy to żart - w pełni konfigurowalny interfejs, możliwość dostosowania zachowania programu, a nie tylko wpisywanie tekstu? Co możemy powiedzieć o wtyczkach – kod napisany w Pythonie pozwala użytkownikowi sterować edytorem w taki sam sposób, w jaki poskramiacz węży, grający na magicznej rurze, sprawia, że ​​drży przed nim gigantyczny boa dusiciel. Jednak bardzo przepraszamy, to jest dokładnie to, co przeraża początkujących - nie mogąc skonfigurować edytora, przestają go używać.

Konfiguracja Sublime Text 3

Najpierw porozmawiajmy o wyglądzie, a następnie przejdźmy do konfiguracji skrótów klawiszowych i wtyczek.

1. Wygląd wysublimowanego tekstu

Czas więc zacząć Sublime Text (artykuł instalacyjny -). Wiele osób lubi projekt programu, a innym nie. A teraz masz niepowtarzalną okazję, aby zmienić interfejs nie do poznania!

Najłatwiejszym sposobem jest wybranie motywu w ustawieniach. Aby to zrobić, przejdź do menu „Preferencje” -> „Schemat kolorów” i wybierz żądany motyw. Ale ta metoda zmieni tylko kolory edytora i nic więcej.

Inną, bardziej skomplikowaną, ale pewną opcją jest zajęcie się plikiem ustawień. Aby go otworzyć, przejdź do menu „Preferencje” -> „Ustawienia”. A teraz przed tobą jest tylko większość tekstu. Ale nie wszystko jest takie trudne, jak się wydaje! Po lewej stronie znajdują się ustawienia domyślne, nie musisz ich dotykać. Można je traktować jako przykład. Ale po prawej stronie musisz umieścić swoje ustawienia - weź, skopiuj żądaną linię i zmień jej wartość. Podstawowe ustawienia:

  1. „schemat_kolorów”- motyw kolorystyczny. Możesz wybrać z istniejących lub pobrać do folderu Pakiety / Schemat kolorów - Domyślny /.
  2. "czcionka_twarz"- czcionka tekstu. Ważne, że jest w systemie. Aby zobaczyć listę dostępnych czcionek, otwórz dowolny edytor tekstu, taki jak Libable Office Writer.
  3. "rozmiar czcionki"- rozmiar czcionki, ustawiony jako wartość ułamkowa lub całkowita.
  4. "opcje_czcionek"- dodatkowe opcje czcionek, takie jak „no_bold”, „no_italic”.
  5. "separatory_słów"- separatory słów.
  6. "Numery linii"- ustawienie numeracji linii.
  7. "rynna"- czy wyświetlić "rowek"(zawiera numery linii i zakładki).
  8. "margines"- długość wcięcia od "rowki".
  9. "przyciski_fold"- jeśli najedziesz kursorem "rowek", będą widoczne trójkątne strzałki, które pozwolą ukryć lub pokazać fragment kodu między nawiasami klamrowymi. Tutaj możesz je włączyć lub wyłączyć.
  10. "fade_fold_buttons"- jeśli ustawione na false, to trójkątne przyciski nie będą ukryte.

Oto przykład działania ustawień (nie zapomnij zapisać pliku):

Możesz tutaj sam poeksperymentować. I ruszamy dalej.

2. Dostosuj skróty klawiaturowe

Tak, tak, dobrze słyszałeś! Każdy może dostosować kombinacje na swój własny sposób, przypisując im różne wartości. Aby otworzyć plik, przejdź do „Preferencje” -> „Powiązania klawiszy”.

Znowu mamy dwa pliki, z których jeden to ustawienia domyślne, a drugi to ustawienia osobiste. Aby zmienić kombinację, musisz skopiować jedną lub więcej linii zawartych między nawiasami klamrowymi. Oto przykład mojego pliku:

Oczywiście niczego to nie zmienia (jest to skrót klawiszowy do zamykania dowolnej aplikacji), ale ten plik to tylko przykład.

Cóż, to wszystko, Sublime Text stał się tym, czego potrzebujesz i wiesz, jak skonfigurować Sublime Text 3. A teraz pora przejść dalej - zainstalować wtyczki.

3. Instalacja kontroli pakietów

Jak wspomniano wcześniej, edytor ma możliwość dodawania wtyczek, niezależnie od tego, czy są one własne, czy pobrane ze strony programisty. Jednak mimo wszystko ręczna instalacja wtyczek nie jest zbyt wygodna, dlatego musisz pobrać i zainstalować dodatkowy komponent.

Kontrola pakietów - zaprojektowana z myślą o szybszej i wygodniejszej instalacji wtyczek. Pozwala na zainstalowanie ich za pomocą renderowanego interfejsu, a nie za pomocą kodu.

Najpierw zainstaluj Kontrolę pakietów z oficjalnej strony. Nie oznacza to, że go pobierzemy!

  1. Skopiujmy tekst z odpowiedniego pola tekstowego (w zależności od wersji Sublime Text).
  2. Korzystanie ze skrótu klawiaturowego "Ctrl+~" nazywamy konsolę wbudowaną w edytor (tak, jest coś takiego!).
  3. Wklej skopiowany kod w pole tekstowe i poczekaj na pomyślną instalację.
  4. Restartujemy edytor.

Zainstalowano kontrolę pakietów! Teraz nadszedł czas, aby dowiedzieć się, jak z niego korzystać.

4. Praca z wtyczkami w Kontroli pakietów

Aby uruchomić Kontrolę pakietów, musisz wpisać skrót klawiaturowy "Ctrl+Shift+P" i wybierz z listy element Kontrola pakietów: Zainstaluj pakiet.

A przed nami długo oczekiwana instalacja wtyczek! Teraz można je szybko wyszukiwać i wybierać, a jeśli wybierzesz inne polecenia dla Kontroli pakietów, możesz zarówno usuwać, jak i zmieniać elementy edytora. Teraz musimy poćwiczyć instalację. Ustaw motyw materiału i skonfiguruj motyw wysublimowanego tekstu 3.

  1. Uruchom instalator wtyczki.
  2. Wpisujemy w polu wyszukiwania Motyw materiału.
  3. Naciśnij i poczekaj, poniżej powinien pojawić się napis "Instalowanie pakietu Materiał Temat". Podczas procesu instalacji zostaniesz poproszony o dodanie kolejnej wtyczki, na to pozwalamy.

Aby zastosować motyw, musisz przejść do menu „Preferencje” -> „Schemat kolorów” -> „Motyw materiału” -> „Schematy”, a następnie motyw, który najbardziej Ci się podoba.

To jednak nie wszystko. Mimo zainstalowania motywu jako wtyczki, nie jest on w pełni aktywowany. Aby to naprawić, przejdź do pliku ustawień i dodaj następujący tekst:

"theme": "Material-Theme. Sublime-theme",
"color_scheme": "Pakiety/Material Theme/schemes/Material-Theme.tmTheme",
"overlay_scroll_bars": "włączone",
"line_padding_top": 3,
"line_padding_bottom": 3,
// Na siatkówce Mac
"font_options": [ "szare_antyalias" ],
"always_show_minimap_viewport": prawda,
"bold_folder_labels": prawda,
// Zaznacz aktywne wcięcie
"indent_guide_options": [ "draw_normal", "draw_active" ]

Widok edytora po zastosowaniu do niego motywu:

Nieźle, prawda? Konfiguracja Sublime Text 3 jest prawie ukończona. A teraz nadszedł czas na stworzenie czegoś bardziej merytorycznego. Rzućmy okiem na najpopularniejsze wtyczki do Sublime Text.

Top 5 wtyczek dla Sublime Text 3

1. Emmeta

Emmet to wtyczka, która pozwala na wygodniejsze wyświetlanie kodu. Używane są tutaj skróty klawiaturowe. Na przykład, "html+karta" tworzy ramkę dokumentu i " opakowanie div +karta" zamieni się w pełnoprawny kod:

Ta wtyczka jest zbiorem skrótów fragmentów kodu JavaScript. Długość pisanego tekstu z pomocą podpowiedzi naprawdę się zmniejsza! Na przykład zamiast zestawu "document.querySelector("selektor');" możesz po prostu wpisać "qs+Tab".

Po co szukać miejsca na nowy plik w niewygodnym drzewie katalogów? Ta wtyczka pozwoli Ci szybko i sprawnie wprowadzić niezbędne dane, a plik zostanie utworzony za pomocą kilku naciśnięć klawiszy!

4. Gita

Nazwa tej wtyczki mówi sama za siebie: możesz wykonać wszystkie niezbędne czynności w Git bez wychodzenia z edytora!

Cześć przyjaciele! Zgodnie z powszechnym zapotrzebowaniem zaktualizowano przewodnik szybkiej konfiguracji edytora kodu Wzniosły tekst 3, instalując wtyczki niezbędne do układu i tworząc własne ustawienia wstępne, aby szybko rozpocząć pracę w nowym miejscu pracy.

Fajny

Przypiąć

Zapewne znasz sytuację, kiedy w nowym miejscu pracy musisz szybko zainstalować i skonfigurować Sublime Text do pracy nad nowymi projektami. Z reguły dostrajanie Sublime Text zajmuje dużo czasu, a robienie tego za każdym razem jest niepraktyczne i czasochłonne.

Dzisiaj przyjrzymy się najszybszej konfiguracji Sublime Text, najpopularniejszym wtyczkom wśród projektantów układów i zainstalujemy jeden z najlepszych i najwygodniejszych motywów edytora Jeden motyw ciemnego materiału.

Domyślnie Sublime Text wygląda dość smutno:

Najpierw musisz skonfigurować kontrola pakietu. Aby to zrobić, naciśnij klawisz skrótu Ctrl+Shift+P. W wyskakującym okienku wpisz Install Package Control i wybierz odpowiedni element. Po kilku sekundach zostanie zainstalowany Kontrola pakietów, o czym otrzymasz powiadomienie.


Jeśli jesteś użytkownikiem MacOS, musisz nacisnąć Cmd + Shift + P na klawiaturze.

Kontrola pakietów jest wymagana, aby można było instalować dodatki i wtyczki w Sublime Text 3 z repozytorium pakietów.

Instalowanie wtyczek w Sublime Text

Następnie musisz zainstalować wtyczki potrzebne do pracy. Zastanowimy się nad zainstalowaniem najpopularniejszych wtyczek wśród projektantów layoutów, które znacznie upraszczają programowanie. Możesz także poeksperymentować z innymi wtyczkami w Kontroli Pakietów, być może spodobają Ci się niektóre z wielu dostępnych pakietów.

Aby zainstalować wtyczki w Sublime Text za pomocą Kontroli pakietów, musisz wywołać menu, tak jak to zrobiliśmy wcześniej: Ctrl + Shift + P. Następnie wpisz polecenie „Zainstaluj pakiet” i wybierz żądany pakiet z listy.

Najpopularniejsze wtyczki do Sublime Text:

  • Mrówka- przyspiesza pisanie kodu HTML i CSS do prędkości światła. Lekcja Emmeta ;
  • AutoFileName- uzupełnia kod podczas pisania ścieżek do plików w układzie;
  • sens- Umożliwia Sublime Text korzystanie z usługi fragmentu kodu GitHub Gist. Samouczek o treści;
  • Sass- wtyczka do podświetlania składni Sass w plikach Sass i Scss. Rozszerza Emmeta w plikach Sass.

Instalowanie wysublimowanego wyglądu tekstu

Bardzo podoba mi się motyw Jeden motyw ciemnego materiału i podświetlenie kodu odpowiednią kolorystyką. Są to najbardziej wyważone, wystarczająco kontrastowe, ale niezbyt ostre kolory do wygodnej pracy w edytorze.

Aby zainstalować schemat kolorów One Dark, musimy zainstalować następujące pakiety poprzez Kontrolę pakietów:

  • Jeden ciemny schemat kolorów- schemat kolorów do podświetlania kodu;
  • Jeden ciemny materiał - motyw- Motyw UI Sublime Text.

Ręczna instalacja wtyczki

Niektóre wtyczki nie są już aktualizowane w Kontroli pakietów lub po prostu nie są tam wyświetlane. Niektóre z tych wtyczek są niezbędne podczas pracy z kodem i muszą być instalowane ręcznie.

Jedna z tych wtyczek BuforScroll- niesamowita wtyczka, która po ponownym otwarciu dokumentu ustawia kursor w miejscu, w którym ostatnio zakończyłeś edycję, skracając w ten sposób czas na znalezienie odpowiedniej pozycji do dalszej pracy.

Aby ręcznie zainstalować BufferScroll, przejdź do strony wtyczki GitHub, pobierz ją i rozpakuj w dowolnej dogodnej lokalizacji na dysku. Następnie w Sublime Text wybierz pozycję menu Preferencje > Przeglądaj pakiety. Otworzy się folder danych użytkownika na dysku. Skopiuj folder zawierający pliki przewijania bufora tutaj i uruchom ponownie Sublime Text. Teraz wtyczka działa.

Poprawianie edytora, ustawianie ustawień

Przejdźmy do ustawień Sublime Text.

Przedstawiam mój preset, którego zawsze używam, aby rozpocząć konfigurowanie edytora Sublime Text w nowym miejscu pracy lub po ponownej instalacji systemu. Możesz użyć tego ustawienia w swoim edytorze i dostosować go w razie potrzeby:

Mapa klawiszy (użytkownicy Windows): [ ( "keys": ["alt+shift+f"], "command": "reindent" ), ] Ustawienia: ( "show_definitions": false, "auto_complete": false, "bold_folder_labels" : true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 13, "highlight_line": true, "indent_guide_options": [ "draw_normal", "draw_active" ], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": true, "material_theme_compact_panel": true, "material_theme_small_statusbar": true, "material_theme_small_tab": true, : 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false", )

Predefiniowany kod dla ustawień użytkownika (Preferences.sublime-settings | Preferencje > Ustawienia) - osobno:

( "show_definitions": false, "auto_complete": false, "bold_folder_labels": true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 13 , "highlight_line": true, "indent_guide_options": [ "draw_normal", "draw_active" ], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": true, "material_theme_compact_panel": true , "material_theme_small_statusbar": true, "material_theme_small_tab": true, "tab_size": 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false", )

Predefiniowany kod dla niestandardowych skrótów klawiaturowych (Domyślne (Windows). sublime-keymap | Preferencje > Przypisania klawiszy) - osobno:

[ ( "klawisze": ["alt+shift+f"], "polecenie": "ponownie" ), ]

Teraz przy wyborze i kliknięciu Alt+Shift+F Twój kod zostanie automatycznie dopasowany do odpowiedniej hierarchii zagnieżdżania elementów.

Umieszczając te fragmenty w odpowiednich plikach ustawień, otrzymasz całkowicie gotowy do pracy, dostosowany tekst Sublime lub możesz dostosować edytor dla siebie. W ustawieniach znajdują się dwa pola - lewe z ustawieniami domyślnymi i prawe z ustawieniami użytkownika. W ustawieniach domyślnych możesz zobaczyć wskazówki dla każdej właściwości i zastosować je po prawej stronie, kopiując i ustawiając swoją wartość.


Dowiedzenie się, która właściwość odpowiada za to, co jest dość proste - wszystkie właściwości mają intuicyjne nazwy w języku angielskim. Każdą właściwość z dużej ilości dostępnych ustawień można po prostu przetłumaczyć na język rosyjski i zrozumieć, co to znaczy.

Aby wykonać kopię zapasową wszystkich ustawień i szybko wdrożyć Sublime Text w innym miejscu pracy, po prostu skopiuj folder

„C:\Użytkownicy\(Twój użytkownik)\AppData\Roaming\Sublime Text 3”
do ukrytego miejsca rezerwowego na dysku lub na dysku flash USB, a następnie umieść go u innego użytkownika lub na innym komputerze w tym samym katalogu pod użytkownikiem.

Dodatkowo, według własnego uznania, możesz wyłączyć minimapę po prawej stronie i ukryć menu. Można to zrobić, przechodząc do Widok > Ukryj minimapę i Widok > Ukryj menu. Możesz wyświetlić menu, naciskając klawisz Ctrl na klawiaturze.

// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // wyświetlasz rozmiar mojej miniatury?>

Witam, dużo już napisano o Sublime Text. Na moim blogu pisałem o Sublime Text 2. Teraz Sublime Text 3 opuścił już wersję alfa (alpha oznacza nową i skrajnie niestabilną wersję) i przeniósł się do beta (beta wciąż nie jest stabilna, ale jest już przeznaczona do testów, po becie zwykle pojawia się oficjalne wydanie). I postanowiłem całkowicie zająć się Sublime Text 3 (zwanym dalej ST3).

Jeśli zamierzasz zainstalować SublimeText3, to jest to najbardziej kompletny przewodnik dla Ciebie. Tutaj opiszę wszystko, co dotyczy tego edytora, a on naprawdę dużo wie.

Najpierw usunąłem ST2 i wszystkie jego ślady z systemu. Usunięto również node.js i npm, które były z nim sparowane. Ponieważ zamierzam przekonfigurować kompilację less, a następnie plików saas, poprawnie i poprawnie, poprzez sublime. Ale o tym później.

Część 1. Instalacja i konfiguracja Sublime Text 3

Pobierz i zainstaluj Sublime Text 3

Jeśli jeszcze tego nie wiesz, Less jest preprocesorem CSS opartym na JavaScript. To jest kod, który kompiluje się do CSS. Istnieją różne sposoby kompilacji less do css: Grunt , Guard i Less.app . Jednak być może nie chcesz lub nie musisz używać dodatkowych narzędzi i chcesz zrobić wszystko dobrze w edytorze kodu. Poniżej podałem instrukcje, które są odpowiednie dla użytkowników Windows (sam wykonałem na nim instalację, a także dla mac OS.)

  1. Zainstaluj Node.js
  2. Zainstaluj NPM (zainstalowany z Node.js)
  3. Zainstaluj mniej globalnie. Otwórz konsolę Windows i wpisz npm install less -gd
  4. Zainstaluj wtyczkę Less2Css i SublimeOnSaveBuild

Otwórzmy ustawienia ST3: Preferencje → Ustawienia - Domyślne i dodajmy linię na końcu:

"lesscCommand": "/usr/local/share/npm/bin/lessc"

Otwórzmy dowolny plik .less i spróbujmy go zbudować. Po prostu wprowadź zmiany w pliku i naciśnij Ctrl + S.

Jeśli wystąpi błąd: Nie można zinterpretować argumentu clean-css… Stało się tak, ponieważ wtyczka clean-css była osobna i nie była zawarta w pakiecie less. Dlatego musi być zainstalowany osobno. Zainstalować. Wchodzimy do konsoli i piszemy:

npm install -g less-plugin-clean-css

SASS to kolejny preprocesor CSS. Zyskuje popularność i już wyprzedza coraz mniej w rozprzestrzenianiu się użytkowania.

  • Zainstaluj Rubiego
  • Uruchamiamy konsolę i umieszczamy Ruby Gem gem install sass
  • Instalowanie wtyczki Sass dla Sublime Text
  • Instalowanie wtyczki Sass Build dla Sublime Text
  • Instalowanie wtyczki SublimeOnSave dla Sublime Text
    (rozmawialiśmy o tej wtyczce w powyższych instrukcjach)

Teraz dodajmy ustawienia do Sublime Text Settings - Default:

( "filename_filter": ".(sass|scss)$", "build_on_save": 1 )

Nie zapomnij również otworzyć pliku .sass i wybrać system kompilacji w Narzędzia → Build System → SASS Compressed Now, kiedy zapiszesz plik .sass, .css zostanie skompilowany.

Jade jest preprocesorem do pisania kodu html i podobnie jak less or sass dla css, sprawia, że ​​pisanie znaczników html jest szybsze i łatwiejsze (dla doświadczonych projektantów layoutu). Jak zainstalować i skonfigurować jego działanie.

  • Musi mieć zainstalowany node.js z npm (zwykle w pakiecie z węzłem)
  • Wchodzimy do konsoli i instalujemy jade poleceniem npm install jade --global
  • Zainstaluj wtyczkę Jade Build w Sublime Text
  • W Sublime Text otwórz plik .jade i wybierz Jade build system
  • Jeśli zastosujesz się do wszystkich instrukcji w tym poście, to w ustawieniach Sublime uzupełnię wiersz o Save On Build o rozszerzenie jade i teraz będzie to wyglądać tak "filename_filter": ".(sass|scss|jade)$" ,
  • Zainstaluj wtyczkę Jade w Sublime

Po tych manipulacjach kompilowane są pliki jadeitu.

Jeśli nie ma podświetlenia kodu Jade, przejdź do prawego dolnego rogu ST i prawdopodobnie mówi zwykły tekst, kliknij ten napis, a następnie wybierz podświetlenie Jade. Teraz podświetlenie będzie działać.

Wtyczki Sublime Text są napisane w Pythonie. Sam język jest bardzo prosty i jeśli jesteś programistą, to nie będzie Ci trudno się go nauczyć. Jeśli nie, to też nie ma to znaczenia, ponieważ najprawdopodobniej wtyczka została już napisana do Twojego zadania.

Instalowanie wtyczek w Sublime Text

W tej chwili istnieją dwie metody instalowania wtyczek w programie:

  1. Barbarzyński. Wystarczy pobrać niezbędną wtyczkę z Internetu i wrzucić ją do odpowiedniego folderu. Ale to nie jest właściwa metoda, dlatego nie będziemy się nad tym rozwodzić.
  2. Poprzez kontrolę pakietu wysublimowanego

Zanim zaczniesz instalować wtyczki, musisz zainstalować Sublime Package Control, przeczytaj o tym.

Aby zainstalować wtyczki potrzebujesz:

  1. otwórz wiersz poleceń, naciskając kombinację klawiszy: ctrl+shift+p ;
  2. w linii wpisujemy Install Package i wciskamy enter;
  3. na dole, w polu, które się otworzy, wpisz nazwę wtyczki, na przykład: emmet;
  4. naciśnij enter i poczekaj na zakończenie instalacji, pojawi się tam ekran z kilkoma linijkami;
  5. Gotowy.

(patrz instrukcje na 3 zrzutach ekranu)

Nie ma większego sensu mówienie o tym, które wtyczki są popularne, a które nie mają większego sensu, ponieważ Sublime pisze w kilkudziesięciu językach programowania, a każdy język ma swoje wtyczki.

Ale ponieważ większość osób wybierających ten edytor pisze w php, rozważymy kilka.

Wzniosły tekst Emmet

Nieco wcześniej w przykładzie zainstalowaliśmy tę wtyczkę. To znacznie przyspiesza rozwój witryn. Aby zrozumieć, co robi w prawym dolnym rogu, zamiast Zwykły tekst, wybierz PHP. Teraz wstawiamy edytor! i naciśnij TAB.

Możesz też wpisać: .wrapper press tab, jak widzimy mamy div.

Aby stworzyć menu z 10 linkami, możesz napisać co następuje, a następnie wcisnąć zakładkę: .menu>ul>li*10>a(menu_$)

Po lewej stronie „!+tab” , w środkowej części „.wrapper + tab”, a po prawej „menu>ul>li*10>a(menu_$) + tab” Myślę, że masz rację.

Zaawansowany nowy plik

Umożliwia tworzenie nowych plików. Zainstaluj wtyczkę, otwórz prawy pasek boczny (widok - pasek boczny -pokaż pasek boczny), następnie naciśnij kombinację klawiszy ctrl + alt + n i napisz index.php, jak widzimy plik został utworzony i jest bardzo szybki i wygodne.

Zakreślacz wspornika

Domyślnie, jeśli staniemy np. na jakimś div, to bardzo trudno zauważyć zamykający tag, ponieważ jest on zbyt słabo podkreślony. Zakreślacz wspornika.


Widać, że podkreślone jasną białą linią.

kolor zakreślacza

Podpowiada kolor kodu, czyli domyślnie nie jest dla nas jasne jakiego koloru będzie kod #224f43, a wtyczka podkreśla kod kolorem jaki jest. Co więcej, jeśli klikniemy na kod, podświetli go on tym kolorem.

Deklaracja Gotocs

Pomaga znaleźć i przejść do żądanego elementu css bezpośrednio z kodu html. Wystarczy kliknąć prawym przyciskiem myszy element, do którego zastosowano ten styl i wybrać Przejdź do deklaracji CSS

Wieloplatformowy edytor tekstu.

Krótki poradnik dla początkujących do pracy w wysublimowany sposób iw zakresie layoutu. Wszystko, czego potrzebujesz i potrzebujesz, jest tutaj. (Kliknij linki, aby uzyskać więcej, jeśli to konieczne)

Rozważymy to dla Layout on Pug / Less, gdzie nie potrzebujemy ogromnej funkcjonalności debugowania. Dlatego to ten edytor (moim zdaniem) wygrywa z konkurentami zarówno pod względem szybkości, jak i funkcjonalności.

1. Instalacja programu i kontrola dodatków (Kontrola pakietów)

  1. Zainstaluj Sublime Text 3. Wszystko jest proste - Ściągnij i zacznij.
Teraz wciskamy ctrl/⌘+shift+p lub w menu (Narzędzie > Paleta poleceń).

Tutaj możemy pobierać, instalować, usuwać, przeglądać dodatki itp.

2. Ustawienia programu:

  1. Użyj spacji zamiast tabulatorów.
    "translate_tabs_to_spaces": prawda
  2. Rozmiar tabulatora to 4 spacje.
    tab_size: 4

    Pytasz dlaczego?
    Aby przypadkowo nie nacisnąć spacji i zakładki razem, a nie złamać zespołu mopsa.
    A także za jednolitość pracy zespołowej.

  3. Smyczki nie powinieneś kończyć pustymi znakami.
    W tym celu korzystamy z wtyczki Przestrzenie końcowe .

- Być może na tym kończą się obowiązkowe ustawienia MustHave. Przejdźmy do osoby:

  1. F11 pełny ekran + ukryj pasek menu (alt). Pozwala zmaksymalizować wykorzystanie monitora do pracy i nie rozpraszać się stanem panelu systemu operacyjnego.
  2. Zakaz łamania linii. Prawdopodobnie najlepszy z listy. Zapobiega zamieszaniu w składni mopsów. Pokazuje zawsze oczekiwany kod i zagnieżdżanie niezależnie od rozmiaru ekranu. Przewijanie w poziomie odbywa się za pomocą Shift + kółko (lub touchPanel)
    "word_wrap": "fałsz"
  3. Motywy. Nie mogę nic o tym powiedzieć. Po prostu znajdź to, co lubisz (najlepiej używając ciemnego schematu). Używam "theme": "Material-Theme-Darker.sublime-theme".
  4. Podświetlanie składni. Cóż, nie sądzę, że powinien być problem. Jeśli upewnisz się, że rozszerzenie i podświetlenie pasują do siebie (Pug for Pug, a nie Jade for Pug)
  5. Widok → Pasek boczny → Ukryj otwarte pliki- Zwalnia miejsce na drzewo projektu. Ponieważ to pole i tak jest powielone przez tabulatory i trzy kropki na górze

3. Przydatne skróty klawiszowe:

  1. W pierwszym akapicie załóżmy, że pomijamy wszystkie standardowe kombinacje, takie jak Ctrl(⌘) + Z(⌘ - potem po prostu ctrl). Cofnij, zapisz, ponów, zamknij kartę, przywróć kartę itp.
  2. Być może następną najpopularniejszą kombinacją jest:
    crtl+P- Umożliwia przeszukiwanie plików otwartego projektu. Pozwala pozbyć się ogromnego drzewa otwartych stylów.
  3. Następne co do ważności:
    Ctrl + D- Wyszukaj kopie wybranego tekstu. Idealny do wielu edycji. I znaleźć duplikaty. Zwłaszcza w większych plikach i większych fragmentach. Dla wielu kursorów przytrzymaj Ctrl i użyj myszki.
  4. Ctrl+L- Zaznacza całą linię i pozwala na jej całkowite usunięcie. Działa dobrze z ctrl+D.
  5. Szukaj… Cóż, prawdopodobnie pierwszym z nich jest ctrl+F - wyszukiwanie plików. Drugim i ważniejszym jest wyszukiwanie w folderze wielu plików ctrl + shift + F (Możesz to wywołać, klikając folder prawym przyciskiem myszy i wybierając "Znajdź w folderze ...") Radzę nie uwzględniać " „Słynny Grubas” w wyszukiwaniu
  6. Ctrl+Shift+w górę/w dół- Przesuwa linię w górę / w dół (zamień je). Przydatne do pracy ze stylami i zmiennymi.
  7. Teraz mały samouczek na kombinacje skrótów klawiaturowych. Prawdopodobnie widziałeś te kombinacje oddzielone przecinkami. Więc zobaczyłem… i teraz wiem jak z nich korzystać. Aby to zrobić, naciśnij kolejno te kombinacje (nie możesz zwolnić wspólnego klawisza mod)
    Oto kilka przydatnych:
  8. Ctrl+K, Ctrl+4- Ukrywa wszystkie gałęzie, których zagnieżdżenie jest większe niż 4. Analog strzałki do zwinięcia. ( Ctrl+K, Ctrl+J- rozszerza wszystko co jest)
  9. Ctrl+K, Ctrl+B- Ukrywa/pokazuje pasek boczny. (działa dobrze z F12)