Wtyczki Sublime Text

Gdy tylko zaczniesz tworzyć witrynę, pierwszym narzędziem jest edytorem tekstu, prostym jak notatnik lub pełnowymiarowym IDE.

W tym odcinku Addy & Matt patrzy na kolekcję wtyczek Sublime Text i omów, jak pomaga w planowaniu pracy.

Kontrola przesyłek

Aby pobrać pakiety (lub wtyczki), o których wspominamy w odcinku, musisz wykonać te czynności: zainstaluj Kontrolę pakietów. To proste i przyjemne zainstalować i znaleźć jak to zrobić tutaj.

JSHint

JSHint to linter JavaScript, który analizuje kod JavaScript. i wyróżnia w kodzie wszelkie możliwe błędy i złe praktyki.

Jeśli na przykład pomylisz się przy wpisywaniu nazwy zmiennej, takiej jak poniżej, JSHint wskaże, że fo nigdy nie został zdefiniowany i jest spowoduje błąd.

var foo = { bar: 'Hello, World.' };
var msg = fo.bar;

wtyczka JSHint wskazuje problemy, wyświetlając żółte pole wokół odpowiedniego i umieszczenie kursora w tym fragmencie kodu spowoduje błąd w lewym dolnym rogu Sublime.

Inne problemy, które wykryje:

• Zmienne, które są zdefiniowane, ale nigdy nie są używane
• Unikanie tworzenia funkcji w pętlach
• Stosowanie odpowiednich metod porównawczych

Aby zainstalować pakiet SublimeLinter-JSHint Musisz też zainstalować pakiet SublimeLinter i kontynuować instalację znajdziesz na stronie pakietu SublimeLinter-JSHint.

Niektórym deweloperom pomocne może się okazać dodanie Rynna JSHint . Umieszcza małą kropkę w w obrębie dowolnego wiersza z problemem JSHint.

Plik JSCS

Plik JSCS podświetli wszystkie miejsca, w których kod JavaScript nie jest zgodny z określonym stylem kodowania.

W JSCS można na przykład określić, czy spacje mają jest używany po słowach kluczowych (np. „if”) lub określa, czy nawiasy klamrowe powinny znajdować się w tym samym lub nowym wierszu metody.

Pakiet SublimeLinter-JSCS wyróżnia wszystkie problemy w tekście podobnym do JSHint co pozwala łatwo rozwiązać ewentualne problemy.

Jest to niezwykle pomocne w pracy dzięki czemu wszyscy mogą korzystać z tego samego przewodnika stylistycznego dbaj o spójność kodu.

Najlepsze jest to, że z pakietem JSCS-Formatter możesz automatycznie rozwiązywać wszystkie problemy na stronie. naciskając ctrl + shift + p i wpisując „JSCS Formatter: Formatuj ten plik” i naciśnij Enter. Więcej informacji na ten temat znajdziesz w poście na blogu Addy.

Zakreślacz kolorów

Wyróżnienie kolorów doda kolor do tła wszystkich definicji kolorów w CSS lub Sass.

Możesz określić, czy ma być wyświetlane jako podkreślenie, za pomocą Tło jest całkowite, gdy najedziesz na nie kursorem lub zawsze wyświetla kolor na tle definicji. Po prostu przejdź do Ustawienia pakietu > Zakreślacz kolorów > „Ustawienia – domyślne” aby zobaczyć ustawienia początkowe i zmień ustawienia w sekcji „Ustawienia – Użytkownik”.

Pełne wyróżnianie tła Dodaj następujące elementy do sekcji „Ustawienia – Użytkownik” plik:

{
  "ha_style": "filled"
}

Kolor rynien

Kolor rynieli jest alternatywą dla wyróżniania kolorów, zamiast wyświetlać kolor nad zmienną koloru, umieszcza kolor w rynience tej linii.

Selektor kolorów

Jeśli chcesz szybko i łatwo wybrać kolor na ekranie Pakiet wyboru kolorów które mogą być dla Ciebie odpowiednie.

Naciśnij ctrl + shift + c i wybierz selektor kolorów.

AutoFileName

AutoFileName to prosty dodatek, listę możliwych plików. To jest super przydatne, gdy chcesz wpisać nazwę obrazu lub dodaj plik CSS lub JS, który pozwoli Ci zaoszczędzić czas. a co ważniejsze, zmniejsza ryzyko literówek.

Autoprefiks

Wszyscy zdaliśmy sobie sprawę, że zapominamy o tym, dodaj właściwość CSS z prefiksem. Na Autoprefiks Wystarczy użyć kodu CSS, aby uzyskać dodaj wszystkie potrzebne prefiksy.

To znaczy, że zaczynamy od tego...

.container-thingy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

..na następujące, po prostu klikając ctrl + shift + p i wpisując Autoprefiks CSS i naciśnij Enter.

.container-thingy {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

Możesz też określić, jakie przeglądarki i ich wersje chcesz mieć Obsługiwane w ustawieniach pakietu. Przejdź na stronę kontroli przesyłek , aby dowiedzieć się więcej.

Więcej...

Istnieje mnóstwo innych wtyczek do Sublime Text, więc zapoznaj się z kontrolą pakietu.

Więcej porad i wskazówek sprawdź świetną prezentację WesBosa na skróty klawiszowe i inne wtyczki do Sublime Text.

WesBos napisał również książkę pod tytułem „Wspaniały tekst dla doświadczonych użytkowników” co może się też spodobać Wam wspaniałych ludziach :)