Sublim Text 2 Första steget

På mindre än ett år har Sublime Text 2-kodredigeraren, som är tillgänglig för Mac, Windows och Linux, höjt sig till att bli den redaktör som valts för ett stort antal utvecklare. Hurså? Tja, det är en sofistikerad redaktör med snabb snabb hastighet, en otroligt levande plugin community, enkel konfiguration, Vintage (Vim) läge, flera markörer - listan fortsätter.

Om du ännu inte har gjort omkopplaren, av någon viss lojalitet till din nuvarande redaktör, ge mig tjugo minuter, och jag kommer att övertyga dig!

Observera att denna artikel, för convenienccsse och läsbarhet, endast kommer att använda de Mac-specifika tangentbordsbindningarna. Hänvisa här till motsvarande Windows / Linux-versioner.


1 - Flera markörer

Låt oss börja med den funktion som kommer att blåsa ditt sinne: flera markörer. En försiktighetsåtgärd: När du upplever flexibiliteten att ha flera pekare på fingertipset kommer du inte att kunna gå tillbaka till den gamla vägen.

Föreställ dig att du måste ändra varje förekomst av ordet, myMethod, till newMethod. Traditionellt kan du utföra en sökning och ersätta; Men i Sublime är det mycket lättare. Placera bara markören inom ordet och skriv Kontroll + Kommando + g. Med denna knapptryckning ensam har du nu valt varje förekomst av myMethod, och har flera pekare på fingertopparna. Ändra texten och se alla uppdatera! Käke droppar, rätt?

Alternativt kan du trycka på Kommando + d upprepade gånger för att gradvis välja varje ytterligare förekomst av ordet.


2 - Kommandopaletten

Sublimas kommandopalett är en gudsändning för dem som föredrar att röra musen så lite som möjligt (mer om det kort). Den här paletten låter dig springa otaliga kommandon, till exempel ändra syntaxtypen för det aktuella dokumentet, installera plugins och söka efter utdrag, för att nämna några.

Till exempel ändra den aktuella syntaxmarkeringen för det aktuella dokumentet, t.ex. HTML, till CSS, tryck på Kommando + Skift + sid, och skriv "css." Alternativet "Set Syntax: CSS" ska nu visas. Slå in och du är klar! Observera att du kan utnyttja fuzzy sökning här; som sådan behöver du inte skriva hela ordet.

Minns detta tangentbordskommando och använd det ofta.


3 - Paketkontroll

Package Control är en kraftfull pakethanterare som gör att du kan, direkt från kodredigeraren, installera paket (eller plugin) som du kan tänka dig. Behöver du Zen kodning? Installera den på tre sekunder. Vad sägs om Prefixr-support eller CoffeeScript-syntaxutmärkning? Det tar bara några tangenttryckningar att installera. Inte längre scouring webben för rätt plugin, och sedan undersöka var du ska installera det.

För att installera Paketkontroll, besök Will Bonds webbplats, kopiera koden med kod som tillhandahålls, återgå till Sublime Text, tryck på Kontrollera +'och klistra in snippet och starta om det. Du är klar!

Låt oss installera Zen Coding. Öppna kommandopaletten (Kommando + Skift + sid) och skriv "installera". När du trycker på Stiga på, Sublim kommer att ge en lista över alla de olika plugins som finns att installera. Söka efter Zen att ta upp "Zen Coding" och träffa Stiga på att installera det. Yep - det är så enkelt! För att bekräfta att det fungerade, skriv i en tom HTML-fil ul> li * 4 + Tab. Tada!


4 - TextMate-teman

Det är troligt att du använder Mac-läsare för närvarande TextMate. Lyckligtvis erbjuder Sublime Text fullt stöd för TextMate-teman. Det betyder att ja, ditt anpassade färgschema kan migreras till Sublime Text utan en uns konfiguration. Helt enkelt släpp det i din "Paket" katalog som det är.


5 - Nätverk + Hämta

Hur många gånger har du hämtat manuellt, till exempel HTML5 Boilerplate eller jQuery-biblioteket? Det är slöseri skulle det inte vara lättare om vi kunde köra en snabb knapptryckning och direkt ladda ner dem till det aktuella projektet? Självklart skulle det! Nettuts + Hämta är lösningen.

Installera det genom Paketstyrning och sök sedan efter "Hämta: Hantera fjärrfiler." Detta visar två objekt för hämtning av enstaka filer och paket, respektive; två har gjorts för dig.

För att testa det, skapa en ny fil, sök efter "Hämta" i kommandot paletten, välj "Enkel fil -> jQuery" och se den senaste versionen av biblioteket omedelbart läggas till. Försök sedan att installera ett helt paket och bli förvånad.


6 - Goto Symbol

Besök någon klass eller lista över funktioner som du har tillgång till, skriv Kommando + r, och du kommer att presenteras med en lista över alla symboler på sidan. Lägg märke till hur vi använder @ symbol för att visa metoderna.

Som exempel, om du tittar på en PHP-klass, Kommando + r kommer att lista alla metodnamn. Du kan sedan använda fuzzy sökning för att direkt flytta till önskad metod.

När vi kombinerar detta med Sublimes omkopplingsmöjligheter för direktfil, blir det här särskilt användbart. Föreställ dig att du behöver redigera style.css, och speciellt den .låda klass inom den filen typ Kommando + sid, stil @ box, och du är där!


7 - Prefixr

Prefixr är en webbtjänst som automatiskt tillämpar de nödvändiga CSS-leverantörs prefixen i dina stylesheets, så att du inte behöver komma ihåg vilka leverantörer som ska använda för en viss CSS3-egenskap. Prefixr-plugin ger denna funktion direkt till din editor!

När du har installerat pluginet genom Paketkontroll väljer du innehållet i ditt stilark och utlöser pluginet genom att skriva Kontroll + Kommando + x. Voila! Din fil har omedelbart uppdaterats. Använd den officiella syntaxen och låt Prefixr räkna ut de leverantörsspecifika kraven.


8 - Avancerad ny fil

Ju mindre du rör musen, desto bättre. Tyvärr kan det vara lite längre tid att skapa en ny fil i Sublime Text än vi skulle vilja. Programmet "Advanced New File", som, som alltid, kan installeras via Paketkontroll, åtgärdar detta.

När du har installerat, skriv Kommando + Alternativ + n, och du får se en ny panel dyka upp längst ner.

Vad som är fantastiskt om det här pluginet är att du också kan skapa filer i mappar som ännu inte finns. Kanske behöver du skapa en ny scripts.js fil, men du har inte skapat js katalogen. Det är okej; pluginet vet att man skapar mappen om den inte finns. Skriv helt hela sökvägen till önskad ny fil, och du är bra att gå.

Låt oss skapa en ny jQuery.js-fil inom en js / libs katalog som ännu inte har skapats Alternativ + Kommando + n, js / libs / jquery.js, spara, Kommando + Skift + sid, "Hämta", "Enkel fil", "jQuery." Vi har nu, i sekunder, skapat ett katalogtree och laddat ner den senaste versionen av biblioteket.


9 - Vintage Mode

Om de vill göra det, kan Vim-användare enkelt migrera till Sublime Text tack vare det valfria vintage-läget. För att aktivera den, redigera filen "Standardinställningar" i menyn Inställningar, bläddra till botten och ta bort "Vintage" -objektet från ignored_packages array.

Nu trycker du på Fly, och du är i kommandoläge! Du hittar att Sublime's Vi-nyckelbindningar är ganska korrekta!


10 - Native Snippets

Varje utdrag i Sublime Text hänvisar till en enda fil, och tillåter flikavslutning och standardvärden. För att skapa ett nytt utdrag, välj "Verktyg -> Nytt stycke". I den här nya filen kan du, inom tagg, sätt in ditt kodavsnitt. Du har också möjlighet att välja en flikutlösare och ett räckvidd, vilket säkerställer att snippet endast är tillgängligt från en viss filtyp.

Spara filen med en .sublima-kodavsnitt förlängning och testa det!


11 - Versionsversioner

Medan Sublime's inbyggda utdrag verkligen får jobbet, för större utdrag föredrar jag att utnyttja GitHub Gists och versionskontroll.

Börja med att installera "Gist" -programmet via Paketkontroll. Detta ger oss nu en handfull nya alternativ i kommandot Paletten.

När du försöker skapa en ny Gist kommer du att upptäcka att du först måste ange plugin-modulen med dina GitHub-uppgifter. Jag rekommenderar att du skapar ett särskilt konto specifikt för dina utdrag. När du har gjort det, ange behörighetsuppgifterna och försök igen. När du har skapat en handfull utdrag kan du lista dem genom kommandopaletten genom att välja "Gist: Open Gist."

Det bästa är att när du gafflar befintliga snippets via gist.github.com, kommer de automatiskt att vara tillgängliga för dig i Sublime Text - plus, gratis versionskontroll för dina snippets!


12 - Byggsystem

Sublime's build system tillåter oss att tillämpa nyckelbindningar, som kan ledas till externa program, som CoffeeScript, Sass, Grunt och mycket mer. Det betyder att istället för att växla till Terminal för att köra ditt byggkommando kan du uppnå samma sak direkt i redigeraren.

Låt oss använda CoffeeScript som ett exempel, eftersom det är ganska populärt idag. Börja med att skapa en coffeescript.sublime-build filen i din "Paket /" katalog. Därefter klistra in följande kod i:

"cmd": ["kaffe", "- c", "$ fil"], "väljare": "source.coffee", "path": "/ usr / local / bin /"

Medan det finns flera alternativ tillgängliga för oss, håller vi fast vid dessa tre för tillfället. cmd specificerar kommandot som ska utföras, tillsammans med några argument och flaggor. I det här fallet kör vi den aktuella filen genom kommandot CoffeeScript compile. För det andra, väg behövs bara om CoffeeScript inte är installerat i din basväg.

När du har sparat filen kommer en ny valfri vara tillgänglig via "Verktyg -> Byggsystem". Välj "CoffeeScript", och nu när du kör kommandot "build" med Kommando + b, Den nuvarande CoffeeScript-filen kommer att sammanställas!

Addy Osmani har en fantastisk artikel om Sublime Texts byggfunktioner.


13 - Distraktionsfri redigering

Ibland måste vi filtrera bort alla extra fluffar som kommer i vägen för vår kodning. Använd "Distraction Free Mode" för att rensa skärmen, förutom koden. Det här alternativet är tillgängligt via menyn Visa. Välj "Enter Distraction Free Mode," ?? eller använd genvägsgenvägen för Mac, Kontroll + Skift + Kommando + F.


14 - En fågelögd syn

En av Sublime's stand-out-funktioner är det unika sidofältet som erbjuder en fåglaröversikt av den aktuella filen. Detta kan vara oerhört användbart för stora filer, eftersom det tillåter oss att skanna en fil på några sekunder utan att behöva rulla på sidan manuellt.


15 - Flera kolumner

Föredrar du att redigera flera filer i samma fönster? Sublime erbjuder en handfull delade vyer, inklusive rader och kolumner. Bläddra till Visa -> Layout för att se de tillgängliga alternativen och var noga med att memorera tangentbordskommandon, eftersom du ofta använder den här funktionen!


16 - Live CSS-färgning

Live CSS-pluginet är enkelt, men användbart. Det ställer automatiskt in bakgrunden för vilket färgvärde som helst i ditt stilark som det du har angett. Visst är det en liten bekvämlighet, men det kan ändå vara användbart!


17 - Platsinnehavare

Under utveckling, många gånger, har vi ännu inte det slutliga innehållet för en webbapplikation. I dessa fall använder vi vanligtvis platshållartekst och bilder. När man överväger hur ofta vi gör det, skulle det inte vara smart att skapa en handfull platshållareutdrag? Tja, platshållaren plugin gör det här mycket!

Oavsett om du behöver en temporär bild, några "lorem ipsum" stycken eller till och med en definitionslista med dummy text, kommer det här pluginet att vara perfekt för jobbet.


18 - Indragningsguider

En överraskande sällsynt bekvämlighet, som finns i Notepad ++, är indragningsguider. Ibland kan det vara svårt att matcha indryckning utan lite hjälp när du surfar på massiva filer.

Sublime's indentationsguider ger hjälpfulla prickade bilder att fixa detta.


19 - Enkel konfiguration

Sublim text är ibland kritiserad eftersom den inte erbjuder ett prickigt gränssnitt för inställning av konfigurationsalternativ. Ironiskt nog, enligt den här författarens uppfattning, är det faktum att Sublime bokstavligen visar ett redigerbart JavaScript-objekt en av dess största styrkor. Detta gör processen att justera Sublime inställningar exakt till dina behov så enkelt som mänskligt möjligt.

Om du exempelvis vill inaktivera "Indent-riktlinjerna" öppnar du "Standard" -inställningsfilen, söka efter draw_indent_guides (med Kommando + jag) och ställa in dess värde till falsk. Lätt! Var noga med att granska alla tillgängliga inställningar.


20 - Filbyte i millisekunder

Om du fortfarande manuellt hänvisar till sidofältet för att hitta den önskade filen för att växla till, gör du fel. Sublime: s omedelbara filbyte är otroligt, och är snabbare än du någonsin har upplevt i en redaktör.

Typ Kommando + sid för att få fram en lista över alla filer i det aktuella projektet. Du kan nu använda fuzzy search för att välja den fil som du vill byta till. Behöver du en lista över alla JavaScript-filer? Typ .js. Du kommer att märka att när du skriver din sökning, kommer Sublime Text med blixthastighet att byta till den översta filen som matchar din sökfråga.

Det här är den föredragna metoden för att navigera till nya filer. Sidofältet är en sista utväg.


21 - Nyckelbindningar

Sublime ger oss möjlighet att enkelt ställa in nyckelbindningar för att utlösa något kommando. Medan många bindningar redan är inbyggda, kan du ändra dem till dina behov om du vill.

Tänk på bindningen för att flytta en fil till ett annat fönster, när du arbetar med flera kolumner. Som standard skulle vi behöva trycka på Kontroll + Skift + 2; Det kan dock vara lite svårt att komma ihåg. Låt oss istället omforma detta till Alternativ + 2.

Medan vi kan redigera standard nyckelbindningsfilen, är det här en dålig övning, på grund av att någon Sublim uppdatering återställer dina anpassningar. I stället är det bäst att redigera filen för användarnyckelbindningar.

["alt + 1"], "kommando": "move_to_group", "args": "group": 0, "keys": ["alt + 2"], "kommando ":" move_to_group "," args ": " group ": 1, " tangenter ": [" alt + 3 "]," kommando ":" move_to_group "," args ": " group ": 2 , "nycklar": ["alt + 4"], "kommando": "move_to_group", "args": "group": 3]

Oroa dig inte; Om det här ser förvirrande ut, leta reda på standard nyckelbindningsfilen för de inställningar som du behöver ändra och kopiera och klistra in dem i din användarkopplingsfil och uppdatera "nycklarna" i enlighet därmed.


22 - Live Searching

När vi behöver söka i en fil tar vi ofta till att ta fram en "Sök och ersätt" -panel, vilket tar upp tiden. I stället trycker du på Kommando + jag att utföra en levande sökning i den aktuella filen. Du kommer bli förvånad över hur mycket snabbare denna metod är.


23 - Kodflikning

Naturligtvis erbjuder Sublime Text stöd för flervägs kodviktning. Låt oss säga att du arbetar på ett stilark och vill dölja alla egenskaper. antingen välj "Redigera -> Kallviktning -> Vik alla", eller tryck på Kommando + k + 1.

Trevlig! För att öppna alla block, tryck på Kommando + k + j.

Nyckelbindningarna kan ta lite tid att memorera, men det är värt ansträngningen.


24 - Utvecklingsversion

Glöm inte att Sublime Text 2 utvecklas aktivt. Jag uppmanar dig att använda utvecklingsversionen, tillgänglig på sublimetext.com/dev. Oroa dig inte; även om de är utvecklingsversioner, kommer du sällan att stöta på några buggar.


25 - Instant Alignment

Alignment-plugin, av Will Bond, kommer omedelbart att justera din kod för att skapa en vackerare kod. Vanligtvis brukar det användas för att säkerställa att lika tecken, =, för variabla uppdrag line up.

Installerad via Paketstyrning kan Alignment plugin aktiveras genom att välja ett lämpligt kodstycke och trycka på Kontroll + Skift + a.

I själva verket kommer plugin att översätta:

var först = "Joe"; var sist = 'svart'; var job_title = 'Death'; var status = 'På semester';

In i:

var först = "Joe"; var sist = 'svart'; var job_title = 'Death'; var status = 'På semester';

Enkelt, men användbart!


Slutsatser

Tydligen finns det många fler hemligheter och tricks i Sublime Text 2 men den här listan kommer att komma igång! Om du vill lära dig mer om denna fantastiska redaktör, var noga med att hänvisa till vår kommande kurs: "Perfect Workflow in Sublime Text 2."