Sublime wtyczki tekstowe dla programistów JavaScript

Sublime edytor tekstu jest dość znaną nazwą wśród społeczności programistów (zarówno nowicjuszy, jak i profesjonalistów). Został opracowany z obsługą wielu platform do edycji kodu źródłowego i tekstu.

Chociaż obecna wersja (Sublime text 3) jest w fazie beta, jest szybsza niż wersja 2 i ma mnóstwo funkcji. Natywnie obsługuje szeroką gamę języków programowania i znaczników, a tworzone przez społeczność bezpłatne wtyczki edytora tekstu Sublime podniosły jego funkcjonalność na nowy poziom.

Wielu programistów trzyma się tego edytora ze względu na ogromne repozytorium wtyczek. W tym artykule skupimy się na niektórych wtyczkach, które są najbardziej przydatne dla programistów JavaScript.

strzępienie

Narzędzia Linting pomagają programistom wykrywać błędy, rozbieżności składniowe i potencjalne problemy. Można go również użyć do upewnienia się, że projekt odpowiada określonym wytycznym dotyczącym kodowania.

SublimeLinter-eslint

Obsługuje wersję Sublime Text 3 i zapewnia interfejs ESLint do pracy z plikami o składni „JavaScript”. SublimeLinter 3, Node.js, npm i eslint są warunkiem wstępnym instalacji tej wtyczki. Obejmuje mnóstwo reguł z opcjami do dostosowania Otrzymasz dokładną opcję zapisania w pliku konfiguracyjnym, aby wyłączyć wszystkie ostrzeżenia i błędy. Ważną rzeczą, na którą należy zwrócić uwagę, jest to, że ta wtyczka jako jedyna obsługuje JSX, a obsługa ES6 jest znacznie większa lepszy w porównaniu do innych wtyczek.

Użycie: W zależności od konfiguracji SublimeLinter, kod będzie szarpany podczas edycji lub zapisywania. Można to skonfigurować za pomocą Choose Lint Modepolecenia.

Sublime-JSHint

Wtyczka JSHint Gutter jest kompatybilna zarówno z Sublime Text 2, jak i 3. Umożliwia programistom sprawdzanie kodu JavaScript pod kątem strasznych błędów i konwencji kodowania. Tę wtyczkę można również skonfigurować tak, aby wyświetlała wskazówki w rynsztoku i działała płynnie z plikami .jshintrc specyficznymi dla projektu. Opiera się na JSHint, rozwidleniu JSLint. Ponieważ linter jest napisany w JavaScript, Node.js jest wymagany do interpretacji kodu JavaScript poza przeglądarką.

Użycie: Ctrl+alt+Jw systemie Windows lub Cmd+Option+Jna komputerze Mac. Możesz także kliknąć prawym przyciskiem myszy, wybrać JSHint i kliknąć Lint Code. Innym sposobem jest otwarcie pliku JavaScript, otwarcie konsoli w Sublime Text z View, następnie Show Console i wpisanie view.run_command("jshint"). W tym celu zaleca się skonfigurowanie własnej kombinacji klawiszy, przechodząc do Preferencje -> Powiązania klawiszy – Użytkownik i dodając polecenie takie jak { "keys": ["ctrl+shift+j"], "command": "jshint" }w tej tablicy.

Formatowanie

Narzędzia formatujące służą do upiększania bloków kodu i formatowania ich, aby były bardziej czytelne.

Sublime-jsfmt

Ta wtyczka obsługuje obie wersje Sublime Text i automatycznie formatuje kod JavaScript zgodnie z określonym stylem. Deweloper nie musi czytać ostrzeżeń i ręcznie naprawiać problemu z formatowaniem. In można zainstalować za pomocą menedżera pakietów, wybierając jsfmtz rozwijanego menu.

Użycie: Specyficzny dla projektu plik .jsfmtrc można umieścić w katalogu głównym projektu w celu konfiguracji. Dostęp do niego można uzyskać za pomocą następującej ścieżki: Preferences -> Package Settings -> Sublime JSFMT. Oprócz tego przewidziano możliwość ustawienia skrótu klawiaturowego wchodząc w Preferencje -> Powiązania klawiszy – Użytkownik i dodając { "keys": ["ctrl+q"], "command": "format_javascript" }tablicę.

JsFormat

Obsługuje obie wersje Sublime Text. Ta wtyczka formatująca JavaScript używa narzędzia formatującego wiersza poleceń z jsbeautifier w tle do formatowania całego pliku js, json lub tylko wybranej części pliku. Konfigurację specyficzną dla projektu można również wykonać za pomocą ustawień pliku .jsbeautifyrc. Oprócz tego można również dostosowywać style białych znaków i formatowania.

Użycie: domyślne powiązanie klawiszy jest ctrl+alt+fprzeznaczone dla systemów Windows i cmd+option+fMac. Wtyczka używa ustawień tabulacji/wcięcia skonfigurowanych z ustawieniami standardowymi translate_tabs_to_spacesi tab_sizewysublimowanymi.

Analiza kodu

Są to silniki wnioskowania o kodzie używane do przyspieszania procesu programowania poprzez zapewnianie autouzupełniania kodu, podpowiedzi argumentów funkcji itp.

Tern dla Sublime

Ta wtyczka do analizy kodu JavaScript została opracowana w celu integracji z edytorami kodu w celu inteligentnej edycji JavaScript. Ma kilka fajnych funkcji, takich jak:

• Automatyczne uzupełnianie zmiennych i właściwości
• Wskazówki dotyczące argumentów funkcji
• Zapytanie o typ wyrażenia
• Automatyczna refaktoryzacja

Musisz upewnić się, że Node.js i npm są zainstalowane przed przystąpieniem do instalacji tej wtyczki.

Użycie: Po prostu użyj alt+., aby przejść do definicji rzeczy, na którą wskazuje kursor i alt+,wrócić do miejsca, w którym byłeś podczas wykonywania poprzedniego alt+.polecenia. Wreszcie, alt+spaceaby wybrać wszystkie odniesienia do określonej zmiennej w bieżącym pliku.

Podświetlanie składni

W tej sekcji omówimy wtyczkę podświetlającą składnię.

JavaScriptNastępny

Ta wtyczka jest doskonałym podświetlaczem składni JavaScript. Oprócz ulepszenia podświetlania składni dla ES5, obsługuje także nową składnię ES6, taką jak moduły, zwięzłe metody, funkcje strzałek, klasy i generatory. Można go zainstalować za Package Controlpomocą wybierając JavaScript Nextz listy rozwijanej.

Użycie: Aby użyć tej wtyczki dla pojedynczego pliku JavaScript, możesz zmienić ustawienie w. view -> syntax -> JavaScriptNextAby ustawić to jako domyślną składnię JavaScript, otwórz plik javascript, a następnie wybierz View -> Syntax -> Open all with current extension as... -> JavascriptNext. ColorScheme można również zmienić, wybierając jeden z Preferences -> Color Scheme -> JavaScriptNext.

Dokumentacja

Teraz sprawdzimy wtyczkę, która bardzo ułatwia pisanie komentarzy do kodu i dokumentacji.

sublime-jsdocs

Wtyczka DocBlockr obsługuje zarówno Sublime text 2, jak i 3 dla JavaScript, w tym specyfikacje ES6. Można go zainstalować, po prostu wybierając DocBlockr w pliku package control. Ta wtyczka jest wysoce konfigurowalna i pozwala automatycznie uzupełniać komentarze, rozszerzać komentarze, dekorować komentarze, dodawać dokumentację dotyczącą zmiennych i funkcji.

Użycie: Napisz i /**naciśnij enter lub tab, aby utworzyć nową linię i zamknąć komentarz. Pisząc dokumentację dla funkcji, zobaczysz, że próbuje ona inteligentnie odgadnąć wartość zwracaną, aw przypadku zmiennej próbuje określić typ zmiennej na podstawie jej nazwy.

Wtyczki do bibliotek JavaScript

Możesz zainstalować wtyczki do niektórych popularnych bibliotek JavaScript, takich jak AngularJS i jQuery. Ponadto niektóre wtyczki pomagają przyspieszyć proces programowania, udostępniając fragmenty kodu. Na przykład wtyczkę fragmentu kodu JQuery można zainstalować do programowania w jQuery.

Wniosek

W tym artykule omówiliśmy niektóre przydatne wtyczki dla programistów JavaScript. Nie krępuj się udostępniać innych przydatnych wtyczek w sekcji komentarzy i pomagać społeczności programistów.