In minder dan een jaar is de Sublime Text 2-code-editor - beschikbaar voor Mac, Windows en Linux - omhoog geschoten naar de redacteur van keuze voor een groot aantal ontwikkelaars. Hoe kan dat? Nou, het is een geavanceerde editor, met razendsnelle snelheid, een ongelooflijk levendige plugin-community, eenvoudige configuratie, Vintage (Vim) -modus, meerdere cursors - de lijst gaat maar door.
Als je de overstap nog moet maken, geef me twintig minuten een gevoel van loyaliteit aan je huidige editor, en ik zal je overtuigen!
Houd er rekening mee dat dit artikel, voor convenienccsse en leesbaarheid, uitsluitend de Mac-specifieke toetsenbordbindingen gebruikt. Raadpleeg hier de equivalente Windows / Linux-versies.
Laten we beginnen met de functie die je in de steek zal laten: meerdere cursors. Een waarschuwing: zodra u de flexibiliteit ervaart van meerdere cursors om uw vingertoppen, kunt u niet meer terug naar de oude manier.
Stel je voor dat je elke keer dat het woord voorkomt moet veranderen, myMethod
, naar newMethod
. Traditioneel kunt u een zoekopdracht uitvoeren en vervangen; In Sublime is dit echter veel eenvoudiger. Plaats eenvoudig de cursor in het woord en typ Control + Command + g
. Met deze toetsaanslag alleen, hebt u nu elk voorkomen van geselecteerd myMethod
, en hebben meerdere cursors om uw vingertoppen. Verander de tekst, en bekijk ze allemaal bijwerken! Jaw dropping, right?
U kunt ook op drukken Command + d
herhaaldelijk om elke extra occurrence van het woord stapsgewijs te selecteren.
Het opdrachtpalet van Sublime is een God-send voor diegenen die er de voorkeur aan geven de muis zo min mogelijk aan te raken (daarover binnenkort meer). Met dit palet kunt u talloze opdrachten uitvoeren, zoals het syntaxistype voor het huidige document wijzigen, plug-ins installeren en naar fragmenten zoeken, om er een paar te noemen.
Als u bijvoorbeeld de huidige syntaxisaccentuering voor het huidige document wilt wijzigen, van bijvoorbeeld HTML naar CSS, drukt u op Command + Shift + p
, en typ "css." De optie "Syntaxis instellen: CSS" zou nu moeten verschijnen. Druk op Enter en je bent klaar! Merk op dat u hier kunt profiteren van fuzzy zoeken; als zodanig hoeft u niet het hele woord te typen.
Onthoud deze toetsenbordopdracht en gebruik hem vaak.
Gecreëerd door Will Bond, is Package Control een krachtige pakketbeheerder waarmee u direct vanuit de codebewerker een pakket (of plug-in) kunt installeren dat u maar kunt bedenken. Zen-codering nodig? Installeer het binnen drie seconden. Hoe zit het met Prefixr-ondersteuning of benadrukken van de markeringen van de CoffeeScript-syntaxis? Er zijn maar een paar toetsaanslagen nodig om in te stellen. Nooit meer zoeken op het web naar de juiste plug-in en vervolgens onderzoeken waar het te installeren is.
Als u Package Control wilt installeren, gaat u naar de website van Will Bond, kopieert u het codefragment, gaat u terug naar de sublieme tekst en drukt u op Controle +
'en plak het fragment in en start het opnieuw. U bent klaar!
Laten we Zen-codering installeren. Open het command palet (Command + Shift + p
) en typ 'install'. Zodra u op drukt invoeren
, Sublime biedt een lijst met alle verschillende plug-ins die kunnen worden geïnstalleerd. Zoeken Zen
om "Zen Coding" naar voren te brengen en te raken invoeren
om het te installeren. Ja, zo eenvoudig is het! Om te bevestigen dat het werkte, typt u in een leeg HTML-bestand ul> li * 4 + Tab
. Tada!
Het is waarschijnlijk dat je Mac-lezers momenteel TextMate gebruiken. Gelukkig biedt Sublime Text volledige ondersteuning voor TextMate-thema's. Dit betekent dat, ja, uw aangepaste kleurenschema kan worden gemigreerd naar Sublime-tekst zonder een ons aan configuratie. Plaats het gewoon in de map "Packages" zoals deze is.
Hoeveel keer hebt u handmatig bijvoorbeeld HTML5 Boilerplate of de jQuery-bibliotheek gedownload? Dat is verspilling; zou het niet eenvoudiger zijn als we een snelle toetsaanslag konden uitvoeren en ze meteen naar het huidige project konden downloaden? Natuurlijk zou het! Nettuts + Fetch is de oplossing.
Installeer het via Package Control en zoek vervolgens naar "Ophalen: externe bestanden beheren". Hiermee worden twee objecten weergegeven voor het ophalen van afzonderlijke bestanden en pakketten, respectievelijk; er zijn er twee voor je.
Om het te testen, maakt u een nieuw bestand, zoekt u "Ophalen" in het opdrachtenpalet, kiest u "Eén bestand -> jQuery" en ziet u hoe de nieuwste versie van de bibliotheek direct wordt toegevoegd. Probeer vervolgens een heel pakket te installeren en sta versteld.
Ga naar een klas of een lijst met functies die beschikbaar zijn, type Command + r
, en je krijgt een lijst met alle symbolen op de pagina te zien. Merk op hoe we het gebruiken @
symbool om de methoden te bekijken.
Bijvoorbeeld als u een PHP-klasse bekijkt, Command + r
zal alle methodamen opnoemen. U kunt dan fuzzy zoeken gebruiken om direct naar de gewenste methode te gaan.
Wanneer we dit combineren met de instant-bestandsomschakelingsmogelijkheden van Sublime, wordt deze opdracht bijzonder nuttig. Stel je voor dat je moet bewerken style.css
, en, specifiek, de .doos
klasse binnen dat bestand; type Command + p
, stijl @ doos
, en je bent daar!
Prefixr is een webservice die automatisch de nodige voorvoegsels van CSS-leveranciers op uw stylesheets toepast, zodat u niet hoeft te onthouden welke leveranciers u moet gebruiken voor een bepaalde CSS3-property. De Prefixr-plugin brengt deze functionaliteit rechtstreeks naar uw editor!
Zodra u de plug-in via Package Control hebt geïnstalleerd, selecteert u de inhoud van uw stylesheet en activeert u de plug-in door te typen Control + Command + x
. Voila! Uw bestand is onmiddellijk bijgewerkt. Gebruik de officiële syntaxis en laat Prefixr de leverancierspecifieke vereisten berekenen.
Hoe minder je de muis aanraakt, hoe beter. Helaas kan het maken van een nieuw bestand in Sublime Text standaard wat langer duren dan we zouden willen. De plug-in "Advanced New File", die zoals altijd kan worden geïnstalleerd via Package Control, herstelt dit.
Na de installatie typt u Command + Option + n
, en je ziet onderaan een nieuw paneel verschijnen.
Wat fantastisch is aan deze plug-in, is dat je ook bestanden kunt maken in mappen die nog niet bestaan. Misschien moet je een nieuw maken scripts.js
bestand, maar u hebt het bestand nog niet gemaakt js
directory. Dat is goed; de plug-in zal het weten om de map aan te maken als deze nog niet bestaat. Typ gewoon het volledige pad naar het gewenste nieuwe bestand en u bent klaar om te beginnen.
Laten we een nieuw jQuery.js-bestand maken binnen een js / libs
map die nog moet worden aangemaakt; Optie + Command + n
, js / libs / jquery.js
, opslaan, Command + Shift + p
, "Fetch", "Single File", "jQuery." We hebben nu in seconden een mappenboom gemaakt en de nieuwste versie van de bibliotheek gedownload.
Als ze dat willen, kunnen Vim-gebruikers gemakkelijk migreren naar Sublime Text, dankzij de optionele Vintage-modus. Om dit in te schakelen, bewerk het "Default Preferences" -bestand in het Preferences-menu, scroll naar beneden en verwijder het "Vintage" -item uit de ignored_packages
rangschikking.
Druk nu op Ontsnappen
, en je bevindt je in de commandomodus! Je zult merken dat de Vi-sneltoetsen van Sublime behoorlijk nauwkeurig zijn!
Elke snippet in Sublime-tekst verwijst naar een enkel bestand en biedt tab-aanvullen en standaardwaarden. Kies "Extra -> Nieuw fragment" om een nieuw fragment te maken. In dit nieuwe bestand kunt u, binnen de
label, voeg je fragment toe. Je hebt ook de mogelijkheid om een tab-trigger en bereik te selecteren, wat ervoor zorgt dat het fragment alleen toegankelijk is vanuit een specifiek bestandstype.
Sla het bestand op met een .subliem-fragment
extensie en test het uit!
Hoewel de native fragmenten van Sublime de klus wel klaren, voor grotere snippers, geef ik er de voorkeur aan om te profiteren van GitHub Gists en versiebeheer.
Begin met het installeren van de "Gist" -plug-in via Package Control. Dit geeft ons nu een handvol nieuwe opties in het opdrachtenpalet.
Wanneer u probeert een nieuwe Gist te maken, zult u merken dat u eerst de plug-in moet voorzien van uw GitHub-inloggegevens. Ik raad u aan een speciaal account voor uw fragmenten te maken. Nadat u dit hebt gedaan, stelt u de referenties in en probeert u het opnieuw. Nadat u een handvol fragmenten hebt gemaakt, kunt u ze in het opdrachtvenster weergeven door 'Gist: Open Gist' te kiezen.
Het beste deel is dat, wanneer je bestaande fragmenten door gist.github.com vorkt, deze automatisch voor jou beschikbaar zijn in Sublime Text - plus, gratis versiebeheer voor je fragmenten!
Met het buildsysteem van Sublime kunnen we sneltoetsen toepassen, die kunnen worden doorgestuurd naar externe programma's, zoals CoffeeScript, Sass, Grunt en meer. Dit betekent dat je, in plaats van over te schakelen naar de Terminal om je build-opdracht uit te voeren, hetzelfde kunt bereiken vanuit de editor.
Laten we CoffeeScript als voorbeeld gebruiken, omdat het tegenwoordig behoorlijk populair is. Begin met het maken van een coffeescript.sublime-build
bestand in uw map "Packages /". Plak de volgende code vervolgens in:
"cmd": ["coffee", "- c", "$ file"], "selector": "source.coffee", "path": "/ usr / local / bin /"
Hoewel er meerdere opties beschikbaar zijn voor ons, houden we deze voorlopig vast. cmd
geeft de opdracht aan die moet worden uitgevoerd, samen met eventuele argumenten en vlaggen. In dit geval voeren we het huidige bestand uit via de opdracht voor het compileren van de functie CoffeeScript. ten tweede, pad
is alleen nodig als CoffeeScript niet in uw basispad is geïnstalleerd.
Nadat u het bestand hebt opgeslagen, is er een nieuwe optie beschikbaar via 'Extra -> Build-systeem'. Kies "CoffeeScript" en nu, wanneer u de opdracht "build" uitvoert met Command + b
, het huidige CoffeeScript-bestand wordt gecompileerd!
Addy Osmani heeft een fantastisch artikel over de uitbreidingsmogelijkheden van Sublime Text.
Soms moeten we alle extra pluis wegfilteren die onze codering in de weg zit. Gebruik de "Afleidingsvrije modus" om het scherm leeg te maken, behalve de code. Deze optie is beschikbaar via het menu Beeld. Selecteer "Introductie vrije modus afleiding", ?? of gebruik de sneltoets voor Mac, Control + Shift + Command + F
.
Een van de opvallende kenmerken van Sublime is de unieke zijbalk die het huidige bestand in vogelvlucht weergeeft. Dit kan ongelooflijk handig zijn voor grote bestanden, omdat het ons in staat stelt om een bestand in seconden te scannen, zonder handmatig door de pagina te hoeven scrollen.
Wilt u liever meerdere bestanden binnen hetzelfde venster bewerken? Sublime biedt een handvol gesplitste weergaven, inclusief rijen en kolommen. Blader naar Beeld -> Layout
om de beschikbare keuzes te bekijken en vergeet niet de toetsenbordopdrachten te onthouden, omdat u deze functie vaak zult gebruiken!
De "Live CSS" -plug-in is eenvoudig maar nuttig. Het stelt de achtergrond van elke kleurwaarde in uw stylesheet automatisch gelijk aan wat u hebt opgegeven. Zeker, het is een klein gemak, maar het kan toch nuttig zijn!
Tijdens de ontwikkeling hebben we vaak nog niet de uiteindelijke inhoud voor een webtoepassing. In deze gevallen gebruiken we meestal tijdelijke tekst en afbeeldingen. Wanneer we nagaan hoe vaak we dit doen, zou het dan niet slim zijn om een handvol tijdelijke fragmenten te maken? Nou, de placeholder plugin doet precies hetzelfde!
Of je nu een tijdelijke afbeelding nodig hebt, een paar "lorem ipsum" paragrafen, of zelfs een definitielijst met dummy tekst, deze plug-in is perfect voor de klus.
Een verrassend zeldzaam gemak, te vinden in Notepad ++, is uitleggeleidingen. Soms, bij het bladeren door gigantische bestanden, kan het moeilijk zijn om inspringen aan te passen zonder een beetje hulp.
De indentatiegidsen van Sublime bieden nuttige gestippelde visuals om dit op te lossen.
Sublime Text wordt soms bekritiseerd omdat het geen flitsende interface biedt voor het instellen van configuratieopties. Ironisch genoeg is het feit dat Sublime een bewerkbaar JavaScript-object letterlijk weergeeft een van de grootste sterke punten van de auteur. Dit maakt het proces om de instellingen van Sublime precies aan uw behoeften aan te passen, zo eenvoudig als menselijk mogelijk is.
Als u bijvoorbeeld de "Inspringrichtlijnen" wilt uitschakelen, opent u het instellingenbestand "Standaard" waarnaar u zoekt draw_indent_guides
(met Command + i
) en stel de waarde in op vals
. Gemakkelijk! Zorg ervoor dat u alle beschikbare instellingen bekijkt.
Als je nog steeds handmatig naar de zijbalk verwijst om het gewenste bestand te vinden waarnaar je wilt overschakelen, doe je het verkeerd. Sublime's directe bestandswisseling is ongelooflijk en is sneller dan je ooit hebt meegemaakt in een editor.
Type Command + p
om een lijst met alle bestanden in het huidige project te openen. U kunt nu fuzzy zoeken gebruiken om het bestand te kiezen waarnaar u wilt overschakelen. Een lijst met alle JavaScript-bestanden nodig? Type .js
. U zult merken dat, terwijl u typt, Sublime Text met razendsnelle snelheid overschakelt naar het bovenste bestand dat overeenkomt met uw zoekopdracht.
Dit is de voorkeursmethode om naar nieuwe bestanden te navigeren. De zijbalk is een laatste redmiddel.
Sublime geeft ons de mogelijkheid om eenvoudig toetsbindingen in te stellen om elke opdracht te activeren. Hoewel er al veel bindingen zijn ingebouwd, kunt u deze indien nodig aanpassen aan uw behoeften.
Overweeg de binding voor het verplaatsen van een bestand naar een ander venster wanneer u met meerdere kolommen werkt. Standaard moeten we op drukken Controle + Shift + 2
; dit kan echter een beetje moeilijk te onthouden zijn. Laten we dit in plaats daarvan opnieuw toewijzen Optie + 2
.
Hoewel we het standaard snelkoppelingsbestand kunnen bewerken, is dit een slechte gewoonte, vanwege het feit dat elke Sublime-update je aanpassingen opnieuw instelt. In plaats daarvan, is het het beste om het gebruikerstoetsbindingsbestand te bewerken.
["keys": ["alt + 1"], "command": "move_to_group", "args": "group": 0, "keys": ["alt + 2"], "command ":" move_to_group "," args ": " group ": 1, " keys ": [" alt + 3 "]," command ":" move_to_group "," args ": " group ": 2 , "keys": ["alt + 4"], "command": "move_to_group", "args": "group": 3]
Maak je geen zorgen; als dit er verwarrend uitziet, doorzoek dan het standaard snelkoppelingsbestand naar de instellingen die je moet wijzigen en kopieer en plak ze vervolgens in je gebruikersbindingsbestand en update de "toetsen" dienovereenkomstig.
Wanneer we een bestand moeten doorzoeken, doen we vaak een beroep op een paneel "Zoeken en vervangen", wat tijd kost. In plaats daarvan drukt u op Command + i
om een live zoekopdracht uit te voeren op het huidige bestand. Je zult versteld staan hoeveel sneller deze methode is.
Uiteraard biedt Sublime Text ondersteuning voor codevouwen op meerdere niveaus. Laten we zeggen dat u aan een stylesheet werkt en alle eigenschappen wilt verbergen; kies "Bewerken -> Koud vouwen -> Alles vouwen" of druk op Command + k + 1
.
Leuk! Als u alle blokken wilt uitvouwen, drukt u op Command + k + j
.
Het kan enige tijd kosten om de sneltoetsen te onthouden, maar het is de moeite waard.
Vergeet niet dat Sublime Text 2 actief wordt ontwikkeld. Ik moedig je aan om de ontwikkelingsversie te gebruiken, beschikbaar op sublimetext.com/dev. Maak je geen zorgen; ook al zijn het ontwikkelingsversies, je zult zelden bugs tegenkomen.
De Alignment plug-in, door Will Bond, zal uw code onmiddellijk aanpassen om mooiere lay-outcodes te maken. Meestal wordt het gebruikt om ervoor te zorgen dat het gelijkteken, =
, voor variabele toewijzingen line-up.
Geïnstalleerd via Package Control kan de Alignment-plug-in worden geactiveerd door een toepasselijk stuk code te selecteren en op te drukken Control + Shift + a
.
In feite zal de plug-in vertalen:
var first = 'Joe'; var last = 'Zwart'; var job_title = 'Death'; var status = 'Op vakantie';
In:
var first = 'Joe'; var last = 'Zwart'; var job_title = 'Death'; var status = 'Op vakantie';
Eenvoudig, maar nuttig!
Het is duidelijk dat er nog veel meer geheimen en trucs zijn in Sublime Text 2, maar deze lijst helpt je op weg! Als je meer wilt weten over deze fantastische editor, lees dan zeker onze volgende cursus: "Perfect Workflow in Sublime Text 2."