🔥 BLACK FRIDAY SPEACIALGet Up to 80% OFF on All-Access | Coupon:
BLFCM2023
blog image

Saiful Saif

in Resource

Published on: 9/1/2015

12+ Most-Useful Sublime Text Tips, Tricks and Shortcuts

Sometimes frontend workforce may vary on the environment you have. And it has the power to double your productivity on that specific portion.  And Right now I’m talking about one of the most important developer tool that always acts as an unsung hero. Although it depends on the developers mind to see which is better or supportive? Now have you guessed something? Ok I’m talking about the IDE that we generally use in our product development in web. After all an IDE which comes with lots of modules, maintains the developer’s readability, easiness, eye-catching and it’s also equipped with absolutely handy tools for any development environment.

From the developer’s point of view, Sublime Text is successfully ruling as one of the simplest, minimalist code editors. Now I’m undoubtedly sure about answers of others and it will vary different choices from different people but who cares? However sublime text will give you the full taste of usability each and every feature and of course you never get any end of it. You might be mesmerized by counting cool stuffs of this IDE.

Now I’m bringing in 12 sublime text shortcuts tips and tricks that few individuals may not be acquainted with which will accelerate your coding process faster than ever like a complete coding ninja. So let’s dive

Package control

Before using sublime text, you must initiate package control. It’s none other than a Pandora’s Box and you’ll found all kinds of handy materials for your coding journey. It’s written by the sublime text community to extend the facility to move further. For installing this package control, you have to go here and follow their instruction.

After successfully installing package control, now you can easily able to get package control actions in the command palette by pressing CTRL/⌘-SHIFT-P.

package-control

 

Multiple cursors service

What kind of things you do when you’ve found the same problem in your multiple lines of code. But I know, this time you just trying to pull off all the hair from your head relentlessly.  However there is a stylish way out from this sudden disturbance.

So this time multiple cursors at your service, just type CTRL+SHIFT+ARROW KEY it will add another mark to the line above or under the present position. The entire following orders will now be carried out at the same time by all the cursors that you have formed. It seems that this method is directed to save your precious time.

  • ctrl + d: to select the current and the next same code
  • ctrl + click: will create a cursor to edit in every place you click
  • Ctrl + shift + f and alt + enter: it’ll find a specific code in your files and afterwards it selects all of them

Multiple cursor

 

Joining and swapping lines

From the beginning of this IDE, it offers lots of mind-blowing editing methods to reveal oneself as a pro coder. Like an editing screen where you can go at the final line between seconds. Sublime text adds many items to give extra speed on coding.

Using this joining and swapping lines method, you can easily join the lines in following with the present one excluding all the whitespace in between, just hit CMD+J. Use CMD+CTRL+ARROW KEY if you need to swap these lines.

Closing current HTML tag

Especially Frontend developers love this method and also helpful for writing maximum amount of HTML code each day. Here Except the installed Tag package, you might’ve surprised how to lock the HTML tag you are presently inside. CMD+ALT+ . will do just what you need, saving your materials a few seconds per day that you can now bestow yourself to become a super duper ninja coder at HTML coding by learning Emmet.

create end in current HTML tag

 

Matching brackets

When you’re compiling code in a programming language like PHP, JavaScript or whatever you happen to be within circles, loops, conditions, capacities or constantly on the programming builds. What’s more, the possibility with which you’ll locate its comparing opening and shutting section with your bare eye is generally corresponding to how reflective your present line is settled in the code.

You can do it by using CTRL+M however, you can shift your cursor immediately there, and just hitting it twofold will take you to its opening or closing counterpart. Now tell us about your feelings!!

matching-brackets

 

Keyboard scrolling

Sometimes mouse becomes the cause of pain or sometimes needy to us or when your mouse or touch device possibly unworkable and you just want to scroll up or down a few lines of code without losing the position of current cursor.

If you want to work it on your own, just use the arrow keys as usual in combination with CTRL+ALT+ARROWS. Now you can scroll without taking off your hands from keyboard.

Quick Comment

Scripts are useless without comment, if you can’t define your code by yourself, no one ever understand it perfectly. So commenting is most important part to sum up your entire script. If you’re continually commenting your code or for momentarily testing and see how disabling a block of code affects on your project.

In sublime text you can quickly comment, firstly by highlighting the code and then use CTRL/⌘-/. Unless you don’t highlight any code specifically, using this shortcut key that will comment out the entire line.

sublime -quick commenting

 

Deleting cheap Lines

Sometimes codes need to be reformed or refurnished. Because when a line of code or small portion of code is out of order, there needs to change by remove.

So that’s why Sublime text has usable shortcut for deleting extra or unimportant lines without having to select the entire line simultaneously. Just hit CTRL/⌘-SHIFT-K (PC and Mac) and that will delete the entire line on cursor in on.

Crawling File

This tips and trick is very much useful as well as helpful for those who want variation on their CSS editing. This feature is really helpful because of its neutrality in nature.

Just follow Command + R, and then a box will open with appearing list of CSS selector. So now you can search the actual selector and make them work.

Crawling File

 

DocBlockr

Many of us don’t know how to block a specific area in a content, we’re just use ctrl+x, ctrl+s and ctrl+z. but there is more than that, docblokr will give you the solution to create a block easily in a script like JavaScript, PHP, CoffeeScript and many more. Just hitting /** above the function and press tab. And see what happened.

docblockrr-sublime

 

Speedily Indent

Always have in mind, you’re not the only person to look at you code. There will be other person or you and its counting. It’s about making your code legible and easier to understand. If you’re a developer, you better know this language called ‘Indent’. Indent means creating minimum space to detect code perfectly.

For implying Indent you have to use

  • CTRL/⌘ and ]  â€“ It increases the current lines indent
  • CTRL/⌘ and [  â€“ it decreases the indent of that line

indent-sublime

 

Initiate open user settings

In the following piece of this smaller than usual arrangement, here we’ll go over the most widely recognized settings and all individuals have a tendency to alter keeping in mind the end goal is to enhance their work process. Sublime text is doing this job perfectly over and over again with its smooth open user settings.

Here you might want to go forward as well as experiment a bit with your sublime text user settings (which overrule the default settings initiate under Preferences > Settings – Default.  You just need to press CMD+, and it’ll take you there within a blink of eyes.

Lastly, don’t take it as a conclusion, however depending on this tips and tricks you can easily improve your front-end workflow faster than ever. But sky has no limit and so as here. Lots of tricks and tips are revealing and spreading all over the web, so just keep your eyes open and start digging. Happy programming.

Tags:
Share This Post

Subscribe to recieve future updates!