Wtyczki. Dostosowanie wtyczek Sublime Text 3 dla javascript

// echo get_the_post_thumbnail(get_the_ID(), "powiązana miniatura"); // wyświetlanie mojego rozmiaru miniatury?>

Witam, dużo już napisano o Sublime Text. Na swoim blogu pisałem o Sublime Text 2. Teraz Sublime Text 3 opuścił już wersję alpha (alpha oznacza nową i wyjątkowo niestabilną wersję) i przeszedł do wersji beta (beta nadal nie jest stabilna, ale jest już przeznaczona do testów, po wersji beta zwykle pojawia się oficjalna wersja). I postanowiłem całkowicie zająć się Sublime Text 3 (zwanym dalej ST3).

Jeśli zamierzasz zainstalować SublimeText3, jest to najbardziej kompletny przewodnik dla Ciebie. Tutaj opiszę wszystko związane z tym edytorem, a on naprawdę dużo wie.

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

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

Pobierz i zainstaluj Sublime Text 3

Jeśli jeszcze nie wiesz, Less to oparty na JavaScript preprocesor CSS. 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 korzystać z dodatkowych narzędzi i chcesz zrobić wszystko dobrze w edytorze kodu. Poniżej podałem instrukcje, które są odpowiednie dla użytkowników systemu Windows (sam dokonałem instalacji na nim, a także dla systemu Mac OS).

  1. Zainstaluj Node.js
  2. Zainstaluj NPM (zainstalowany z Node.js)
  3. Instaluj 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 oddzielna i nie była zawarta w mniejszym pakiecie. Dlatego należy go zainstalować osobno. Zainstalować. Idziemy do konsoli i piszemy:

npm install -g mniej-plugin-clean-css

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

  • Zainstaluj Rubiego
  • Uruchamiamy konsolę i umieszczamy ruby ​​gem gem install sass
  • Instalowanie wtyczki Sass dla Sublime Text
  • Instalowanie wtyczki Sass Build do Sublime Text
  • Instalowanie wtyczki SublimeOnSave dla Sublime Text
    (mówiliśmy o tej wtyczce w instrukcjach powyżej)

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 lub sass w css, sprawia, że ​​pisanie znaczników HTML jest szybsze i łatwiejsze (dla doświadczonych projektantów układu). Jak zainstalować i skonfigurować jego działanie.

  • Musi mieć zainstalowany node.js z npm (zwykle w pakiecie z node)
  • Przechodzimy 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 system kompilacji Jade
  • Jeśli postępujesz zgodnie ze wszystkimi instrukcjami w tym poście, to w ustawieniach Sublime uzupełnię linię 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ć.

Odpowiedni zestaw wtyczek może poprawić wydajność dowolnej aplikacji. Jeśli jesteś programistą internetowym współpracującym z Sublime Text 3 Kontrola pakietu, zdecydowanie zalecamy uważne przeczytanie wtyczek omówionych w tym artykule:

  • kontrola paczki ;
  • Upiększanie HTML ;
  • Emmet ;
  • Zakreślacz wspornika;
  • jQuery ;
  • konwersja spraw.

kontrola paczki

Ta wtyczka ułatwia znajdowanie, instalowanie i aktualizowanie innych pakietów. Należy go najpierw zainstalować. Ułatwi to pracę ze wszystkimi innymi wtyczkami.

Jak zainstalować

  1. Śledź ten link https://packagecontrol.io/installation i skopiuj polecenie, które będzie wyglądać mniej więcej tak:
  1. Naciśnij Ctrl - backtick (; `), aby otworzyć Sublime Text Console:
  1. Wklej polecenie i naciśnij Enter .
  1. Po uruchomieniu polecenia zobaczysz małe wyskakujące okienko z ostrzeżeniem:
  1. Kliknij OK.
  2. Zamknij i uruchom ponownie Sublime Text .
  3. Wprowadź polecenie Kontrola pakietów, aby zobaczyć wszystkie polecenia:

Będziemy używać kontroli pakietów Sublime Text dla pozostałych wtyczek.

HTMLPrettify

Pobiera długie ciągi znaków HTML , CSS , JavaScript i JSON i formatuje je, aby można było je przeczytać zamiast próbować zrozumieć sens pisania.

Jak zainstalować

  1. Naciśnij Ctrl-Shift-P w systemie Windows, aby otworzyć pasek poleceń.
  2. Wprowadź polecenie Kontrola pakietów, aby wyświetlić wszystkie polecenia. Wybierać Kontrola pakietu: Zainstaluj pakiet. Na ekranie pojawi się menu dostępnych wtyczek:
  1. Wpisz HTMLPrettify:
  1. Kliknij HTML-CSS-JS Upiększ . Ta nazwa jest nieco inna, ale to ta sama wtyczka.

Mrówka

Ta wtyczka nazywała się kiedyś Zen Coding. Pozwala pisać skrócone kody HTML i CSS. Na przykład wpisując następujące polecenie:

#page>div.logo+ul#navigation>li*5>a(Pozycja $)

A naciśnięcie klawisza Tab da ci:

Po zainstalowaniu Emmeta przy użyciu Sublime Text Package Control uruchom ponownie Sublime Text .

Aby Emmet działał, musisz ustawić składnię dokumentu. Inaczej to nie zadziała:

Teraz sprawdź. Wprowadź następujące informacje:

nav#menuSystem.navMenu.isOpen>div#hotelLogo>div.navMenuIcon.logoIcon+div#arrowPointer+ul#navMenuMain>li.navMenuItem.navMenuItem$$$*2>div.navMenuIcon(Item $)+a(Item $)

I naciśnij zakładkę . Dostaniesz:

Nauczenie się wszystkich dostępnych skrótów zajmie dużo czasu. Umożliwi to znacznie szybsze pisanie kodu HTML.

Zakreślacz wspornika

Wtyczka wyróżnia nawiasy i znaczniki. Po zainstalowaniu z Instalacja Sublime Text Package Control możesz kliknąć dowolne miejsce w kodzie JavaScript lub HTML i zobaczyć nawiasy otwierające i zamykające w lewej kolumnie:

jQuery

Wtyczka jQuery podkreśla poprawną składnię metod jQuery i zapewnia fragmenty kodu do jej uzupełnienia:

konwersja spraw

Pozwala przełączać się pomiędzy snake_case , camelCase , PascalCase , itp. Po zainstalowaniu wtyczki za pomocą Package Control (wpisz " pic”, aby uzyskać szybki dostęp do pakietu instalacyjnego), Spróbuj.

Wchodzimy na oficjalną stronę Sublime Text w dziale Download i pobieramy Ostatnia wersja programy dla nich system operacyjny Pobrałem oprogramowanie 64-bitowe. Zaczynamy, sprawdzamy, czy wszystko działa. Nawiasem mówiąc, program nie jest darmowy i jeśli nie kupisz klucza, to nie ma żadnych ograniczeń poza napisem „niezarejestrowany” w tytule i nieinwazyjnym wyskakującym okienkiem z ostrzeżeniem po pewnym czasie czas (1 raz na pół godziny - godzinę).

Zainstalujmy Russifier

Rozpakuj pobrane archiwum i skopiuj wszystkie pliki z rozszerzeniem .sublime-menu (z wyjątkiem folderu „backup”) do jednego z następujących folderów (w zależności od systemu operacyjnego):

Jeśli w określonej ścieżce nie ma folderu „Domyślny”, musisz go utworzyć.

Skonfiguruj automatyczne zawijanie wierszy

Otwórz Preferencje → Ustawienia - Niestandardowe

Dodajemy następujący wiersz:

"word_wrap": prawda

Walka z kodowaniem w plikach

Powtórz Preferencje → Ustawienia - Niestandardowe. Należy wymienić

"fallback_encoding": "Zachodnia (Windows 1251)",

do tej linii:

"fallback_encoding": "Cyrylica (Windows 1251)",

Zainstaluj PackageControl

Kontrola pakietu jest potrzebna do rozszerzenia funkcjonalności edytora Sublime Text 3 o różne wtyczki.

Wchodzimy na stronę, przeglądamy instrukcje instalacji. Lub przejdź do edytora, naciśnij klawisze: Ctrl + ~ , w wyświetlonym wierszu poleceń wprowadź następujące polecenie instalacji:

importuj urllib.request,os,hashlib; h = "2915d1851351e5ee549c20394736b442" + "8bc59f460fa1548d1514676163dafc88"; pf = "PackageControl.sublime-pakiet"; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler())); by = urllib.request.urlopen("http://packagecontrol.io/" + pf.replace("", "%20")).read(); dh = hashlib.sha256(by).hexdigest(); print("Błąd sprawdzania poprawności pobierania (wystąpił %s zamiast %s), spróbuj zainstalować ręcznie" % (dh, h)) if dh != h else open(os.path.join(ipp, pf), "wb" ).napisz(przez)

Ustawianie schematów kolorów

Ponownie naciśnij Ctrl+Shift+P i wpisz daylerees - themes .

Dodatkowo

Aby uzyskać dostęp do FTP, musisz zainstalować „SFTP”

Kolejną interesującą funkcją jest „Goto-CSS-Declaration”. Kliknięcie klasy powoduje wyświetlenie tej klasy w arkuszu stylów.

Wieloplatformowy edytor tekstu.

Krótki poradnik dla początkujących do pracy w wysublimowaniu oraz w zakresie layoutu. Wszystko, czego potrzebujesz i potrzebujesz, jest tutaj. (W razie potrzeby kliknij linki, aby uzyskać więcej)

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

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

  1. Zainstaluj Sublime Text 3. Wszystko jest proste - pobierać i zacznij.
Teraz naciskamy 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żywaj spacji zamiast tabulatorów.
    "translate_tabs_to_spaces": prawda
  2. Rozmiar tabulatora to 4 spacje.
    tab_size: 4

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

  3. Smyczki nie powinieneś zakończyć pustymi znakami.
    W tym celu używamy wtyczki Końcowe spacje .

- 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. Chyba najlepszy z całej listy. Zapobiega zamieszaniu w składni pug. 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 na ten temat powiedzieć. Po prostu znajdź to, co lubisz (najlepiej używając ciemnego schematu). Używam „motywu”: „Material-Theme-Darker.sublime-theme”.
  4. Podświetlanie składni. Cóż, myślę, że nie powinno być problemu. Jeśli upewnisz się, że rozwinięcie i wyróżnienie pasują do siebie (Mops dla Mopsa, a nie Jade dla Mopsa)
  5. Widok → Pasek boczny → Ukryj otwarte pliki- Zwalnia miejsce na drzewo projektu. Ponieważ to pole i tak jest duplikowane przez tabulatory i trzy kropki na górze

3. Przydatne skróty klawiszowe:

  1. W pierwszym akapicie powiedzmy, że pomijamy wszystkie standardowe kombinacje, takie jak ctrl(⌘) + Z(⌘ - potem tylko ctrl). Cofnij, zapisz, wykonaj ponownie, 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 pod względem ważności:
    ctrl + D- Wyszukaj kopie wybranego tekstu. Idealny do edycji wielokrotnej. I znaleźć duplikaty. Zwłaszcza w większych plikach i większych fragmentach. Aby korzystać z wielu kursorów, przytrzymaj klawisz Ctrl i użyj myszy.
  4. ctrl+L- Zaznacza całą linię i pozwala ją całkowicie usunąć. Działa dobrze z ctrl+D.
  5. Szukaj… Cóż, prawdopodobnie pierwszy to 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 dołączać „ Famous Fat Man” w wyszukiwarce
  6. ctrl+shift+góra/dół- Przesuwa linię w górę/w dół (zamień je). Przydatne do pracy ze stylami i zmiennymi.
  7. Teraz mały samouczek nt 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. Analogia 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)

Co pozwala sprawdzić kod pod kątem błędów składniowych. Poniżej znajduje się prosta instrukcja, jak zmienić edytor w pełnoprawne IDE do tworzenia stron internetowych.

UWAGA! W artykule opisano konfigurację programu Sublime Text 3 (zwanego dalej ST3) w systemie Windows 7.

1. Wyobraźmy sobie, że już zainstalowałeś ST3 na swoim Win 7 i zainstalowałeś Kontrolę pakietów.

2. Teraz musisz zainstalować dodatkowe pakiety w ST3. Chodźmy do Preferencje -> Kontrola pakietów -> Zainstaluj pakiety
I zainstaluj następujące pakiety:

  • SublimeLinter
  • SublimeLinter-html-schludny
  • SublimeLinter-csslint
  • SublimeLinter-jsl
  • SublimeLinter-jshint
  • SublimeLinter-php
  • SublimeLinter-phplint
  • JSHint

3. Konfigurowanie sprawdzania błędów składni HTML
3.1. Pobierz i umieść go w dowolnym folderze.
3.2. Dodaj ścieżkę do tego folderu! z tidy.exe do zmiennej serca użytkownika systemu Windows (PATH), której ustawienia znajdują się w Mój komputer -> Właściwości -> Zaawansowane ustawienia systemu -> Zmienne środowiska... -> Wybierz zmienną "PATH" -> Kliknij "Zmień" dodaj ścieżkę.
UWAGA! Zwróć uwagę na średnik „;” po każdej ścieżce i nie zapomnij jej zapisać, a także zwróć uwagę na ukośnik odwrotny \.

4. Dostosowywanie sprawdzania błędów składni CSS
4.1. Pobierz i zainstaluj node.js
4.2. Dodaj ścieżkę do folderu (do folderu!) za pomocą node.js w PATH (ścieżka wygląda mniej więcej tak: C:\Users\Nazwa_użytkownika\AppData\Roaming\npm)! Nie zapomnij o średniku.
4.3. Zainstaluj csslinta. Aby to zrobić, uruchom wiersz poleceń systemu Windows jako administrator i napisz: npm install -g csslint

5. Konfigurowanie sprawdzania błędów składni JavaScript
5.1. Jeśli nie wykonałeś paragrafów 4.1. i 4.2. - robimy to.
5.2. Zainstaluj jslint i jshint, w tym celu wykonujemy tę samą operację, co w punkcie 4.3. piszemy odpowiednio tylko jslint i jshint zamiast csslint.

6. Konfigurowanie sprawdzania błędów składni PHP
6.1. Nie dla php w asemblerze Denwera!
6.2. (AKTUALIZACJA) Faktem jest, że wielu (w tym ja) jako lokalny serwer postawili się Denwer. I Bóg wie dlaczego (nie wdawał się w szczegóły), ale PHP Denvera nie jest akceptowane przez ST3, do końca życia. Może wyświetlać błędy PHP w konsoli ST3, ale nie zapewnia podświetlania składni.
PS Specjalnie dodałem ten element, ponieważ. na wielu forach piszą, że instalujemy PHP, konfigurujemy pakiety ST3 i będziesz zadowolony. Ale szczęście się nie zdarza, ponieważ. Pozycja z instalacją PHP jest zwykle pomijana od razu z powodu nadziei na wydajność (przydatność) denwer-a.
6.3. Dlatego natychmiast przejdź tutaj i pobierz PHP. Instalacja PHP - po prostu rozpakuj archiwum do dowolnego folderu i wpisz ścieżkę do tego folderu w PATH (paragraf 3.2.)
6.4. Jeśli masz ścieżkę do folderu PHP Denver w swojej PATH, pamiętaj o jej usunięciu.
7. Plik konfiguracyjny SublimeLinter.sublime.settings

KONIECZNE JEST POPRAWIENIE ŚCIEŻKI DO tidy.exe i php.exe

( "user": ( "debug": true, "delay": 0.25, "error_color": "D02000", "gutter_theme": "Packages/SublimeLinter/gutter-themes/Circle/Circle.gutter-theme", "gutter_theme_excludes ": , "lint_mode": "background", "linters": ( "csslint": ( "@disable": false, "args": , "errors": "", "excludes": , "ignore": " ", "ostrzeżenia": "" ), "hlint": ( "@disable": false, "args": , "excludes": ), "htmltidy": ( "@disable": false, "args": , "wyklucza": ), "jscs": ( "@disable": fałsz, "args": , "wyklucza": ), "jshint": ( "@disable": fałsz, "args": , "wyklucza": ), "jsl": ( "@disable": false, "args": , "excludes": ), "php": ( "@disable": false, "args": , "excludes": ), "phplint ": ("@disable": fałsz, "args": , "wyklucza": ) ), "mark_style": "zarys", "no_column_highlights_line": fałsz, "passive_warnings": fałsz, "ścieżki": ( "linux" : , "osx": , "windows": ), "python_paths": ( "linux": , "osx": , "windows": ), "rc_search_limit": 3, "shell_timeout": 10, "show_errors_on_save": false, "show_marks_in_minimap": true, "sublimelinter": true, "sublimelinter_executable_map": ( "css": "node", "html": "Z:\\usr\\bin\\tidy.exe", //ścieżka do twojego folderu z tidy.exe, zwróć uwagę na podwójne ukośniki odwrotne, są one wymagane "php": "C:\\Program Files\\PHP_5.6\\php.exe" //ścieżka do twojego folderu z php.exe ) , "syntax_map": ( "css": "css", "html (django)": "html", "html (rails)": "html", "html 5": "html", "js": " js", "php": "php", "python django": "python"), "warning_color": "DDB700", "wrap_find": true ) )

8. Uruchom ponownie Sublime Text
Zdarza się, że niektórzy zapominają o trybie debugowania Sublimelinter. Aby ją włączyć, kliknij prawym przyciskiem myszy dowolne miejsce w obszarze edycji ST3 -> SublimeLinter -> Tryb debugowania

mob_info