Quick console.log insertion in Sublime - sublimetext3

Question

Many times when I'm debugging I like to log out a line like this:
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
console.log(dataThatImTryingToSee);
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
However, it gets annoying having to type in the console.log line's contents all the time. Is there a way to add hotkeys in Sublime that would insert a line such as the console.log one?

Answer 1

Sublime can do this with something called Snippets, which allow you to re-use bits of text in a variety of ways to make your coding life easier.
To get started, select Tools > Developer > New Snippet... from the menu, and replace what you see there with the following, and then save it in the location that Sublime will select by default, which is your User package. The name doesn't matter as long as it ends in sublime-snippet, but remember what name you used because you're going to need it in a minute.
<snippet>
<content><![CDATA[
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
console.log(${1:$SELECTION});
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");${0}
]]></content>
<description>Debug log an item to the console</description>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>dlog</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.js</scope>
</snippet>
If you're not familiar with snippets, the text inside of the CDATA part of the XML is the body of the snippet, which will get inserted into the document.
${0} and ${1} are "fields", which you will be able to tab through entering text as you go. Fields are traversed in numerical order, but the special field ${0} indicates the location where the cursor should ultimately end up, which in this case is at the end of the last line so you can continue coding.
Fields can have the form ${#:default}, where the text initially displayed for the field is default. This will appear automatically in the snippet when it triggers, but it will be selected for you to type over it if you want.
The special field $SELECTION will be replaced with any text that happens to be selected when the snippet triggers (more on that in a second).
With the snippet saved you already have a couple of options open to you to trigger it, as long as you're in a JavaScript file (the syntax has to be set to JavaScript, so be sure to save any new files first).
First, if you open the command palette and enter the text Snippet to filter the list of commands to those which contain that text, you will see all snippets that apply to your current file, and in that list is an entry that says Snippet: Debug log an item to the console, which will trigger the snippet when you select it.
In this case, if you have any text selected, it will automatically be placed into the second console.log, so you can select a variable or what have you and trigger the snippet to log it directly.
Secondly, you can just enter the text dlog and press Tab to expand the snippet as well. The command palette entry mentioned above has text to the right that says dlog,tab to remind you. Depending on your settings, you may also get offered an auto completion popup as well.
Your question specifically talks about adding a hotkey, which is also possible. In that case you want to add a binding something similar to this to your custom key bindings:
{
"keys": ["alt+shift+d"],
"command": "insert_snippet",
"args": {
"name": "Packages/User/data_log.sublime-snippet"
},
"context":
[
{ "key": "selector", "operator": "equal", "operand": "source.js" },
]
},
You can change the key to whatever you would like, naturally. Note also that the name of the snippet you provide has to match what you saved the file as. If you followed the directions above it will have been saved in Packages\User already.
Now when you press the key, the snippet triggers. As above, if you have any text selected, it will automatically be inserted into the second console.log.
Note that in all cases when the snippet triggers, you will first have your cursor set inside the second console.log (possibly with some selected text already there), and Sublime is waiting for you to finish typing text for that field, so press Tab again to skip to the end of the snippet.
As a reminder of this, you'll notice that the status line (if you have it turned on) tells you Field 1 of 2 to let you know that you're inside a snippet.
This example assumes that you're working with JavaScript, so the snippet above and the key bindings will both only trigger when the current file is JavaScript. If you're using some other language, you can remove the scope from the snippet and/or the context part of the key binding to make them apply in all files, or modify the scope there to match the language you want to target.
This just scratches the surface of what you can pull off with a snippet. You can also do things like use the same field more than once to have the same text appear in multiple places, do regular expression substitutions, and much more. Check out the link above for more information.