{"id":249766,"date":"2023-09-07T10:34:00","date_gmt":"2023-09-07T07:34:00","guid":{"rendered":"https:\/\/inform.click\/sublime-text-plugins-javascript-kehittajille\/"},"modified":"2023-09-07T10:41:00","modified_gmt":"2023-09-07T07:41:00","slug":"sublime-text-plugins-javascript-kehittajille","status":"publish","type":"post","link":"https:\/\/inform.click\/fi\/sublime-text-plugins-javascript-kehittajille\/","title":{"rendered":"Sublime Text Plugins JavaScript-kehitt\u00e4jille"},"content":{"rendered":"

\n Sublime tekstieditori<\/strong> on melko tuttu nimi kehitt\u00e4j\u00e4yhteis\u00f6ss\u00e4 (sek\u00e4 aloittelijoille ett\u00e4 ammattilaisille). Se on kehitetty eri alustojen tuella l\u00e4hdekoodin ja tekstin muokkaamiseen.\n<\/p>\n

\n Vaikka nykyinen versio (Sublime text 3) on beta-vaiheessa, se on nopeampi kuin versio 2 ja sis\u00e4lt\u00e4\u00e4 runsaasti toimintoja. Se tukee natiivisti monenlaisia \u200b\u200bohjelmointi- ja merkint\u00e4kieli\u00e4, ja yhteis\u00f6n rakentamat ilmaiset ylev\u00e4t tekstieditorilaajennukset<\/strong> ovat nostaneet sen toiminnallisuuden uudelle tasolle.\n<\/p>\n

\n Monet kehitt\u00e4j\u00e4t pit\u00e4v\u00e4t kiinni t\u00e4st\u00e4 editorista laajan laajennusvaraston vuoksi. T\u00e4ss\u00e4 artikkelissa keskitymme joihinkin laajennuksiin, joista on eniten hy\u00f6ty\u00e4 JavaScript-kehitt\u00e4jille.\n<\/p>\n

\n Nukkaaminen\n<\/p>\n

\n Linting-ty\u00f6kalut auttavat kehitt\u00e4ji\u00e4 havaitsemaan virheet, syntaktiset erot ja mahdolliset ongelmat. Sen avulla voidaan my\u00f6s varmistaa, ett\u00e4 projekti vastaa tietty\u00e4 koodausohjetta.\n<\/p>\n

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

\n Se tukee Sublime Text 3 -versiota ja tarjoaa k\u00e4ytt\u00f6liittym\u00e4n ESLintiin<\/a> ”JavaScript”-syntaksin k\u00e4ytt\u00e4miseen. SublimeLinter 3, Node.js, npm ja eslint ovat t\u00e4m\u00e4n laajennuksen asennuksen edellytys. Se sis\u00e4lt\u00e4\u00e4 lukuisia s\u00e4\u00e4nt\u00f6j\u00e4 ja vaihtoehtoja, joita voidaan my\u00f6s muokata. Sinulle annetaan t\u00e4sm\u00e4llinen vaihtoehto kirjoittaa asetustiedostoon, jotta kaikki varoitukset ja virheet voidaan sammuttaa. Yksi t\u00e4rke\u00e4 asia, joka on huomioitava t\u00e4ss\u00e4, on, ett\u00e4 t\u00e4m\u00e4 laajennus on ainoa, joka tukee JSX:\u00e4\u00e4 ja ES6: n tuki on paljon enemm\u00e4n ylivoimainen muihin laajennuksiin verrattuna.\n<\/p>\n

\n K\u00e4ytt\u00f6<\/strong>: SublimeLinter-kokoonpanosta riippuen koodia viivet\u00e4\u00e4n muokkauksen tai tallennuksen aikana. T\u00e4m\u00e4 voidaan m\u00e4\u00e4ritt\u00e4\u00e4 Choose Lint Mode<\/code>komennolla.\n<\/p>\n

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

\n JSHint Gutter -laajennus on yhteensopiva sek\u00e4 Sublime Text 2:n ett\u00e4 3:n kanssa. Sen avulla kehitt\u00e4j\u00e4t voivat tarkistaa JavaScript-koodin hirvitt\u00e4vien virheiden ja koodausk\u00e4yt\u00e4nt\u00f6jen varalta. T\u00e4m\u00e4 laajennus voidaan my\u00f6s m\u00e4\u00e4ritt\u00e4\u00e4 n\u00e4ytt\u00e4m\u00e4\u00e4n vihjeit\u00e4 kourussa ja toimimaan sujuvasti projektikohtaisten .jshintrc-tiedostojen kanssa. Se luottaa JSHintiin, JSLintin haaraan. Koska linteri on kirjoitettu JavaScriptill\u00e4, Node.js:n on tulkittava JavaScript-koodia selaimen ulkopuolella.\n<\/p>\n

\n K\u00e4ytt\u00f6<\/strong>: Ctrl+alt+J<\/code>Windowsille tai Cmd+Option+J<\/code>jos k\u00e4yt\u00e4t Macia. Voit my\u00f6s napsauttaa hiiren kakkospainikkeella, valita JSHint ja napsauttaa Lint Code<\/code>. Toinen tapa on avata JavaScript-tiedosto, avata konsoli kohdassa Sublime Text from View, sitten Show Console ja kirjoittaa view.run_command(\"jshint\")<\/code>. T\u00e4t\u00e4 varten on suositeltavaa m\u00e4\u00e4ritt\u00e4\u00e4 oma n\u00e4pp\u00e4inyhdistelm\u00e4 menem\u00e4ll\u00e4 kohtaan Preferences -> Key Bindings \u2013 User ja lis\u00e4\u00e4m\u00e4ll\u00e4 komento, kuten { \"keys\": [\"ctrl+shift+j\"], \"command\": \"jshint\" }<\/code>kyseisess\u00e4 taulukossa.\n<\/p>\n

\n Muotoilu
\n<\/h3>\n

\n Muotoiluty\u00f6kaluja k\u00e4ytet\u00e4\u00e4n koodilohkojen kaunistamiseen ja niiden muotoiluun, jotta ne olisivat luettavampia.\n<\/p>\n

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

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

\n T\u00e4m\u00e4 laajennus tukee molempia Sublime Textin versioita ja muotoilee JavaScript-koodin automaattisesti tietyn tyylin mukaan. Kehitt\u00e4j\u00e4n ei tarvitse lukea varoituksia ja korjata muotoiluongelmaa manuaalisesti. In voidaan asentaa paketinhallinnan kautta valitsemalla jsfmt<\/code>pudotusvalikosta.\n<\/p>\n

\n K\u00e4ytt\u00f6<\/strong>: Projektikohtainen .jsfmtrc-tiedosto voidaan sijoittaa projektin juurihakemistoon m\u00e4\u00e4rityksi\u00e4 varten. Siihen p\u00e4\u00e4see seuraavaa polkua pitkin: Preferences -> Package Settings -> Sublime JSFMT<\/code>. T\u00e4m\u00e4n lis\u00e4ksi on s\u00e4\u00e4nn\u00f6s n\u00e4pp\u00e4imist\u00f6n pikan\u00e4pp\u00e4imen m\u00e4\u00e4ritt\u00e4misest\u00e4 siirtym\u00e4ll\u00e4 kohtaan Asetukset -> N\u00e4pp\u00e4insidokset – K\u00e4ytt\u00e4j\u00e4 ja lis\u00e4\u00e4m\u00e4ll\u00e4 { \"keys\": [\"ctrl+q\"], \"command\": \"format_javascript\" }<\/code>joukkoon.\n<\/p>\n

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

\n Se tukee molempia Sublime Text -versioita. T\u00e4m\u00e4 JavaScript-muotoilulaajennus k\u00e4ytt\u00e4\u00e4 taustalla jsbeautifierin<\/a> komentorivimuotoilua koko js:n, json-tiedoston tai vain tiedoston valitun osan muotoiluun. Projektikohtaiset asetukset voidaan tehd\u00e4 my\u00f6s .jsbeautifyrc-tiedoston asetuksilla. T\u00e4m\u00e4n lis\u00e4ksi v\u00e4lily\u00f6nnit ja muotoilutyylit ovat my\u00f6s muokattavissa.\n<\/p>\n

\n K\u00e4ytt\u00f6<\/strong>: Oletusn\u00e4pp\u00e4insidonta on ctrl+alt+f<\/code>Windowsille ja cmd+option+f<\/code>Macille. Plugin k\u00e4ytt\u00e4\u00e4 sarkain-\/sisennysasetuksia, jotka on m\u00e4\u00e4ritetty vakio- translate_tabs_to_spaces<\/code>ja tab_size<\/code>ylivertaisilla asetuksilla.\n<\/p>\n

\n Koodianalyysi
\n<\/h3>\n

\n N\u00e4m\u00e4 ovat koodin p\u00e4\u00e4ttelykoneita, joita k\u00e4ytet\u00e4\u00e4n kehitysprosessin nopeuttamiseen tarjoamalla koodin automaattista t\u00e4ydennyst\u00e4, funktion argumenttivinkkej\u00e4 jne.\n<\/p>\n

\n Tiira Sublimelle<\/a>
\n<\/h5>\n

\n T\u00e4m\u00e4 JavaScriptin koodianalyysilaajennus on kehitetty integroitumaan koodieditorien kanssa \u00e4lyk\u00e4st\u00e4 JavaScript-muokkausta varten. Siin\u00e4 on joitain hienoja ominaisuuksia, kuten:\n<\/p>\n