Sublime tekstplugins for JavaScript-utviklere

Sublime tekstredigerer er et ganske kjent navn blant utviklerfellesskapet (både nybegynnere og profesjonelle). Den er utviklet med støtte på tvers av plattformer for redigering av kildekode og tekst.

Selv om gjeldende versjon (Sublimtekst 3) er i betastadium, er den raskere enn versjon 2 og kommer med massevis av funksjonalitet. Den støtter naturlig et bredt spekter av programmerings- og markeringsspråk, og fellesskapsbygde gratis sublime tekstredigeringsprogram har tatt funksjonaliteten til en ny høyde.

Mange utviklere holder seg til denne editoren på grunn av et stort lager av plugins. I denne artikkelen vil vi fokusere på noen av pluginene som er mest nyttige for JavaScript-utviklere.

Linting

Linting-verktøy hjelper utviklere med å oppdage feil, syntaktiske avvik og potensielle problemer. Den kan også brukes til å sikre at prosjektet samsvarer med en bestemt koderetningslinje.

SublimeLinter-eslint

Den støtter Sublime Text 3-versjonen og gir et grensesnitt til ESLint for å operere med filer som har «JavaScript»-syntaks. SublimeLinter 3, Node.js, npm og eslint er forutsetningen for å installere denne plugin-en. Den omfatter en mengde regler med alternativer for også å tilpasse dem. Nøyaktig alternativ vil bli gitt til deg for å skrive inn i konfigurasjonsfilen for å slå av hver advarsel og feil. En viktig ting å merke seg her er at denne plugin er den eneste som støtter JSX og støtte for ES6 er langt mer overlegen i forhold til andre plugins.

Bruk: Avhengig av SublimeLinter-konfigurasjonen, vil koden være lined under redigering eller lagring. Dette kan konfigureres ved å bruke Choose Lint Modekommandoen.

Sublime-JSHint

JSHint Gutter-plugin er kompatibel med både Sublime Text 2 og 3. Lar utviklere sjekke JavaScript-koden for fryktelige feil og kodekonvensjoner. Denne plugin-en kan også konfigureres til å vise hint i takrennen og fungere problemfritt med prosjektspesifikke .jshintrc-filer. Den er avhengig av JSHint, en gaffel av JSLint. Siden linter er skrevet i JavaScript, er Node.js pålagt å tolke JavaScript-kode utenfor nettleseren.

Bruk: Ctrl+alt+Jfor Windows eller Cmd+Option+Jhvis du bruker en Mac. Du kan også høyreklikke, velge JSHint og klikke på Lint Code. En annen måte er å åpne en JavaScript-fil, åpne konsollen i Sublime Text from View, deretter Show Console, og skriv inn view.run_command("jshint"). Det anbefales å sette opp en egen nøkkelkombinasjon for dette ved å gå til Innstillinger -> Tastebindinger – Bruker, og legge til en kommando som { "keys": ["ctrl+shift+j"], "command": "jshint" }i den matrisen.

Formatering

Formateringsverktøy brukes til å forskjønne kodeblokkene og formatere dem for å gjøre dem mer lesbare.

Sublime-jsfmt

Dette pluginet støtter begge versjonene av Sublime Text og formaterer automatisk JavaScript-kode i henhold til en bestemt stil. Utvikleren trenger ikke å lese advarsler og fikse formateringsproblemet manuelt. In kan installeres via pakkebehandlingen ved å velge jsfmti rullegardinmenyen.

Bruk: Prosjektspesifikk .jsfmtrc-fil kan plasseres i rotkatalogen til prosjektet for konfigurasjoner. Den kan nås via følgende sti: Preferences -> Package Settings -> Sublime JSFMT. Bortsett fra dette, er det en bestemmelse for å sette opp tastatursnarvei ved å gå til Innstillinger -> Tastebindinger – Bruker og legge til { "keys": ["ctrl+q"], "command": "format_javascript" }i arrayen.

JsFormat

Den har støtte for begge versjonene av Sublime Text. Denne JavaScript-formateringspluginen bruker kommandolinjeformatering fra jsbeautifier i bakgrunnen for å formatere hele js-, json-filen eller bare den valgte delen av en fil. Prosjektspesifikk konfigurasjon kan også gjøres med .jsbeautifyrc-filinnstillinger. Bortsett fra dette, kan mellomrom og formateringsstiler også tilpasses.

Bruk: Standard nøkkelbinding er ctrl+alt+ffor Windows og cmd+option+fMac. Plugin bruker bruker tabulator/innrykk innstillinger konfigurert med standard translate_tabs_to_spacesog tab_sizesublime innstillinger.

Kodeanalyse

Dette er kodeinferensmotorene som brukes for å fremskynde utviklingsprosessen ved å gi kode autofullføring, funksjonsargument hint, etc.

Tern for Sublime

Denne kodeanalyse-pluginen for JavaScript er utviklet for å integreres med koderedigerere for intelligent JavaScript-redigering. Den kommer med noen smarte funksjoner som:

• Autofullføring på variabler og egenskaper
• Funksjonsargument hint
• Spørre typen av et uttrykk
• Automatisk refaktorering

Du må sørge for at Node.js og npm er installert før du fortsetter med å installere denne plugin.

Bruk: Bare bruk alt+.for å hoppe til definisjonen av tingen som markøren peker på og alt+,for å hoppe tilbake til der du var da du utførte forrige alt+.kommando. Til slutt, alt+spacefor å velge alle referanser til en bestemt variabel i gjeldende fil.

Syntaksutheving

I denne delen går vi gjennom en plugin for syntaksutheving.

JavaScriptNeste

Denne plugin-en er en ypperlig JavaScript-syntaksuthever. Bortsett fra å forbedre syntaks-høydepunktet for ES5, støtter den også ny ES6-syntaks som moduler, kortfattede metoder, pilfunksjoner, klasser og generatorer. Den kan installeres via Package Controlved å velge JavaScript Nextfra rullegardinmenyen.

Bruk: For å bruke denne plugin-en for en individuell JavaScript-fil, kan du endre innstillingen i view -> syntax -> JavaScriptNext.For å angi dette som standard JavaScript-syntaks, åpne en javascript-fil og velg View -> Syntax -> Open all with current extension as... -> JavascriptNext. Fargeskjemaet kan også endres ved å velge ett fra Preferences -> Color Scheme -> JavaScriptNext.

Dokumentasjon

Nå skal vi sjekke ut en plugin som gjør det ganske enkelt å skrive kodekommentarer og dokumentasjon.

sublime-jsdocs

DocBlockr-plugin støtter både Sublime text 2 og 3 for JavaScript inkludert ES6-spesifikasjoner. Den kan installeres via ved ganske enkelt å velge DocBlockr i package control. Denne plugin er svært konfigurerbar og lar deg automatisk fullføre kommentarer, utvide kommentarer, dekorere kommentarer, legge til dokumentasjon knyttet til variabler og funksjoner.

Bruk: Skriv og /**og trykk enter eller tabulator for å opprette ny linje og lukke kommentaren. Mens du skriver dokumentasjon for funksjon, vil du se at den prøver å gjøre intelligent gjetning om returverdien, og i tilfelle en variabel prøver den å bestemme typen variabel ut fra navnet.

Plugins for JavaScript-biblioteker

Du kan installere plugins for noen av de populære JavaScript-bibliotekene som AngularJS og jQuery. Noen plugins hjelper deg også med å fremskynde utviklingsprosessen ved å gi kodebiter. For eksempel kan JQuery snippet plugin installeres for jQuery utvikling.

Konklusjon

I denne artikkelen dekket vi noen av de nyttige pluginene for JavaScript-utviklere. Del gjerne den andre praktiske plugin-en i kommentarfeltet og hjelp utviklerfellesskapet.