chakroun-anas / turbo-console-log

Official Website

https://www.turboconsolelog.io

Main Functionality

Turbo Console Log extension makes debugging much easier by automating the operation of writing meaningful log message.

Sponsorship

Since the extension is free and open source, we need your support to continue developing and maintaining it. If you are interested in sponsoring the project, u can do it through the following Link or contact us at [email protected]. For more information please visit: https://www.turboconsolelog.io/sponsorship

Core Features

Full documentation of the core features can be found in the official website: https://www.turboconsolelog.io/documentation/features

I) Insert a meaningful log message

Two steps:

• Selecting or hovering the variable which is the subject of the debugging (Manual selection will always take over the hover selection)

• Pressing ctrl + alt + L (Windows) or ctrl + option + L (Mac)

The log message will be inserted in the next line relative to the selected variable like the following:

console.log('🚀 ~ classWrappingVariable ~ functionWrappingVariable ~ variable', variable);

The log function and the content of the log message can be customized in the extension settings (see Settings section for more details).

Multiple cursor selection is also supported.

See It In Action

II) Comment all log messages, inserted by the extension, from the current document

All it takes to comment all log messages, inserted by the extension, from the current document is to press alt + shift + c (Windows) or option + shift + c (Mac)

See It In Action

III) Uncomment all log messages, inserted by the extension, from the current document

All it takes to uncomment all log messages, inserted by the extension, from the current document is to press alt + shift + u (Windows) or option + shift + u (Mac)

See It In Action

IV) Delete all log messages, inserted by the extension, from the current document

All it takes to delete all log messages, inserted by the extension, from the current document is to press alt + shift + d (Windows) or option + shift + d (Mac)

See It In Action

Settings

Full documentation of the settings can be found in the official website: https://www.turboconsolelog.io/documentation/settings

Properties:

Feature	Description	Setting	Default
Custom Prefix	The prefix of the log message	logMessagePrefix	🚀
Custom Suffix	The suffix of the log message	logMessageSuffix	:
Log Type	The type of the log message	logType	log
Custom Log Function	Custom log function to use in the inserted log message, when specified logType property will be ignored	logFunction	console.log
Delimiter Inside Message	The delimiter that will separate the different log message elements (file name, line number, class, function, and variable)	delimiterInsideMessage	~
Quote	Double quotes ("") or single quotes ('')	quote	"
Add Semicolon In The End	Whether to put a semicolon at the end of the log message or not	addSemicolonInTheEnd	true
Insert Enclosing Class	Whether to insert or not the enclosing class of the selected variable in the log message	insertEnclosingClass	true
Insert Enclosing Function	Whether to insert or not the enclosing function of the selected variable in the log message	insertEnclosingFunction	true
Include File Name And Line Number	Whether to include the file name and the line number of the log message	includeFileNameAndLineNum	true
Wrap Log Message	Whether to wrap the log message or not	wrapLogMessage	true
Insert Empty Line Before Log Message	Whether to insert an empty line before the log message or not	insertEmptyLineBeforeLogMessage	true
Insert Empty Line After Log Message	Whether to insert an empty line after the log message or not	insertEmptyLineAfterLogMessage	true

Roadmap

https://www.turboconsolelog.io/roadmap

Articles

• Introducing Our New Website
• Motivation behind Turbo Console Log

Contact

• Support: [email protected]
• Feedback: [email protected]
• Sponsorship: [email protected]

Release Notes

See the Changelog file for details.

Participate

You're more than welcome to participate in the development of the extension by creating pull requests and submitting issues, link of the project in github: https://github.com/Chakroun-Anas/turbo-console-log

License

MIT Copyright © Turbo Console Log

turbo-console-log's Issues

Not working with VS Code version 1.30.2

Installed extension and reloaded VS Code, but shortcode of a new console log is not working. Option is present in the command palette of VS Code, but nothing happens when the option is selected.

Current setup:

• VS Code 1.30.2
• Node.js 8.9.3
• Windows_NT ia32 10.0.17763

Unable to produce a log

Hi thanks for developing the extension looks like it would be handy!

I'm unable to get the shortcut working on my windows 10 machine however. I've tried using it on a typescript + JavaScript file with neither of them working

Version : 1.2.0

custom prefix

cool extension! The only part I don't love is the TCL: prefix. I'd prefer to change mine to - or something less distracting. Could you make the prefix accept a user setting?

How to generate the log without async in ES6 Object method

const person = {
  async sayName(name) {
    console.log('TCL: asyncsayName -> name', name);
  }
}

How to generate the log without async？

Ambigius guideline

It's take me more than an hour to figure out why I cannot use this plugin by pressing:
ctrl + alt + i
I know it's my mistake but please update guideline shortcut keys to "Ctrl + Alt + L" 😄

Looking for a contributor?

I'm probably going to keep this extension installed, but it's currently not exactly how I'd like it to be, for instance see my issues: #3 #4 #5 #6.

I can submit a few PRs for those issues I've opened, do you want me to do this?

support for backend

Hi,
Is it possible to add support for back-end languages such as C#?

how could I change log style

turbo-console-log is awesome!
when I log, the content is always wrapped by double quote. How could I change it to single quote? in setting.json? I can't find some configuration.

[FEATURE_REQUEST] To add option to use single quote

As title suggest, I'm seeing the GIF you're using is outputting single quote but what we got is double quote. Is there any option to tweak that?

Wonderful extension, but latest version is not working

On Windows 10 machine, with latest version of VSCODE and with latest version of extension is not working. I had to pick the earlier version to make it work. Tried straight forward scenario to create console.log from a variable

[Feature Request] console.debug

I would like to see an option to change the output from console.log(...) to console.debug(...). Cheers!

How do you configure this to include a prefix on variable selection ?

I'm doing alot of angular dev work, using typescript.
When selecting the variable in vscode, would it be possible to include the prefix :
this.

ex:
// console.clear();
this.module = this.modForm.value.module;
console.log('​GearTeethCalculatorComponent -> calcMODPitchDiameter -> module', module);

Ability to use VSCode Log-points

I love this extension but I've found out that I often make commits with console.logs still plaguing my code, annoying all your colleagues. I understand that there's a keybind to do this automatically but it only does per file, and have also the disadvantage that it's not automatic on push/commit (and other non-git repo workflows)

There's a VSCODE that solves the console.log issue by using what they call log-points (https://code.visualstudio.com/blogs/2018/07/12/introducing-logpoints-and-auto-attach) the only problem is that they're annoying to create as it breaks your keyboard workflow when coding.

I would love if this can be added as an option when creating the TCL console.logs instead of the regular console.log line.

Way to change default key binding.

I can take up this issue.

Ctr + Alt + I is Wrong on Mac

Ctr + option(Alt) + L is correct. not I , but L.

Cmd+D shouldn't be enforced

By default cmd+d maps to editor.action.addSelectionToNextFindMatch, which is something I, and probably many others, use pretty frequently.

I had to put:

{ "key": "cmd+d", "command": "-extension.deleteAllLogMessages" }

in my keybindings.json in order to remove this.

I don't think this shortcut should be provided by default.

Multiple declarations support

Currently this:

Gets transformed to this:

It would be nice if this extension had support for this. Ideally it should work in any non-crazy situation, or I can't use it reliably. I'm not sure how this could be solved, maybe this extension should work as a babel transform or something, but that's a big change.

[Feature request] possibility to disable className/functionName output

I love your plugin but ended up disabling it because I found the addition of prefix + className - functionName makes it really difficult to read.

Most of the time I just log the variable name and that's enough.

Could you add perhaps a setting to disable these to just have this:

console.log("SelectedVariable", SelectedVariable)

Thanks for considering

Should don't use new line when don't any variable select?

Don't select any var (my cursor in line: 287)

Then: ctl + alt + l, it create log msg on line: 288
I thinks that should be line 287

Use spaces instead of tabs

ESLint complains, rightly, for the use of tabs instead of spaces:

VUE files error: Irregular whitespace not allowed

Hi,

Since last update (1.2.11) it does not work with vue file:

I am getting the following error:
http://eslint.org/docs/rules/no-irregular-whitespace Irregular whitespace not allowed

for a console.log as follow:
console.log("​save -> this.close()", this.close())

Deleting the save (the first word in that instance, remove the error). The workaround seems a bit random. But the issue is always there in .vue file.

I think that this is different issue than #17

Any idea?

Thanks

[Feature Request] Option to disable prefix

Setting "logMessagePrefix": "" doesn't remove the prefix. I don't want any prefix and there doesn't seem to be a way to disable them; i.e. no colon.

Smarter logging

I personnally use vscode and your extension seems to be the best for what it does.

On atom there is this extension https://github.com/vishysank/console-log-atom

It features smarter logging, like for example if you try to log a condition it will log the condition and also log a message when the condition passes. It also JSON.stringify() when logging objects. There are other features just look at the readme

Do you think this would be doable with your extension?

Commands contributed to the command palette should be prefixed with the extension name

You should rename the provided commands:

Display Log Message => Turbo Console: Display Log
Delete All Log Messages => Turbo Console: Delete All Logs

Other than this being a common practice, I couldn't find those commands in the command palette because I was searching for "Turbo" or "Console"

I like this extension...

Do you think you could improve it so that if you are working with other languages.. and frameworks it can be setup for similar shortcuts.. visual studio support would be nice

ie Unity using c#//
int x = 555
Debug.Log("x:"+x):

FunctionName Not Being Parsed Out in Typescript Files

So as you can see the when generating a console.log for the bar parameter in the following function the functionName -> syntax isn't added automatically. After digging into this I noticed it was because the regular expression used for testing the line for a named function didn't allow for the return type specified by functions in typescript. It would be very useful to use the extension as intended so I went ahead and wrote up a fix for this in pull request #57.

Configuration names should have a common prefix

The four settings should have a common prefix added to avoid naming conflicts and allowing easier searching.
Instead of:

{
  "wrapLogMessage": false,
  "logMessagePrefix": "TCL",
  "addSemicolonInTheEnd": false,
  "quote": false
}

Add prefix:

{
  "turboConsoleLog.wrapLogMessage": false,
  "turboConsoleLog.logMessagePrefix": "TCL",
  "turboConsoleLog.addSemicolonInTheEnd": false,
  "turboConsoleLog.quote": false
}

Or optionally displayed as:

{
  "turboConsoleLog": {
    "wrapLogMessage": false,
    "logMessagePrefix": "TCL",
    "addSemicolonInTheEnd": false,
    "quote": false
  }
}

This makes finding and editing the appropriate settings much easier by simply searching for the name of the extension. Pull request incoming.

Option to remove semicolon

Hi,

I'm using your extension and I love it.

Would it be possible to have an option to enable/disable semicolon at the end of the console log?
When using with prettier, it always return a warning.

Thanks

Arrow functions support

This extension should support arrow functions too.

Currently the following code:

Gets transformed to:

While it should instead become something like this:

Not working properly in multi line variables

    const details = {

     title: res.data.title,

     type: res.data.location_type
  
     }; 

When i select details and try to console log using Ctrl + ALT + L

   const details = {

   console.log('TCL: App -> componentDidMount -> details', details)

   title: res.data.title, 

   type: res.data.location_type      
   };

[Feature request] TCL logging without selected text

If nothing selected and not over a word simply add new line

console.log("')

obviously respecting TCL VS code setting for parenthesis type and set the cursor within the quotes.

let word = "Hello"; // cursor lies between 'o' and 'r' of word (nothing selected).

console.log("TCL: word", word);

See existing fork: https://marketplace.visualstudio.com/items?itemName=letrieu.turbo-console-log-fork

Turbo Console Log doesn't work if the variable being used is on the last line in the file

When trying to use Turbo Console Log to output console lines for a selected variable, if that variable is on the final line of the fileTurbo Console Log doesn't output the console line at all. It should insert a new line at the end of the file and place the console line there.

Should obey tab settings in the editor

my editor is set to use 2 spaces for the tab. turbo console log inserts a real tab.

Only the `console.log` calls inserted by this extension should be removed

If I execute Delete All Log Messages on this file:

function main () {
  console.log('...');
  const foo = 1;
  console.log('main -> foo', foo);
}

It gets transformed to:

function main () {
  const foo = 1;
}

While it should instead become:

function main () {
  console.log('...');
  const foo = 1;
}

Basically only the console.log calls inserted by this extension should be removed.

One way of doing this would be to prefix all the strings with '[TS]', or something, and then check if that string is present. This would be pretty ugly though. A smarter way, that I think should work, would be to prefix the strings with one (or more) zero-width spaces and then check for those.

Cmd + alt + l on a MAC don't work for me

Cmd + alt + l on a MAC don't work for me.
I tried Cmd + shift + l it work, but override of multiple select of VS code

Prettier autoformat breaks TurboConsoleLog

Hi

I noticed that sometimes, if the console.log statement is very long then Prettier autoformats the statement in multiple lines
It looks like TurboConsoleLog is not able to track those console.log anymore, meaning that Comment All | Uncomment All | Delete All comments does not affect those console.log formatted by Prettier.

A workaround would be to able to define a custom prefix for each console.log, something like

// prettier-ignore
console.log('...')

What do you think ?
Thanks for this very handy extension ! 👍

Forgot to change the namespace of the commands

This extension provides 2 commands, extension.displayLogMessage and extension.deleteAllLogMessages.

You shouldn't prefix those commands with extension, the prefix should be turboConsoleLog or something like that.

Basically extension.displayLogMessage should be renamed to turboConsoleLog.displayLogMessage.

Please allow ` along with ' and " in configuration

So that, once log line is generated, we can easily edit to include anything else as ${}...

#Change hotkey in Description as: Pressing ctrl + alt + L instead Pressing ctrl + alt + l

Please Close following two issues by making this change @Chakroun-Anas
Issues: #20 #27
I) Insert meaningful log message automatically

Two steps:

Selecting the variable which is the subject of the debugging

** #Pressing ctrl + alt + L**

The log message will be inserted in the next line relative to the selected variable like this:

Multicursor support

When there are multiple cursors, a console log could be inserted for each variable.

not work

not work on mac

Not working but why?

Sorry to open this issue but it seems it's not working in Visual Studio Code 1.30.1 in Ubuntu 16.04.

F.Y.I

• working on an angular project;
• using vim in VSCode;
• disabling vim and reloading won't help;
• restarting the VSCode won't help;

This doesn't work anymore

When I press the default shortcut it writes ī then I changed the shortcut to Ctrl + Alt + O. It worked for a while now it's not working at all.

Custom `console.log` snippet

It would be nice if this extension had support for a custom console.log snippet, for instance this extension might currently produce the following:

console.log('myFunction -> myVar', myVar);

Some people might like it written in a different style, like:

console.log ( 'myFunction → myVar', myVar )

Support for this might be added in the form of a template setting, where custom tokens gets substituted in, for instance the default template might be:

console.log('[wrapper] -> [variable]', [variable]);

So that one could add this setting to his configuration:

"turboConsoleLog.template": "console.log ( '[wrapper] → [variable]', [variable] )"

This would also enable some advanced features, for instance I could have this template:

debug ( '[wrapper]', '[variable]', [variable] ); 

And the following function defined somewhere else in my code:

function debug ( wrapper, valueName, value ) {
  console.log ( `${wrapper} → ${valueName}`, value );
  if ( isError ( value ) ) debugger;
}

What do you think?

closing brace issue 'ㅅ')/

Hi. I've been using this extension since last week.
Thanks for your fantastic extension. 'ㅅ')/

I discovered this issue on vscode today.
// windows 7. vscode version is 1.30.2.

For example,
I tried to select 'error' text and run 'Display Log Message' feature using keyboard shortcut.

try {
  ...
} catch(error) { // I selected this 'error' parameter and run 'Display Log Message'.
  console.log('TCL: }catch -> error', error) // I think that this closing brace is issue.
}

Notworking on file .ts (angular 2+)

I selected text, using ctrl + alt + l but it does not work. Can you help me with this?

Thank you everyone.

Linting rules

It's not an issue, but please — add your own linter rules, because it hard to contribute to your project (all your code rules by internal linters of contributors).
Hope's you fix it fast.

Also, great extension and good job.

ability to add colors

I like this plugins but something that would be really helpful would be the ability to customise colors

could it be something like this

console.log("%cTCL: onPage -> id " + "%c" + id, 'color:blue', 'color:red');

macos keybinding

What are the key bindings for macos?

Alt + Shift + D doesn't work on MAC

Only the combination CTRL+Alt+L works on Mac. The other's (to comment, delete, uncomment, don't work)