Ülevad tekstipluginad JavaScripti arendajatele

Sublime tekstiredaktor on arendajate kogukonna (nii algajate kui ka professionaalide) seas üsna tuttav nimi. See on välja töötatud platvormidevahelise toega lähtekoodi ja teksti redigeerimiseks.

Kuigi praegune versioon (Sublime text 3) on beetafaasis, on see kiirem kui versioon 2 ja sisaldab palju funktsioone. See toetab algselt laia valikut programmeerimis- ja märgistuskeeli ning kogukonna loodud tasuta ülevad tekstiredaktori pistikprogrammid on viinud selle funktsionaalsuse uuele tasemele.

Paljud arendajad järgivad seda redaktorit suure pistikprogrammide hoidla tõttu. Selles artiklis keskendume mõnele pistikprogrammile, mis on JavaScripti arendajatele kõige kasulikumad.

Linting

Lintingtööriistad aitavad arendajatel tuvastada vigu, süntaktilisi lahknevusi ja võimalikke probleeme. Samuti saab selle abil veenduda, et projekt vastab teatud kodeerimisjuhistele.

SublimeLinter-eslint

See toetab versiooni Sublime Text 3 ja annab ESLintile liidese JavaScripti süntaksiga failidega töötamiseks. Selle pistikprogrammi installimise eeltingimuseks on SublimeLinter 3, Node.js, npm ja eslint. See hõlmab hulgaliselt reegleid ja ka kohandamisvõimalusi Iga hoiatuse ja vea väljalülitamiseks antakse teile täpne võimalus konfiguratsioonifaili kirjutada. Siinkohal on oluline märkida, et see pistikprogramm on ainus, mis toetab JSX-i ja ES6 tugi on palju suurem teiste pistikprogrammidega võrreldes parem.

Kasutamine: olenevalt SublimeLinteri konfiguratsioonist rikutakse koodi redigeerimise või salvestamise ajal. Seda saab konfigureerida Choose Lint Modekäsu abil.

Sublime-JSHint

JSHint Gutteri pistikprogramm ühildub nii Sublime Text 2 kui ka 3-ga. Võimaldab arendajatel kontrollida JavaScripti koodi kohutavate vigade ja kodeerimisreeglitega. Seda pistikprogrammi saab ka seadistada nii, et see näitaks vihjeid vihmaveerennides ja töötaks sujuvalt projektispetsiifiliste .jshintrc-failidega. See tugineb JSHintile, JSLinti hargile. Kuna linter on kirjutatud JavaScriptis, on Node.js vajalik JavaScripti koodi tõlgendamiseks väljaspool brauserit.

Kasutamine: Ctrl+alt+JWindowsi või Cmd+Option+JMaci jaoks. Võite ka paremklõpsata, valida JSHint ja klõpsata Lint Code. Teine võimalus on avada JavaScripti fail, avada konsool vaates Sublime Text from View, seejärel Show Console ja tippida view.run_command("jshint"). Selleks on soovitatav seadistada oma klahvikombinatsioon, minnes valikusse Eelistused -> Key Bindings – User ja lisades käsu nagu { "keys": ["ctrl+shift+j"], "command": "jshint" }selles massiivis.

Vormindamine

Vormindamistööriistu kasutatakse koodiplokkide kaunistamiseks ja vormindamiseks, et muuta need loetavamaks.

Sublime-jsfmt

See pistikprogramm toetab mõlemat Sublime Text versiooni ja vormindab JavaScripti koodi automaatselt vastavalt konkreetsele stiilile. Arendaja ei pea hoiatusi lugema ja vorminguprobleemi käsitsi lahendama. In saab installida paketihalduri kaudu, valides jsfmtrippmenüüst.

Kasutamine: projektipõhise .jsfmtrc faili saab seadistuste jaoks paigutada projekti juurkataloogi. Sellele pääseb juurde järgmise tee kaudu: Preferences -> Package Settings -> Sublime JSFMT. Peale selle on olemas säte klaviatuuri otsetee seadistamiseks, minnes valikule Eelistused -> Klahvide sidumised – kasutaja ja lisades { "keys": ["ctrl+q"], "command": "format_javascript" }massiivi.

JsFormat

Sellel on mõlema Sublime Text versiooni tugi. See JavaScripti vormindamise pistikprogramm kasutab taustal jsbeautifieri käsurea vormindajat, et vormindada tervet js-i, json-faili või ainult faili valitud osa. Projektipõhise konfiguratsiooni saab teha ka .jsbeautifyrc failiseadete abil. Peale selle saab kohandada ka tühikuid ja vormindamisstiile.

Kasutamine: vaikeklahvide sidumine on ctrl+alt+fWindowsi ja cmd+option+fMaci jaoks. Plugin kasutab tabeldus-/taandeseadeid, mis on konfigureeritud standardsete translate_tabs_to_spacesja tab_sizeülevate sätetega.

Koodi analüüs

Need on koodi järeldamismootorid, mida kasutatakse arendusprotsessi kiirendamiseks, pakkudes koodi automaatset lõpetamist, funktsiooni argumentide vihjeid jne.

Tern Sublime jaoks

See JavaScripti koodianalüüsi pistikprogramm on välja töötatud integreerimiseks koodiredaktoritega intelligentse JavaScripti redigeerimise jaoks. Sellel on mõned vahvad funktsioonid, näiteks:

• Muutujate ja omaduste automaatne täitmine
• Funktsiooniargumendi vihjed
• Avaldise tüübi päring
• Automaatne refaktoreerimine

Enne selle pistikprogrammi installimist peate veenduma, et Node.js ja npm on installitud.

Kasutamine: kasutage lihtsalt alt+.kursoriga osutatava asja määratluse alt+,juurde hüppamiseks ja eelmise alt+.käsu täitmisel tagasi liikumiseks. Lõpuks, alt+spaceet valida praeguses failis kõik viited konkreetsele muutujale.

Süntaksi esiletõstmine

Selles jaotises käsitleme süntaksi esiletõstmise pistikprogrammi.

JavaScriptJärgmine

See pistikprogramm on suurepärane JavaScripti süntaksi esiletõstja. Lisaks ES5 süntaksi esiletõstmise parandamisele toetab see ka uut ES6 süntaksit, nagu moodulid, kokkuvõtlikud meetodid, noolefunktsioonid, klassid ja generaatorid. Selle saab installida rippmenüüst Package Controlvalides .JavaScript Next

Kasutamine: selle pistikprogrammi kasutamiseks üksiku JavaScripti faili jaoks saate muuta sätet jaotises view -> syntax -> JavaScriptNext. Selle määramiseks JavaScripti vaikesüntaksiks avage JavaScripti fail ja seejärel valige View -> Syntax -> Open all with current extension as... -> JavascriptNext. Värviskeemi saab muuta ka, valides ühe hulgast Preferences -> Color Scheme -> JavaScriptNext.

Dokumentatsioon

Nüüd vaatame pistikprogrammi, mis muudab koodi kommentaaride ja dokumentide kirjutamise üsna lihtsaks.

ülev-jsdocs

DocBlockri pistikprogramm toetab JavaScripti jaoks nii Sublime text 2 kui 3, sealhulgas ES6 spetsifikatsioone. Selle saab installida, valides lihtsalt menüüs DocBlockr package control. See pistikprogramm on väga konfigureeritav ja võimaldab teil kommentaare automaatselt täita, kommentaare laiendada, kommentaare kaunistada, lisada muutujate ja funktsioonidega seotud dokumentatsiooni.

Kasutamine: /**uue rea loomiseks ja kommentaari sulgemiseks kirjutage ja vajutage sisestusklahvi või tabeldusklahvi. Funktsiooni dokumentatsiooni kirjutades näete, et see üritab tagastatava väärtuse kohta arukalt aimata ja muutuja puhul proovib selle nime järgi määrata muutuja tüüpi.

JavaScripti teekide pistikprogrammid

Saate installida mõne populaarse JavaScripti teeki, näiteks AngularJS ja jQuery pistikprogramme. Samuti aitavad mõned pistikprogrammid koodilõike pakkudes arendusprotsessi kiirendada. Näiteks saab jQuery arendamiseks installida JQuery jupi plugina.

Järeldus

Selles artiklis käsitlesime mõnda kasulikku JavaScripti arendajatele mõeldud pistikprogrammi. Jagage julgelt mõnda muud käepärast pistikprogrammi kommentaaride jaotises ja aidake arendajate kogukonda.