Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

The VSCode Dimmer extension is great when you want to show and explain code to someone. It helpfully dims the code that's not relevant to the selected line, making it easier for your audience to focus on what you want them to.

Use VSCode Dimmer to Highlight Code when Teaching

The better-comments extension lets us specify different types of comments and color them accordingly. This lets you add semantic meaning to your comments, for example: you can mark some comments as TODO, and others as important, or as questions. You can also define your own custom types of comments.

Write Better Comments in VS Code

The Turbo Console Log extension lets us quickly add console.log statements with additional data, which makes debugging your code easier.

Make Console Logging in VS Code 10x Easier with Turbo Console Log

VS Code Extensions

https://app.egghead.io/api/v1/lessons/vs-code-use-vscode-dimmer-to-highlight-code-when-teaching/subtitles

Instructor: [00:01] Install the VS Code dimmer extension from the marketplace. I've got a demo file here we can use to test this new extension.

[00:11] Activate the dimmer by opening up the command palette and searching for ataco dimmer. Now that it's enabled, it'll dim all of the lines except for the current one.

[00:23] This is cool, but we can configure it to be more helpful. First, let's set a key binding so we can activate it via keyboard instead of the command palette. Open the keyboard shortcuts menu. Search for dimmer, and let's add a custom keybinding of Alt D.

[00:47] Back in our demo file, we can test our new keyboard shortcut to toggle the dimmer on and off. We can also change the number of lines that are dimmed as well as the opacity of the dimmed lines. Let's configure these in the settings.

[01:06] We can change the dimmer context value to control the number of lines above and below the current selected line that are not dimmed. Let's set that to two. Let's also change dimmer opacity so that the non-dimmed lines are easier to see.

[01:25] Coming back to our demo file, you can see that the dimmed lines are more transparent and more of the lines surrounding the currently selected line are visible.

https://app.egghead.io/api/v1/lessons/vs-code-use-vscode-dimmer-to-highlight-code-when-teaching/transcript

https://app.egghead.io/api/v1/lessons/vs-code-write-better-comments-in-vs-code/subtitles

Instructor: [0:00] Start by searching for the Better Comments extension and install it. Now that that's installed, let's see how it works. Regular comments will continue to appear the same, but now we have the ability to add specialized comments. We can add specific to-do comments. We can add important comments. We can add questions. We can add emphasized comments.

[0:38] We can also strike out regular comments by adding two additional slashes. The characters that control the appearance of the comments are known as tags. We can customize these tags as well as create our own custom ones. Open up your settings, and search for "better comments".

[0:58] Where it says, "Better Comments Tags," click edit settings JSON. Type Better Comments Tags and hit enter for auto completion. This list shows the existing five tags that Better Comments supports. Let's create a custom one by copying this.

[1:22] Now, whenever we start a comments with the @ sign, we want the color to be pink. You can see that the custom color hasn't taken effect. That's because we actually need to restart VS Code after changing those settings.

[1:41] I just restarted VS Code, and you can now see that our custom comment has the specific color we asked for. Any time you change the settings for Better Comments, remember to restart VS Code.

https://app.egghead.io/api/v1/lessons/vs-code-write-better-comments-in-vs-code/transcript

https://app.egghead.io/api/v1/lessons/vs-code-make-console-logging-in-vs-code-10x-easier-with-turbo-console-log/subtitles

Steven Mercatante: [00:01] Start by searching for turbo console log and install it. I've got a demo file here with some test variables, a test function, and a test class. The easiest way to use turbo console logger is to log individual variables.

[00:20] Select the variable, and then hit CTRL+ALT+L. You see that a console log statement is automatically added for us. It includes the name of the variable, the variable itself, and this TCL prefix, which stands for turbo console logger.

[00:37] We can also log multiple variables at once. We select both of these, and again hit CTRL+ALT+L. We instantly have our log statements. A cool feature of this extension is that it can also tell you the name of the function or the class that contains the variable that you're logging. Let's test it on the greet function.

[01:03] You'll notice that we still have the TCL prefix, but the log also tells us the function that was this called from and the variable name itself. We can do the same thing for the class properties. Select both of them, and again, hit CTRL+ALT+L. This time, we have the TCL prefix, the name of the class, the name of the method, and then finally, the name of the property itself.

[01:29] This is great for debugging, but at some point, all these messages do become noisy. You can comment all of them out at once by pressing ALT+SHIFT+C. You can uncomment these by using ALT+SHIFT+U. You can also delete all of them using ALT+SHIFT+D.

[01:49] You can also change the prefix from TCL to whatever you want by going into the settings. Look for turbo console log-log message prefix and change this to whatever you want. I'll use three hashes. Come back to our demo file, and select some variables. You'll notice here that we've got our custom prefix.

https://app.egghead.io/api/v1/lessons/vs-code-make-console-logging-in-vs-code-10x-easier-with-turbo-console-log/transcript

Course Content