Photo by Tianyi Ma on Unsplash

Top Sublime Tips To Level Up Your Coding

Shortcuts and tips that will save your time and your sanity!

When starting out as a web developer, it’s easy to get so caught up learning how to code that you forget to focus on learning how to use the tools at your disposal.

I write code using Sublime. It’s all I have ever used to write code as it’s what we used at uni and what I use now in my job. I think its a great code editor (I know many others agree) but obviously I don’t have experience using anything else.

I have picked up some great Sublime tips from my tutor at uni and work colleagues that I would love to pass on to others. I can imagine that if you are a self taught coder, you may not see other people coding and therefore may be missing out on lots of cool shortcuts!

If you can — sit next to someone while they are coding, in my opinion this is where the best gems of information come from!

Im still early on in my coding career so please share any of your favourite Sublime tips with me if you don’t see them below!

Shortcut Keys

  • Hold down command and click where you want to edit to edit multiple things at once.

This is useful if editing information that occurs more than once. E.g if you need to rename a class or add an image tag into multiple divs.

  • Similar to the above — if you CMD + F to search for what you are looking for — you can then press ENTER + OPTION to select all instances and edit them all at the same time.
  • Don’t want to select every one? if you highlight an instance and press CMD + D it will select the next instance and keep moving down each time you do it.
  • SHIFT + TAB to tab/move your code backwards

Are you lost in a sea of code?

Cant figure out where your closing tag is? This is a neat tip that a colleague pointed out to me only recently.

  • When you click on the opening tag in sublime a little orange dotted line appears underneath it, this line also appears underneath the closing tag — see below
Sublime lets you know where your closing tag is by underlining it.

Still lost in your 20 nested tables? 😆 Start collapsing them from the inside out to find your place.

  • If your code is nicely indented (which it should be!) you can collapse elements by clicking on the little arrow in the side bar — simply click on it again to expand your code.
arrow to collapse code

You can see which sections have been collapsed by these 3 little yellow dots at the end of the section

collapsed code

Is your code so messy that you cant collapse it? (I hate to admit it, but we have all been there! )

  • Reindent — Sublime will tidy up your code for you! simply click on edit ->line -> reindent and surprise! Tidy code. If you highlight sections and then do this, it will only reindent the highlighted section. Be aware! if you have comments throughout your code. It may not be 100% accurate.

Copying Code Quickly

  • You don’t need to highlight the whole line of code you need to copy. If your cursor is in the line, simply CTRL + C and the whole line will be copied for you.

Want to speed up your coding 100x over?

This one is an absolute life changer!

It really took my coding to the next level and saves so much time. Emmett is a plugin that basically lets you write code super fast.

Once you have installed it ( in Sublime -> preferences ->package control -> type install package -> click enter -> search for emmett -> enter) you can find the Emmett cheat sheet that will explain all the wonderful ways in which you can use it.

My fave ways to use it are :

  • Divs with class names simply type .class-name and tab and your div is all ready to go.
  • Setting up a new index file type HTML:5 then tab — and your file is set up and ready to go!
  • Lorem ipsum text block type p>lorem50 + tab = a paragraph with 50 words.
  • Need a List? ul>li*3>lorem1 + tab gives you a list with 3 li’s that each have one word inside them, so handy when making nav’s.

This is just the tip of the iceberg with Emmett!

View 2 Files at once

I love being able to see my HTML and CSS at the same time. You can change the layout of your sublime so that this is possible.

  • Simply click on view -> layout -> columns 2 and you will be able to view your HTML and CSS side by side.

I hope these tips will save you heaps of time in the future. Please share any of your favourites with me! 💛

If you enjoyed this article and want some more tips, check out my others and Happy coding!