These two days the project is not very busy, toss about my own vscode plug-in, to do good work, must first sharpened its tools, also counted as a small harvest

background

In a company with multiple partners writing ts large projects, either use Sources for breakpoint debugging, or simply use console.log() or console.table(). The former is suitable for complex, asynchronous bug debugging, and for simple console output. No need to open the corresponding TS file, line by line to find the compiled code and breakpoints (js files will be easier), that is the purpose of this article, log faster and clearer

With the process

Javascript Console Utils is a handy plugin for javascript console utils

Use method: After selecting any variable, simply press Shift + Command +L, and the next selected line will automatically display a fixed format log, such as console.log(‘ XXX :’, XXX).

If the editor is AutoSave, the result can be seen on the console after hot update compilation. It is really convenient and faster than adding user code snippets to the editor to use shortcut commands. 😊 also provides a shortcut key shift+ Command +D. One click to delete all console.log on this page is also common.

Improve this plugin

However, there are still some areas of dissatisfaction, such as in the case of multi-player collaborative projects, which our console often looks like, 😂

console.log('%cconfig: ','color: MidnightBlue; background: Aquamarine; font-size: 20px; ',config);

Step 1 Download

https://github.com/whtouche/vscode-js-console-utils clone download this plugin resources to the local, NPM install to run once, then open the project

Step 2 Modify

const str = `${text}`.replace(/\'|\"/g,'');
const logToInsert = `console.log('%c${str}: ', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;',${text}); `;Copy the code
Step 3 Pack

Install vsCE NPM install vsCE -g

Modify package version as 0.8.0(original value 0.7.0), as shown below

vsce package

Step 4 Installation

If it already exists, uninstall the javascript console utils plug-in and install it from vscode

Update: Modify shortcut keys here ↓