How to create console.log snippet in Sublime Text 3?

Question

I do not know how to do it I want to write first of all code, then press TAB and this code will be wrapped in brackets with console.log command. Help please)

Answer 1

Here is my approach - Sublime Text 3 (3126) @ Ubuntu 16.04.

Open Sublime Text editor and go to:

Tools -> Developer -> New Snippet...

Then paste the following code:

<snippet>
    <content><![CDATA[console.log(${1:}$SELECTION);${0}]]></content>    
    <tabTrigger>console.log</tabTrigger>    
    <scope>text.plain, source.js</scope>
</snippet>

( <scope></scope> is optional, and feel free to put whatever you want in <tabTrigger></tabTrigger> section)

Press CTRL + S , choose name (eg console.log.sublime-snippet ) and save it.

Open any JS file, start typing console and the snippet will appear.

Answer 2

Put this file in /packages/User/<optional subFolder Name>/console_log.sublime-snippet

If you goto Tools -> Developer -> New Snippet..
then crtl-S (when you're done typing), it'll automatically open the correct folder up for you.

console_log.sublime-snippet :

   <snippet>
        <content><![CDATA[console.log($1);$0]]></content>
        <tabTrigger>conl</tabTrigger>
        <scope>text.html,source.js</scope>
        <description>console.log()</description>
    </snippet>

Type: conl tab and: console.log(); appears in your editor.

Cursor will automatically be placed between the () to allow quick typing of your log message.
When finished, click tab again, and the cursor will be moved past the ; .

• Tab behaviour is controlled by the $1 and $0 in the snippet.

• The conl between tabTrigger tags defines the keystrokes (not including tab ) that will trigger the snippet to run. Change it to whatever shortcut makes sense to you.

• description tags (optional) define what "hint" you want sublime to show when listing tab-completion "match" options.
• scope tags (optional) limit the snippet to trigger only when working in files of the listed types

Here is an advanced version of this snippet I use for debug logging.
It encourages labeling the variable that I want to look at.

<snippet>
    <content><![CDATA[console.log('$2:', $1);$0]]></content>
    <tabTrigger>cl</tabTrigger>
    <scope>text.html,source.js</scope>
    <description>console.log()</description>
</snippet>

This one is triggered by cl , and the

• 1st tab takes me (past the comma) to the location where I am to type in the variable name ,
• 2nd tab takes me (between the quotes) to the location where I am to type in the label
• 3rd tab takes me (past the semi-colon) to continue coding

I find that my mind is most interested in typing in the variable I'm interested in looking at, then almost as an afterthought, it is interested in labeling it.
Plus, I often want to pre-pend label with the name of the calling function, so it's cognitively easier to get the variable out of the way, then add labeling details. Hence the tab order.

If that order seems unnatural, just swap the $1 and $2 like so:

<content><![CDATA[console.log('$1:', $2);$0]]></content> 

This will put the cursor:

• 1st tab between the quotes first (to type in your label for the variable),
• 2nd tab after the comma second (to enter the variable you want to look at), and
• 3rd tab after the semi-colon last (to continue coding).

Answer 3

Step 1: Go to tools -> New snippet.

Step 2: Insert below code(Just a sample one with basic tags. For more info please refer here )

 <snippet>
  <content><![CDATA[Hello, this is sample snippet ]]></content>
  <tabTrigger>hello</tabTrigger>
</snippet>

Step 3: Save the file. Extension must be 'sublime-snippet' for example: hello.sublime-snippet

Step 4: Thats all. You can now open any other file in sublime and type hello and hit TAB key. which will bring the text in place of hello Hello, this is sample snippet

Answer 4

Go to Sublime Text 2 > Preferences > Key Bindings - User and add this JSON to the file and save it:

[
    { "keys": ["tab"],
      "command": "insert_snippet",
      "args": {
        "contents": "console.log(${1:}$SELECTION);${0}"
      }
    }
]

Now select any code and just press tab key

Answer 5

I know I am very late, but can't stop myself from suggesting some improvement.

To me actually this makes more sense and is more helpful too.

<snippet>
    <content><![CDATA[console.log('${1:Variable/Resource}:',${1:Variable/Resource});$0]]></content>
    <tabTrigger>cons.log</tabTrigger>
    <scope>text.html,source.js</scope>
    <description>console.log(Label:Variable/Resource)</description>
</snippet>

This way you can actually see what variable you're seeing data/content of, when you're forced to print multiple variables/resources during debugging of a long. complex and tiring script.

Save this as %APPDATA%\\Sublime Text\\Packages\\User\\cons.log.sublime-snippet or /packages/User/<optional subFolder Name>/cons.log.sublime-snippet (if you're in non-Windows OS).