{"id":258464,"date":"2023-09-07T10:34:00","date_gmt":"2023-09-07T07:34:00","guid":{"rendered":"https:\/\/inform.click\/sublime-wtyczki-tekstowe-dla-programistow-javascript\/"},"modified":"2023-09-07T11:02:00","modified_gmt":"2023-09-07T08:02:00","slug":"sublime-wtyczki-tekstowe-dla-programistow-javascript","status":"publish","type":"post","link":"https:\/\/inform.click\/pl\/sublime-wtyczki-tekstowe-dla-programistow-javascript\/","title":{"rendered":"Sublime wtyczki tekstowe dla programist\u00f3w JavaScript"},"content":{"rendered":"

\n Sublime edytor tekstu<\/strong> jest do\u015b\u0107 znan\u0105 nazw\u0105 w\u015br\u00f3d spo\u0142eczno\u015bci programist\u00f3w (zar\u00f3wno nowicjuszy, jak i profesjonalist\u00f3w). Zosta\u0142 opracowany z obs\u0142ug\u0105 wielu platform do edycji kodu \u017ar\u00f3d\u0142owego i tekstu.\n<\/p>\n

\n Chocia\u017c obecna wersja (Sublime text 3) jest w fazie beta, jest szybsza ni\u017c wersja 2 i ma mn\u00f3stwo funkcji. Natywnie obs\u0142uguje szerok\u0105 gam\u0119 j\u0119zyk\u00f3w programowania i znacznik\u00f3w, a tworzone przez spo\u0142eczno\u015b\u0107 bezp\u0142atne wtyczki edytora tekstu Sublime podnios\u0142y<\/strong> jego funkcjonalno\u015b\u0107 na nowy poziom.\n<\/p>\n

\n Wielu programist\u00f3w trzyma si\u0119 tego edytora ze wzgl\u0119du na ogromne repozytorium wtyczek. W tym artykule skupimy si\u0119 na niekt\u00f3rych wtyczkach, kt\u00f3re s\u0105 najbardziej przydatne dla programist\u00f3w JavaScript.\n<\/p>\n

\n strz\u0119pienie\n<\/p>\n

\n Narz\u0119dzia Linting pomagaj\u0105 programistom wykrywa\u0107 b\u0142\u0119dy, rozbie\u017cno\u015bci sk\u0142adniowe i potencjalne problemy. Mo\u017cna go r\u00f3wnie\u017c u\u017cy\u0107 do upewnienia si\u0119, \u017ce projekt odpowiada okre\u015blonym wytycznym dotycz\u0105cym kodowania.\n<\/p>\n

\n SublimeLinter-eslint<\/a>
\n<\/h5>\n

\n Obs\u0142uguje wersj\u0119 Sublime Text 3 i zapewnia interfejs ESLint<\/a> do pracy z plikami o sk\u0142adni \u201eJavaScript”. SublimeLinter 3, Node.js, npm i eslint s\u0105 warunkiem wst\u0119pnym instalacji tej wtyczki. Obejmuje mn\u00f3stwo regu\u0142 z opcjami do dostosowania Otrzymasz dok\u0142adn\u0105 opcj\u0119 zapisania w pliku konfiguracyjnym, aby wy\u0142\u0105czy\u0107 wszystkie ostrze\u017cenia i b\u0142\u0119dy. Wa\u017cn\u0105 rzecz\u0105, na kt\u00f3r\u0105 nale\u017cy zwr\u00f3ci\u0107 uwag\u0119, jest to, \u017ce ta wtyczka jako jedyna obs\u0142uguje JSX, a obs\u0142uga ES6 jest znacznie wi\u0119ksza lepszy w por\u00f3wnaniu do innych wtyczek.\n<\/p>\n

\n U\u017cycie<\/strong>: W zale\u017cno\u015bci od konfiguracji SublimeLinter, kod b\u0119dzie szarpany podczas edycji lub zapisywania. Mo\u017cna to skonfigurowa\u0107 za pomoc\u0105 Choose Lint Mode<\/code>polecenia.\n<\/p>\n

\n Sublime-JSHint<\/a>
\n<\/h5>\n

\n Wtyczka JSHint Gutter jest kompatybilna zar\u00f3wno z Sublime Text 2, jak i 3. Umo\u017cliwia programistom sprawdzanie kodu JavaScript pod k\u0105tem strasznych b\u0142\u0119d\u00f3w i konwencji kodowania. T\u0119 wtyczk\u0119 mo\u017cna r\u00f3wnie\u017c skonfigurowa\u0107 tak, aby wy\u015bwietla\u0142a wskaz\u00f3wki w rynsztoku i dzia\u0142a\u0142a p\u0142ynnie z plikami .jshintrc specyficznymi dla projektu. Opiera si\u0119 na JSHint, rozwidleniu JSLint. Poniewa\u017c linter jest napisany w JavaScript, Node.js jest wymagany do interpretacji kodu JavaScript poza przegl\u0105dark\u0105.\n<\/p>\n

\n U\u017cycie<\/strong>: Ctrl+alt+J<\/code>w systemie Windows lub Cmd+Option+J<\/code>na komputerze Mac. Mo\u017cesz tak\u017ce klikn\u0105\u0107 prawym przyciskiem myszy, wybra\u0107 JSHint i klikn\u0105\u0107 Lint Code<\/code>. Innym sposobem jest otwarcie pliku JavaScript, otwarcie konsoli w Sublime Text z View, nast\u0119pnie Show Console i wpisanie view.run_command(\"jshint\")<\/code>. W tym celu zaleca si\u0119 skonfigurowanie w\u0142asnej kombinacji klawiszy, przechodz\u0105c do Preferencje -> Powi\u0105zania klawiszy \u2013 U\u017cytkownik i dodaj\u0105c polecenie takie jak { \"keys\": [\"ctrl+shift+j\"], \"command\": \"jshint\" }<\/code>w tej tablicy.\n<\/p>\n

\n Formatowanie
\n<\/h3>\n

\n Narz\u0119dzia formatuj\u0105ce s\u0142u\u017c\u0105 do upi\u0119kszania blok\u00f3w kodu i formatowania ich, aby by\u0142y bardziej czytelne.\n<\/p>\n

\n Sublime-jsfmt<\/a>
\n<\/h5>\n

\"\"<\/a><\/p>\n

\n Ta wtyczka obs\u0142uguje obie wersje Sublime Text i automatycznie formatuje kod JavaScript zgodnie z okre\u015blonym stylem. Deweloper nie musi czyta\u0107 ostrze\u017ce\u0144 i r\u0119cznie naprawia\u0107 problemu z formatowaniem. In mo\u017cna zainstalowa\u0107 za pomoc\u0105 mened\u017cera pakiet\u00f3w, wybieraj\u0105c jsfmt<\/code>z rozwijanego menu.\n<\/p>\n

\n U\u017cycie<\/strong>: Specyficzny dla projektu plik .jsfmtrc mo\u017cna umie\u015bci\u0107 w katalogu g\u0142\u00f3wnym projektu w celu konfiguracji. Dost\u0119p do niego mo\u017cna uzyska\u0107 za pomoc\u0105 nast\u0119puj\u0105cej \u015bcie\u017cki: Preferences -> Package Settings -> Sublime JSFMT<\/code>. Opr\u00f3cz tego przewidziano mo\u017cliwo\u015b\u0107 ustawienia skr\u00f3tu klawiaturowego wchodz\u0105c w Preferencje -> Powi\u0105zania klawiszy \u2013 U\u017cytkownik i dodaj\u0105c { \"keys\": [\"ctrl+q\"], \"command\": \"format_javascript\" }<\/code>tablic\u0119.\n<\/p>\n

\n JsFormat<\/a>
\n<\/h5>\n

\n Obs\u0142uguje obie wersje Sublime Text. Ta wtyczka formatuj\u0105ca JavaScript u\u017cywa narz\u0119dzia formatuj\u0105cego wiersza polece\u0144 z jsbeautifier<\/a> w tle do formatowania ca\u0142ego pliku js, json lub tylko wybranej cz\u0119\u015bci pliku. Konfiguracj\u0119 specyficzn\u0105 dla projektu mo\u017cna r\u00f3wnie\u017c wykona\u0107 za pomoc\u0105 ustawie\u0144 pliku .jsbeautifyrc. Opr\u00f3cz tego mo\u017cna r\u00f3wnie\u017c dostosowywa\u0107 style bia\u0142ych znak\u00f3w i formatowania.\n<\/p>\n

\n U\u017cycie<\/strong>: domy\u015blne powi\u0105zanie klawiszy jest ctrl+alt+f<\/code>przeznaczone dla system\u00f3w Windows i cmd+option+f<\/code>Mac. Wtyczka u\u017cywa ustawie\u0144 tabulacji\/wci\u0119cia skonfigurowanych z ustawieniami standardowymi translate_tabs_to_spaces<\/code>i tab_size<\/code>wysublimowanymi.\n<\/p>\n

\n Analiza kodu
\n<\/h3>\n

\n S\u0105 to silniki wnioskowania o kodzie u\u017cywane do przyspieszania procesu programowania poprzez zapewnianie autouzupe\u0142niania kodu, podpowiedzi argument\u00f3w funkcji itp.\n<\/p>\n

\n Tern dla Sublime<\/a>
\n<\/h5>\n

\n Ta wtyczka do analizy kodu JavaScript zosta\u0142a opracowana w celu integracji z edytorami kodu w celu inteligentnej edycji JavaScript. Ma kilka fajnych funkcji, takich jak:\n<\/p>\n