3 april 2015

Sublime Text, de teksteditor voor een front-ender

development

Er zijn verschillende soorten teksteditors die je helpen bij het schrijven van CSS of HTML code. De crème de la crème onder de teksteditors is Sublime Text. Veel teksteditors kunnen wat Sublime Text kan, maar Sublime Text werkt nét wat vlugger, ziet er nét wat gelikter uit en werkt nét wat lekkerder.

Onze frond-end developer Jeffrey is verliefd op Sublime Text‘Deze teksteditor is voor mij als front-end developer een onmisbare tool, die mijn werk iedere dag plezier en succes brengt.’ Ben je (nog) niet verliefd op Sublime Text of ben je nieuwsgierig of je alles eruit haalt wat erin zit? Dan gaat deze blog je zeker verder helpen. We geven zevental tips en trics over de teksteditor.

De magie in Sublime Text

De magie binnen Sublime Text vind je onder de CTRL+SHIFT+p toetsencombinatie. Check!

Bij deze toetsencombinatie krijg je een zoekvenster, waarbinnen je verschillende activiteiten kunt uitvoeren. Denk hierbij aan het wijzigen van teksten naar Uppercase, karakters (enities) encoden voor HTML of functionaliteiten uitvoeren van andere speciale functies.

Deze functionaliteiten (packages) kun je zelf toevoegen. Hoewel het toevoegen van een nieuw package slechts een kwestie is van een mapje kopiëren naar de “packages”  folder is het nóg eenvoudiger toe te voegen met de package die wordt behandeld onder punt één, namelijk Package Control.

1. Package Control

Package Control is by-far de belangrijkste functionaliteit. Wanneer je deze geïnstalleerd hebt, kun je middels de toetsencombinatie CTRL+SHIFT+p eenvoudig andere packages toevoegen.

Hoe gaat dit in zijn werk?
Typ “install package” in en druk op enter. Alle packages die in dit bericht worden behandeld, kun je op deze manier installeren. Met deze functionaliteit kun je ook eenvoudig packages verwijderen (typ “remove package”). Wanneer je één van de packages uitprobeert en deze niet bevalt, kun je deze weer gemakkelijk verwijderen.

2.     Emmet

Deze functionaliteit is een uitvinding voor een ieder die vaak CSS en HTML schrijft. Jeffrey vertelt: ‘Ik gebruik deze functionaliteit anderhalf jaar. Ik kan me de situatie niet meer voorstellen waarin ik zonder deze package werkte. Emmet zorgt ervoor dat je minder hoeft te typen voor je HTML en CSS. Ik zal beknopt uitleggen waarom Emmet dé package is die je moet gebruiken en waarom ik hier enthousiast over ben.

HTML Abbreviations
Stel, je wilt de volgende HTML opbouw gebruiken:

<ul class="list">
   <li class="list-item"><a href="#">Lege link</a></li>
</ul>

Je typt met Emmet de volgende regel en drukt op [tab]. Je krijgt precies hetzelfde resultaat.

ul.list>.list-item>a[href="#"]{Lege link}

Je hoeft minder karakters te typen en kunt op deze manier sneller code schrijven. Daarnaast kun je geen sluittags meer vergeten. Fantastisch!
Naast deze functionaliteit is er standaard een lorem ipsum generator beschikbaar. Typ “lorem” in, druk op [tab] en er wordt een lorem ipsum tekst geplaatst.

Meer informatie over de mogelijkheden van Emmet voor HTML code vind je hier.

CSS Abbreviations
Deze functionaliteit is voor CSS nog prettiger dan voor HTML, omdat het veel regels tekst scheelt.

> Wil je een margin van 0 hebben? Typ m0 + [tab]
> Een padding-top van 5px? Typ pt5 + [tab]
> Een width van 50%? Typ w50p + [tab]

Een lijst met alle abbreviations vind je hier. (Wel even scrollen tot het CSS kopje)

3. Color Highlighter

Met de color highlighter ontvangen de hex codes in Sublime Text direct de kleur van de corresponderende kleurcode.

De functie werkt gemakkelijk, want je ziet direct of “#e13b3b” of “#1bd831” rood is. Je installeert de functionaliteit gemakkelijk via package control. Wil je graag weten wat de mogelijkheden zijn binnen deze package? Lees dan meer informatie hierover op de Github pagina.

4. Less / SCSS

De color highlighter functionaliteit werkt niet consequent door in het gehele project met SCSS of LESS variabelen. Daarvoor kan een aparte package geïnstalleerd worden via Package Control. Typ LESS of SCSS in, druk op enter en de syntax is geplaatst.

5. jQuery

Deze functionaliteit werkt alleen voor jQuery functies. Bij de package hoef je tijdens het schrijven van javascript bijvoorbeeld alleen “ready” + [enter] typen om direct de volgende code te genereren:

$(document).ready(function() {
   }); 

6. Colorsublime

De opmaak van de Sublime Text editor kun je zelf instellen door middel van een custom theme. Je kunt verschillende theme’s installeren. Wil je de verschillende theme’s eerst live bekijken voordat je er één installeert? Dan is deze package geschikt voor jou. Bij het installeren van deze functionaliteit, kun je direct bladeren door de colorsublime catalogus. Het bladeren door de catalogus gebeurt in de editor zelf. Je ziet direct een live preview alvorens je het theme installeert. Tevreden met het kleurenschema? Druk op enter en het theme is geïnstalleerd.

7. Sublimerge

Sublimerge is een vergelijkingstool voor Sublime Text. De package is onmisbaar wanneer je twee verschillende versies van eenzelfde bestand met elkaar wilt vergelijken. De weergave toont duidelijk alle verschillen en overeenkomsten van de syntax. Meer informatie over hoe de package werkt? Bekijk de volgende website: sublimerge.com

Aan de slag!

Heb je vragen over het gebruik van Sublime Text? Neem gerust contact op. We helpen je graag verder.

Geschreven door: Jeffrey Arts
Cookies?

We gebruiken cookies om het functioneren van onze website te verbeteren. De gegevens worden volledig anoniem verzameld.