Sublime Text Tips

Omdat korte, praktische posts ook nodig zijn: enkele Sublime Text packages en instellingen die ik elke dag gebruik.

Packages

Installeer eerst Package Control. Installeer nadien de packages die je interessant vindt via cmd+shift+p > Install package > Package Name.

• All Autocomplete: autocomplete over alle geopende files. Handig voor bijvoorbeeld variabelen en functienamen.
• ColorPick: toon de ColorPicker via cmd+shift+c.
• FileDiffs: toon de verschillen tussen twee bestanden (die niet per se onder version control moeten staan)
• Git: voer git functies uit via cmd+shift+p > Git
• HTML-CSS-JS-Prettify: soms kopieer je compressed of slecht geïndenteerde code en wil je die weer leesbaar maken. Prettify is your woman!
• Live CSS: toon de kleur van een hex-waarde als achtergrond van de hexwaarde. Colorception!
• Markdown Preview: bekijk een preview van je markdown file als HTML in de browser.
• MarkdownEditing: tweaks en thema om aangenaam Markdown files te bewerken. Gebruik ik enorm veel om notities te nemen of todo-lijstjes bij te houden.
• PHP-Twig: voor sommige projecten gebruiken we de Twig template engine. Dit package zorgt voor correcte syntax highlighting wanneer je in twig templates werkt.
• SCSS: onze go-to preprocessing taal is Sass, met als voorkeur de SCSS syntax. Dit package zorgt voor een correcte syntax highlighting van onder andere variabelen in SCSS.
• SidebarEnhancements: meer file operations rechtstreeks in de sidebar van Sublime Text: kopiëren, plakken, verplaatsen, enzovoort.
• Theme – Flatland: mijn favoriete thema: licht op donker, weinig afleidend en tegelijkertijd duidelijk.

Instellingen

Sublime Text heeft twee settings files: de default settings en user settings. In het begin was ik hier wat door in de war, maar het werkt eigenlijk vrij logisch als je er over nadenkt: je user settings overschrijft de default settings. Als je dus een instelling wil aanpassen kopieer je die lijn uit je default settings naar je user settings (Sublime Text > Preferences > Settings — User) en pas je daar de waarde aan.

Dit zijn de instellingen die ik gebruik, met inline comments —wat eigenlijk niet kan in een JSON file, maar Sublime stript ze toch.

Variabelen in éen keer selecteren in (S)CSS

Extra tip; ik word altijd een klein beetje boos wanneer ik een variabele of door koppeltekens gescheiden classname in (S)CSS probeer te selecteren en er maar een deel geselecteerd wordt.

Als het nog niet bestaat, maak dan een SCSS.sublime-settings bestand aan in de Sublime Text/Packages/User map en plak daar volgende setting voor word_separators in:

"word_separators": "./\\()\"':,.;<>~!@#%^&*|+=[]{}`~?"

Vanaf nu worden $ en - niet meer als word-separator gezien, waardoor je ze in éen keer kan selecteren, zowel met het keyboard via alt+shift+arrow als door te dubbelklikken met de muis.

Zijn er nog dingen die jullie doen, die ik absoluut mis? Ik hoor het graag in de comments of via twitter!