Sublime Text Plugins JavaScript-kehittäjille

Sublime tekstieditori on melko tuttu nimi kehittäjäyhteisössä (sekä aloittelijoille että ammattilaisille). Se on kehitetty eri alustojen tuella lähdekoodin ja tekstin muokkaamiseen.

Vaikka nykyinen versio (Sublime text 3) on beta-vaiheessa, se on nopeampi kuin versio 2 ja sisältää runsaasti toimintoja. Se tukee natiivisti monenlaisia ​​ohjelmointi- ja merkintäkieliä, ja yhteisön rakentamat ilmaiset ylevät tekstieditorilaajennukset ovat nostaneet sen toiminnallisuuden uudelle tasolle.

Monet kehittäjät pitävät kiinni tästä editorista laajan laajennusvaraston vuoksi. Tässä artikkelissa keskitymme joihinkin laajennuksiin, joista on eniten hyötyä JavaScript-kehittäjille.

Nukkaaminen

Linting-työkalut auttavat kehittäjiä havaitsemaan virheet, syntaktiset erot ja mahdolliset ongelmat. Sen avulla voidaan myös varmistaa, että projekti vastaa tiettyä koodausohjetta.

SublimeLinter-lintt

Se tukee Sublime Text 3 -versiota ja tarjoaa käyttöliittymän ESLintiin ”JavaScript”-syntaksin käyttämiseen. SublimeLinter 3, Node.js, npm ja eslint ovat tämän laajennuksen asennuksen edellytys. Se sisältää lukuisia sääntöjä ja vaihtoehtoja, joita voidaan myös muokata. Sinulle annetaan täsmällinen vaihtoehto kirjoittaa asetustiedostoon, jotta kaikki varoitukset ja virheet voidaan sammuttaa. Yksi tärkeä asia, joka on huomioitava tässä, on, että tämä laajennus on ainoa, joka tukee JSX:ää ja ES6: n tuki on paljon enemmän ylivoimainen muihin laajennuksiin verrattuna.

Käyttö: SublimeLinter-kokoonpanosta riippuen koodia viivetään muokkauksen tai tallennuksen aikana. Tämä voidaan määrittää Choose Lint Modekomennolla.

Sublime-JSHint

JSHint Gutter -laajennus on yhteensopiva sekä Sublime Text 2:n että 3:n kanssa. Sen avulla kehittäjät voivat tarkistaa JavaScript-koodin hirvittävien virheiden ja koodauskäytäntöjen varalta. Tämä laajennus voidaan myös määrittää näyttämään vihjeitä kourussa ja toimimaan sujuvasti projektikohtaisten .jshintrc-tiedostojen kanssa. Se luottaa JSHintiin, JSLintin haaraan. Koska linteri on kirjoitettu JavaScriptillä, Node.js:n on tulkittava JavaScript-koodia selaimen ulkopuolella.

Käyttö: Ctrl+alt+JWindowsille tai Cmd+Option+Jjos käytät Macia. Voit myös napsauttaa hiiren kakkospainikkeella, valita JSHint ja napsauttaa Lint Code. Toinen tapa on avata JavaScript-tiedosto, avata konsoli kohdassa Sublime Text from View, sitten Show Console ja kirjoittaa view.run_command("jshint"). Tätä varten on suositeltavaa määrittää oma näppäinyhdistelmä menemällä kohtaan Preferences -> Key Bindings – User ja lisäämällä komento, kuten { "keys": ["ctrl+shift+j"], "command": "jshint" }kyseisessä taulukossa.

Muotoilu

Muotoilutyökaluja käytetään koodilohkojen kaunistamiseen ja niiden muotoiluun, jotta ne olisivat luettavampia.

Sublime-jsfmt

Tämä laajennus tukee molempia Sublime Textin versioita ja muotoilee JavaScript-koodin automaattisesti tietyn tyylin mukaan. Kehittäjän ei tarvitse lukea varoituksia ja korjata muotoiluongelmaa manuaalisesti. In voidaan asentaa paketinhallinnan kautta valitsemalla jsfmtpudotusvalikosta.

Käyttö: Projektikohtainen .jsfmtrc-tiedosto voidaan sijoittaa projektin juurihakemistoon määrityksiä varten. Siihen pääsee seuraavaa polkua pitkin: Preferences -> Package Settings -> Sublime JSFMT. Tämän lisäksi on säännös näppäimistön pikanäppäimen määrittämisestä siirtymällä kohtaan Asetukset -> Näppäinsidokset – Käyttäjä ja lisäämällä { "keys": ["ctrl+q"], "command": "format_javascript" }joukkoon.

JsFormat

Se tukee molempia Sublime Text -versioita. Tämä JavaScript-muotoilulaajennus käyttää taustalla jsbeautifierin komentorivimuotoilua koko js:n, json-tiedoston tai vain tiedoston valitun osan muotoiluun. Projektikohtaiset asetukset voidaan tehdä myös .jsbeautifyrc-tiedoston asetuksilla. Tämän lisäksi välilyönnit ja muotoilutyylit ovat myös muokattavissa.

Käyttö: Oletusnäppäinsidonta on ctrl+alt+fWindowsille ja cmd+option+fMacille. Plugin käyttää sarkain-/sisennysasetuksia, jotka on määritetty vakio- translate_tabs_to_spacesja tab_sizeylivertaisilla asetuksilla.

Koodianalyysi

Nämä ovat koodin päättelykoneita, joita käytetään kehitysprosessin nopeuttamiseen tarjoamalla koodin automaattista täydennystä, funktion argumenttivinkkejä jne.

Tiira Sublimelle

Tämä JavaScriptin koodianalyysilaajennus on kehitetty integroitumaan koodieditorien kanssa älykästä JavaScript-muokkausta varten. Siinä on joitain hienoja ominaisuuksia, kuten:

• Muuttujien ja ominaisuuksien automaattinen täydennys
• Funktioargumenttivinkkejä
• Lausekkeen tyypin kysely
• Automaattinen refaktorointi

Sinun on varmistettava, että Node.js ja npm on asennettu, ennen kuin jatkat tämän laajennuksen asentamista.

Käyttö: Käytä yksinkertaisesti alt+.siirtyäksesi sen asian määritelmään, johon kohdistin osoittaa, ja alt+,hypätäksesi takaisin kohtaan, jossa olit edellistä alt+.komentoa suoritettaessa. Lopuksi alt+spacevalitaan kaikki viittaukset tiettyyn muuttujaan nykyisessä tiedostossa.

Syntaksin korostus

Tässä osiossa käydään läpi syntaksin korostuslaajennus.

JavaScriptSeuraava

Tämä laajennus on loistava JavaScript-syntaksin korostus. Sen lisäksi, että se parantaa ES5:n syntaksin korostusta, se tukee myös uutta ES6-syntaksia, kuten moduuleja, ytimekkäitä menetelmiä, nuolifunktioita, luokkia ja generaattoreita. Se voidaan asentaa Package Controlvalitsemalla JavaScript Nextpudotusvalikosta.

Käyttö: Jos haluat käyttää tätä laajennusta yksittäiselle JavaScript-tiedostolle, voit muuttaa asetusta view -> syntax -> JavaScriptNext.Jos haluat asettaa tämän oletusarvoiseksi JavaScript-syntaksiksi, avaa JavaScript-tiedosto ja valitse View -> Syntax -> Open all with current extension as... -> JavascriptNext. Värimallia voidaan muuttaa myös valitsemalla yksi valikosta Preferences -> Color Scheme -> JavaScriptNext.

Dokumentointi

Nyt tarkastelemme laajennusta, joka tekee koodikommenttien ja -dokumenttien kirjoittamisesta melko helppoa.

sublime-jsdocs

DocBlockr-laajennus tukee sekä Sublime text 2:ta että 3:a JavaScriptille, mukaan lukien ES6-spesifikaatiot. Se voidaan asentaa yksinkertaisesti valitsemalla DocBlockr kohdassa package control. Tämä laajennus on hyvin konfiguroitavissa, ja sen avulla voit automaattisesti täydentää kommentteja, laajentaa kommentteja, koristella kommentteja, lisätä muuttujiin ja toimintoihin liittyviä asiakirjoja.

Käyttö: Kirjoita ja /**ja paina Enter tai sarkain luodaksesi uuden rivin ja sulkeaksesi kommentin. Kun kirjoitat funktion dokumentaatiota, näet, että se yrittää tehdä älykkään arvauksen palautusarvosta ja muuttujan tapauksessa se yrittää määrittää muuttujan tyypin nimestään.

Lisäosat JavaScript-kirjastoille

Voit asentaa laajennuksia joihinkin suosittuihin JavaScript-kirjastoihin, kuten AngularJS ja jQuery. Lisäksi jotkin laajennukset auttavat sinua nopeuttamaan kehitysprosessia tarjoamalla koodinpätkiä. Esimerkiksi JQuery snippet -laajennus voidaan asentaa jQueryn kehittämiseen.

Johtopäätös

Tässä artikkelissa käsittelimme joitain hyödyllisiä laajennuksia JavaScript-kehittäjille. Voit vapaasti jakaa muut kätevät laajennukset kommenttiosiossa ja auttaa kehittäjäyhteisöä.