Skip to main content

Mapping a new tab command in Sublime 2 Text

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

console.log

I found myself typing in console.log like hundreds of times a day (although you could use a program like ‘hotkeys’ to map your commands). I decided to create a sublime snippet which does this for me by simply typing “co” and pressing tab. It also puts the cursor in the debug field which is quoted and print out the console.log command into the IDE.

Related posts:

Description:

This awesomely simple Sublime snippet lets you console.log in millseconds (well it’s under a second for sure!). Cursor action loads directly to the debug message (which is automatically wrapped in quotes) and if you press tab again cursor action loads to the log command so you can change it to console.debug or console.dir as you wish.

Filename:  console_log.sublime-snippet
Trigger: co (tab)
Output: console.log('debug message');
Usage: co [tab] - load the console.log() command

Installation:

Copy the snippet into a file called “console_log.sublime-snippet” in the JavaScript folder:

C:Documents and SettingsdeeringsApplication DataSublime Text 2Packages

Or you can type “%appdata% into cmd to load the directory.

The sublime 2 snippet:


    < ![CDATA[console.${2:log}('${1:debug message}');]]>
    co
    source.js,source.js.jquery
    Console log

Conclusion:

From this simple example you should be able to start mapping any commands to generate new snippets to use with Sublime 2. If anyone has created any other Sublime snippets please share! :)

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

Integromat Tower Ad

New books out now!

Get practical advice to start your career in programming!


Master complex transitions, transformations and animations in CSS!