Sublime text editor är ett ganska bekant namn bland utvecklargemenskapen (både nybörjare och proffs). Den har utvecklats med plattformsoberoende stöd för redigering av källkod och text.

Även om nuvarande version (Sublim text 3) är i beta-stadiet, är den snabbare än version 2 och kommer med massor av funktionalitet. Den stöder inbyggt ett brett utbud av programmerings- och märkningsspråk, och communitybyggda gratis sublima textredigeringsplugins har tagit dess funktionalitet till en ny höjd.

Många utvecklare håller sig till den här editorn på grund av ett stort lager av plugins. I den här artikeln kommer vi att fokusera på några av de plugins som är mest användbara för JavaScript-utvecklare.

Ludd

Linting-verktyg hjälper utvecklare att upptäcka fel, syntaktiska avvikelser och potentiella problem. Den kan också användas för att säkerställa att projektet motsvarar en viss kodningsriktlinje.

SublimeLinter-eslint

Den stöder Sublime Text 3-versionen och tillhandahåller ett gränssnitt till ESLint för att arbeta med filer som har "JavaScript"-syntax. SublimeLinter 3, Node.js, npm och eslint är förutsättningen för att installera detta plugin. Det omfattar en uppsjö av regler med alternativ att även anpassa Exakta alternativ kommer att ges till dig att skriva in i konfigurationsfilen för att stänga av varje varning och fel. En viktig sak att notera här är att denna plugin är den enda som stöder JSX och stöd för ES6 är mycket mer överlägsen i jämförelse med andra plugins.

Användning: Beroende på SublimeLinter-konfigurationen kommer koden att lindras under redigering eller lagring. Detta kan konfigureras genom att använda Choose Lint Modekommandot.

Sublime-JSHint

JSHint Gutter-plugin är kompatibel med både Sublime Text 2 och 3. Tillåter utvecklare att kontrollera JavaScript-kod för fruktansvärda fel och kodningskonventioner. Denna plugin kan också konfigureras för att visa tips i rännstenen och fungera smidigt med projektspecifika .jshintrc-filer. Den förlitar sig på JSHint, en gaffel av JSLint. Eftersom linter är skrivet i JavaScript krävs Node.js för att tolka JavaScript-kod utanför webbläsaren.

Användning: Ctrl+alt+Jför Windows eller Cmd+Option+Jom du använder en Mac. Du kan också högerklicka, välja JSHint och klicka på Lint Code. Ett annat sätt är att öppna en JavaScript-fil, öppna konsolen i Sublime Text from View, sedan Show Console och skriv view.run_command("jshint"). Det rekommenderas att ställa in en egen nyckelkombination för detta genom att gå till Inställningar -> Nyckelbindningar – Användare och lägga till ett kommando som { "keys": ["ctrl+shift+j"], "command": "jshint" }i den arrayen.

Formatering

Formateringsverktyg används för att försköna kodblocken och formatera dem för att göra dem mer läsbara.

Sublime-jsfmt

Denna plugin stöder båda versionerna av Sublime Text och formaterar automatiskt JavaScript-kod enligt en viss stil. Utvecklaren behöver inte läsa varningar och åtgärda formateringsproblemet manuellt. In kan installeras via pakethanteraren genom att välja jsfmti rullgardinsmenyn.

Användning: Projektspecifik .jsfmtrc-fil kan placeras i projektets rotkatalog för konfigurationer. Den kan nås via följande sökväg: Preferences -> Package Settings -> Sublime JSFMT. Bortsett från detta finns det en bestämmelse för att ställa in kortkommandon genom att gå till Inställningar -> Tangentbindningar – Användare och lägga { "keys": ["ctrl+q"], "command": "format_javascript" }till i arrayen.

JsFormat

Den har stöd för båda versionerna av Sublime Text. Detta JavaScript-formateringsplugin använder kommandoradsformaterare från jsbeautifier i bakgrunden för att formatera hela js-, json-filen eller bara den valda delen av en fil. Projektspecifik konfiguration kan också göras med .jsbeautifyrc-filinställningar. Bortsett från detta är blanksteg och formateringsstilar också anpassningsbara.

Användning: Standardnyckelbindningen är ctrl+alt+fför Windows och cmd+option+fpå Mac. Plugin använder använder tab/indrag inställningar konfigurerade med standard translate_tabs_to_spacesoch tab_sizesublima inställningar.

Kodanalys

Dessa är kodinferensmotorerna som används för att påskynda utvecklingsprocessen genom att tillhandahålla kodautokomplettering, funktionsargumenttips, etc.

Tärna för Sublime

Denna kodanalysplugin för JavaScript har utvecklats för att integreras med kodredigerare för intelligent JavaScript-redigering. Den kommer med några fiffiga funktioner som:

Automatisk komplettering av variabler och egenskaper
Funktionsargument tips
Fråga efter typen av ett uttryck
Automatisk omfaktorering

Du måste se till att Node.js och npm är installerade innan du fortsätter att installera detta plugin.

Användning: Använd helt enkelt alt+.för att hoppa till definitionen av den sak som markören pekar på och alt+,för att hoppa tillbaka till där du var när du körde föregående alt+.kommando. Slutligen, alt+spaceför att välja alla referenser till en viss variabel i den aktuella filen.

Syntaxmarkering

I det här avsnittet går vi igenom ett plugin för syntax highlighter.

JavaScriptNästa

Detta plugin är en superb JavaScript-syntaxhighlighter. Förutom att förbättra syntax-highlight för ES5, stöder den också ny ES6-syntax som moduler, kortfattade metoder, pilfunktioner, klasser och generatorer. Det kan installeras via Package Controlgenom att välja JavaScript Nextfrån rullgardinsmenyn.

Användning: För att använda denna plugin för en enskild JavaScript-fil kan du ändra inställningen i. För att view -> syntax -> JavaScriptNextställa in detta som standard JavaScript-syntax, öppna en JavaScript-fil och välj sedan View -> Syntax -> Open all with current extension as... -> JavascriptNext. Färgschemat kan också ändras genom att välja ett från Preferences -> Color Scheme -> JavaScriptNext.

Dokumentation

Nu ska vi kolla in ett plugin som gör det ganska enkelt att skriva kodkommentarer och dokumentation.

sublime-jsdocs

DocBlockr-plugin stöder både Sublime text 2 och 3 för JavaScript inklusive ES6-specifikationer. Det kan installeras via genom att helt enkelt välja DocBlockr i package control. Denna plugin är mycket konfigurerbar och låter dig automatiskt komplettera kommentarer, utöka kommentarer, dekorera kommentarer, lägga till dokumentation som rör variabler och funktioner.

Användning: Skriv och /**och tryck enter eller tab för att skapa ny rad och stänga kommentaren. När du skriver dokumentation för funktion kommer du att se att den försöker göra intelligenta gissningar om returvärdet och i händelse av variabel försöker den bestämma typen av variabel utifrån namnet.

Plugins för JavaScript-bibliotek

Du kan installera plugins för några av de populära JavaScript-biblioteken som AngularJS och jQuery. Vissa plugins hjälper dig också att påskynda utvecklingsprocessen genom att tillhandahålla kodavsnitt. Till exempel kan JQuery snippet plugin installeras för jQuery utveckling.

Slutsats

I den här artikeln täckte vi några av de användbara plugins för JavaScript-utvecklare. Dela gärna det andra praktiska pluginet i kommentarsektionen och hjälp utvecklargemenskapen.