A Sublime snippet to replicate Turbo Console Logs from VSCode

VSCode has a lot to offer, especially with its extensive ecosystem filled with useful packages. One that I've recently found and really like is Turbo Console Log. But, despite these packages and features, the speed of Sublime Text keeps me coming back, and I found myself wanting to replicate some of VSCode's functionality within it.

Now, there may be more sophisticated ways to achieve this using Python and various packages, I decided to go down a simpler path. Here's my straightforward approach to bring a similar console log functionality to Sublime Text via snippets.

1. Open Sublime Text and navigate to Tools -> Developer -> New Snippet....
2. Replace the content with the following code:

       <snippet>
         <content><![CDATA[console.log("🚀 ~ file: ${TM_FILENAME}:${TM_LINE_NUMBER} ~ ${1:var}: ", ${1}) ]]></content>
         <tabTrigger>log</tabTrigger>
         <key>ctrl+alt+l</key>
         <scope>source.js</scope>
       </snippet>

3. Save the snippet as `rocket-debug-log.sublime-snippet` in your Sublime Text user packages directory (you can find this directory by going to `Preferences` -> `Browse Packages...`).

Note that the placeholders are defined using ${1:var} which will prompt you to enter the "variable name" when the snippet is triggered. Unfortunately, Sublime Text's snippets don't provide a way to automatically determine the selected variable's enclosing class and function name, so those need to be manually entered instead of coming from a highlight action (like Turbo Console Log).

Here's how the snippet works:

• `${TM_FILENAME}`: Gets the current file name.
• `${TM_LINE_NUMBER}`: Gets the current line number.
• `${1:var}`: Allows you to enter the variable name.

To use the snippet, you can either type log and press Tab or use the keybinding ctrl + alt + l (Windows) or ctrl + option + l (Mac).

I had trouble with the key binding, if you do:

1. Go to Preferences -> Key Bindings.
2. Add the following code to the right-hand side (the user-specific key bindings file), making sure to place it within the square brackets. If there are already entries, make sure to add a comma between the existing ones and this new one.

   {
     "keys": ["ctrl+alt+l"],
     "command": "insert_snippet",
     "args": {
       "name": "Packages/User/rocket-debug-log.sublime-snippet"
     }
   }
       

3. Save the file and close the key bindings preferences.