12 VS Code Extensions to INCREASE Productivity 2024

Summary

This video script discusses the importance of a healthy coding environment for productivity and quality of work. It introduces various extensions for Visual Studio Code (VS Code) that are essential for a computer science student or any programmer. The extensions covered include Code Runner for quick testing, Tabnine for AI coding assistance, Live Server for real-time web development, Excel Viewer for viewing spreadsheets, Code Tour for presenting code walkthroughs, To-Do Highlights for task management, Material Icon Theme for aesthetic improvement, Draw IO for UML diagramming, Polar Code for code snippet presentation, Code Spell Checker for identifying errors, Prettier for code formatting, and Vibrancy for a sleek visual upgrade. The video aims to enhance the viewer's VS Code experience and productivity.

Takeaways

• 🚀 To optimize productivity, a healthy coding environment is crucial for programmers.
• 💻 The video recommends using Visual Studio Code (VS Code) as the preferred IDE for its versatility and features.
• 🔍 The 'Code Runner' extension is highlighted for its ability to streamline the process of running code snippets, saving time and effort.
• 🌟 'Tab 9' is introduced as an AI coding assistant that provides real-time suggestions and can even write code based on user input.
• 🌐 'Live Server' is essential for web developers, allowing them to see their code changes in real-time directly in the browser.
• 📊 The 'Excel Viewer' extension is useful for data scientists and analysts, enabling them to view Excel spreadsheets directly within VS Code.
• 🎥 'Code Tour' helps in creating walkthroughs of code, which is beneficial for presentations or explaining code to others.
• 📌 'To-Do Highlights' assists in keeping track of tasks or comments that need attention within the codebase.
• 🎨 'Material Icon Theme' adds an aesthetic touch to the IDE by providing better-looking icons for files and folders.
• 📐 'Draw IO' is a game-changer for creating UML diagrams directly within VS Code, eliminating the need for external tools.
• 🖌 'Polar Code' is a tool for presenting code snippets professionally, with customizable backgrounds and formatting options.
• ✅ 'Code Spell Checker' helps identify and correct spelling mistakes in code comments, preventing potential errors and improving code quality.

Q & A

What is the main topic of the video?

The main topic of the video is about the best Visual Studio Code (VS Code) extensions that can optimize productivity and quality of work for programmers.

What are the three things needed to follow the video?

To follow the video, one needs a computer or laptop that can turn on, an internet connection for browsing the web, and an Integrated Development Environment (IDE) like VS Code.

What is the first VS Code extension discussed in the video?

The first VS Code extension discussed is 'Code Runner', which automates the process of compiling and running code.

How does Code Runner streamline the coding process?

Code Runner streamlines the coding process by automatically compiling and running code, eliminating the need for manual compilation and execution commands in the terminal.

What is 'Tabnine' and how does it assist in coding?

Tabnine is an AI coding assistant that suggests code snippets in real-time based on what the programmer is typing, making it easier to write and complete code faster.

What is 'Live Server' and why is it essential for web developers?

Live Server is an extension that allows web developers to simultaneously code and see the changes reflected in a live browser preview, making it easier to调试 and test web applications in real-time.

How does the 'Excel Viewer' extension benefit data scientists and analysts?

The 'Excel Viewer' extension allows users to view and interact with Excel spreadsheets directly within VS Code, which can be beneficial for data scientists and analysts who need to visualize and work with data without switching between applications.

What is 'Code Tour' and how does it help in presenting code?

Code Tour is an extension that enables users to create guided tours of their code, highlighting specific sections, and providing comments to walk others through the code's functionality or structure, which is useful for presentations or code reviews.

What does the 'To-Do Highlights' extension do?

The 'To-Do Highlights' extension highlights comments marked with 'todo' or 'fix me' (in capital letters) in bright colors, making it easier to identify and address unfinished tasks or issues within the code.

Why is 'Draw IO' considered a game-changing extension?

Draw IO is considered a game-changing extension because it allows users to create UML diagrams and other diagrams within VS Code itself, without needing to use separate diagramming software, thus streamlining the development process.

What is 'Polar Code' and how does it enhance code presentation?

Polar Code is an extension that helps present code snippets in a professional and visually appealing format, similar to a Polaroid picture. It allows users to export code snippets as images with customizable backgrounds and transparency settings.

How does the 'Code Spell Checker' extension help in preventing errors?

The 'Code Spell Checker' extension identifies and underlines incorrectly spelled words in the code, offering quick fixes or suggestions for corrections, which helps prevent compilation errors and improves code quality.

What is the purpose of the 'Prettier' extension?

The 'Prettier' extension is an automatic code formatter that ensures consistent and properly structured code formatting, making the code more readable and easier to maintain, especially in collaborative projects.

What effect does the 'Vibrancy' extension have on the VS Code interface?

The 'Vibrancy' extension applies a glass-like, transparent design effect to the VS Code interface, enhancing its aesthetics and providing a more visually pleasing coding environment.

Outlines

00:00

📌 Introduction to Optimizing Coding Environment with VS Code Extensions

The paragraph introduces the importance of a healthy coding environment for productivity and work quality. It sets the stage for discussing the best VS Code extensions used by a full-time computer science student. The video requires a computer or laptop, an internet connection, and an IDE like VS Code. The speaker shares a personal favorite extension, Code Runner, which simplifies the process of compiling and running Java programs, streamlining the development workflow.

05:01

🛠️ Enhancing Coding with AI and Live Server Extensions

This paragraph delves into the installation and use of two VS Code extensions: Tab 9, an AI coding assistant, and Live Server, essential for web developers. Tab 9 offers real-time code suggestions and an AI chat feature for generating code snippets. Live Server allows simultaneous coding and previewing of web projects in a browser, enabling real-time updates and easy styling adjustments.

10:01

📊 Viewing Data in VS Code with Excel Viewer and Presenting Code with Code Tour

The speaker discusses the Excel Viewer extension for viewing spreadsheets within VS Code, beneficial for data scientists and analysts. Another extension, Code Tour, is introduced for presenting code walkthroughs. It allows users to record and navigate through comments in the code, providing an interactive and educational experience for viewers.

15:02

📝 Managing To-Do Lists in Code with To-Do Highlights and Aesthetic Enhancements

This section covers the To-Do Highlights extension for managing and highlighting to-do comments in the code. It also touches on the Material Icon Theme extension for aesthetically enhancing file icons in VS Code. The speaker emphasizes the importance of both practical and visual aspects of the coding environment.

20:04

🎨 Creating UML Diagrams with Draw.IO and Presenting Code Snippets with Polar Code

The speaker introduces Draw.IO for creating UML diagrams within VS Code, streamlining the process before coding begins. Polar Code is highlighted for presenting code snippets professionally. The extensions cater to different aspects of development, from planning and visualization to presentation and code sharing.

25:04

🔍 Spell Checking in Code and Formatting with Prettier

The paragraph discusses the Code Spell Checker extension for identifying and correcting spelling mistakes in code, preventing compilation errors. The Prettier extension is introduced for automatic code formatting, ensuring clean and readable code. These tools help developers maintain code quality and save time on formatting tasks.

✨ Enhancing Visual Aesthetics with Vibrancy and Wrapping Up the Video

The final paragraph introduces Vibrancy, an extension for a glass-morphism design in VS Code, enhancing the visual appeal of the development environment. The speaker then concludes the video by summarizing the discussed extensions and encouraging viewers to suggest more, like the video, and subscribe to the channel.

Keywords

💡VS Code

VS Code, or Visual Studio Code, is a free and open-source code editor developed by Microsoft. It is highly customizable with extensions and supports a wide range of programming languages, making it a popular choice among developers. In the video, VS Code is the primary tool discussed for enhancing productivity and coding environment through various extensions.

💡Extensions

Extensions are add-ons that enhance the functionality of a software application, like VS Code. They can provide new features, improve existing ones, or integrate with other tools and services. In the context of the video, the presenter shares their favorite VS Code extensions that improve coding efficiency and experience.

💡Productivity

Productivity refers to the efficiency and effectiveness with which tasks are completed. In the context of programming, productivity can be influenced by the tools and environment used. The video focuses on how certain VS Code extensions can optimize a programmer's productivity by streamlining common tasks and providing intelligent suggestions.

💡Code Runner

Code Runner is a VS Code extension that allows users to run code snippets or entire files directly within the editor. It supports multiple programming languages and simplifies the process of compiling and executing code, which can significantly speed up development and testing workflows.

💡Tabnine

Tabnine is an AI-powered coding assistant extension for VS Code that provides intelligent code completions based on the context of the code being written. It helps developers write code faster and with fewer errors by suggesting the most likely code completions as they type.

💡Live Server

Live Server is a VS Code extension that allows for live reloading of web pages during development. When changes are made to the code, the browser automatically refreshes to display the updated content, which is particularly useful for web developers to see the results of their changes in real-time.

💡Excel Viewer

Excel Viewer is a VS Code extension that enables users to view and interact with Excel spreadsheets directly within the editor. This can be beneficial for data scientists and analysts who need to work with data without switching between applications.

💡Code Tour

Code Tour is a VS Code extension that allows developers to create guided tours or walkthroughs of their code. It is useful for code presentations, demonstrations, or when onboarding new team members, as it provides a step-by-step explanation of how the code works.

💡To-Do Highlights

To-Do Highlights is a VS Code extension that visually emphasizes to-do comments or tasks within the code. It helps developers to easily identify and track tasks that need attention, such as fixes or improvements, by highlighting them with a distinct color.

💡Material Icon Theme

Material Icon Theme is a VS Code extension that enhances the appearance of file and folder icons within the editor, giving them a more modern and aesthetically pleasing design. It is part of the broader Material Design language and aims to improve the overall look and feel of the development environment.

💡Draw.IO

Draw.IO, now integrated as diagrams.net, is a free, open-source diagram software that allows users to create and share various types of diagrams, including UML diagrams, flowcharts, and network diagrams. In the context of the video, the Draw.IO extension for VS Code enables developers to create diagrams directly within the editor, which can be particularly useful for visualizing the structure of a project before coding.

💡Polar Code

Polar Code is a VS Code extension that allows developers to present their code snippets in a visually appealing and professional format, similar to a Polaroid picture. It offers features like background customization and transparency adjustments, making it ideal for sharing code with others in a polished manner.

💡Code Spell Checker

Code Spell Checker is a VS Code extension designed to identify and correct spelling mistakes within code comments and strings. By integrating a dictionary and spell-checking capabilities, it helps developers maintain clear and professional code, reducing the risk of errors and improving code readability.

💡Prettier

Prettier is an opinionated code formatter that automatically formats code to adhere to a consistent style. It supports multiple programming languages and integrates with editors like VS Code to ensure that code is formatted correctly upon saving. Prettier helps maintain a clean codebase and can reduce the time spent on formatting tasks.

💡Vibrancy

Vibrancy is a VS Code extension that applies a translucent, glass-like effect to the editor's user interface. It enhances the visual aesthetics of the development environment by allowing colors from the desktop wallpaper to shine through the editor's panels, providing a more vibrant and personalized look.

Highlights

The importance of a healthy coding environment for optimizing productivity and work quality.

Introduction to Visual Studio Code (VS Code) as a preferred IDE for programming.

The necessity of three things for the video: a computer, internet connection, and an IDE like VS Code.

Installing and using the Code Runner extension for efficient Java program execution.

The ease of use provided by Code Runner in streamlining the Java compilation process.

Installing the Tabnine AI coding assistant for real-time code suggestions.

The process of signing in to Tabnine and linking it with VS Code.

Using Tabnine to generate code snippets and streamline coding tasks.

The Live Server extension for real-time web development and instant preview of changes.

Excel Viewer extension for viewing Excel spreadsheets directly within VS Code.

Code Tour extension for creating guided walkthroughs of code projects.

To-Do Highlights extension for emphasizing and managing tasks within the code.

Material Icon Theme extension for enhancing the aesthetics of VS Code file icons.

Draw IO extension for creating UML diagrams within VS Code for project visualization.

Polar Code extension for presenting code snippets in a professional format.

Code Spell Checker extension for identifying and correcting spelling errors in code.

Prettier extension for automatic code formatting and structuring.

Vibrancy extension for a visually appealing, glass-like interface in VS Code.

The video's purpose of showcasing essential VS Code extensions for computer science students and developers.

Transcripts

whether you guys have just started out

on your programming Journey or you've

been coding for a little while now you

may have come to realize that a healthy

coding environment is essential for

optimizing your productivity and quality

of work that is why today we're going to

be looking at the best vs code

extensions that I use in my day-to-day

work as a full-time computer science

student you're only going to need three

things in this video a computer or a

laptop that has the ability to turn on

an internet connection that allows you

to browse the web and an IDE also known

as an integrated development environment

in this specific video we'll be using vs

code you may have come across it before

it's quite an underground application

it's my personal favorite so that's what

we're going to roll with I'll leave a

link in the description for you guys if

you want to download that bad boy once

you have downloaded and installed set

application you'll be met with a welcome

page which is very nice close that

ASAP cuz you will not be needing it so

the first thing that you guys are going

to want to do is head over to the

extension section here it looks like a

little window and we're going to type in

code runner in the search bar there all

right now that will pop up and it'll be

the first one with 24.5 million

downloads at this time and then you'll

see it's got 4 and 1 half Stars so it's

trusted it's a very good extension and

you'll notice this little play icon

appears up here so what we're going to

do is we're going to test it out right

now so I've got this little test Java

file here um I'm going to drag it in as

you can see it's just a simple hello

world program and then I'm going to

navigate my way up here and then click

the play button now you'll notice that

hello world is output down the bottom

here so what vs code is doing here is

instead of manually needing to compile

our classes in our Java file it just

automatically comp compiles them for us

when we click that run button and then

it will print that output for us as well

so what happens usually in order to

compile a Java class is you need to open

up a terminal and use the Java C command

to actually compile that class and then

after that use the Java command to

actually run the application so as you

can see it's a bit of a tedious progress

if we wanted to do that over and over to

check changes quickly in our program so

what code Runner does is it streamlines

that process and makes it a lot easier

for us to quickly check what our program

is outputting and I would say that is

the most essential vs code extension for

me so I 100% recommend you guys add that

right

now so this is basically going to be our

little AI coding assistant it's

basically going to read what we're

typing in real time and suggest things

that it thinks that we want to type out

in our code so what you're going to want

to do here is press the install button

and you'll notice here down at the

bottom we're going to get a little popup

that says sign in to use tab 9 so we'll

click that and then open it up in our

web browser I'm using Safari for this

tutorial but you can use what you like

then we're going to need to sign up and

create an account and then go ahead and

click that create account button then

we're going to get a little prompt here

saying that we need to sign in using an

authentication token so what we're going

to do here is copy this token after you

guys have copied that token we're going

to go back to our vs code and we're

going to open up our Command pallet so

we're going to do this by pressing

command shift p on Mac or control shift

p on Windows and then we're going to

type in tab 9 sign in using or token and

then we're just going to click sign in

here and then we will get a prompt here

telling us to enter our or token so make

sure you paste that authentification

token inside the prompt there and then

press enter and then you'll notice after

that we get a little notification down

here saying that we are signed in now

you may also notice that there's a red

exclamation mark down here you'll just

want to click that and it'll open up our

tab 9 Hub in our vs code and it's just

telling us that we need to verify our

email so make sure you go inside of your

emails and verify that really quickly as

you can see I go into my gmail here I go

and I see I've got a new email from tab9

I click it and then there is an option

to verify now after I click that it'll

send me to this web page here notifying

me that I have verified my email address

after that navigate your way back to vs

code and you'll notice that that red

notification telling you to activate

your email address should have

disappeared if it hasn't just wait a

little bit longer and it should

disappear and then after that we are

ready to use tab n so what you're going

to want to do is create a new file or

drag in an existing file I've just

created this file test. Java on my

desktop here and I'm dragging that in

it's completely blank so we're starting

from scratch I'm going to create a class

called test and then we're going to wrap

that here in parenthesis so you'll

notice that as we go to the next line in

our code tab 9 is already suggesting

what it thinks we're going to want to

write next in our code so in Java the

first thing you need to do is create the

main method and that's what it's

suggesting that we do here so the way

that it works is it suggests what it

thinks we're going to write next and

then we can choose to press the Tab Key

and that autocompletes the suggestion

for us if we don't want want to write

what it's suggesting to us we just keep

on typing what we were going to type

originally so you'll see here that it's

suggesting to me to write a

system.out.print line method with the

text hello world but I actually don't

want to do that for this particular

program so what I'm going to do is just

write what I was going to originally

write instead so I'm going to declare an

INT variable here I'm going to call it I

and I'm going to make it equal to zero

and then you'll actually notice it

suggests a while loop here for us so it

has the complete while loop already

typed out for us all we need to do is

press tab if we want that code to be

generated so what's going to happen in

this simple program is it's going to

check if I is less than 10 and if it is

we're going to print out I and then

we're going to increment the value of I

by 1 so we should get an output of 0 1 2

3 4 5 6 7 89 on individual lines and so

what we're going to do is we're going to

navigate up here to the top right hand

section of our vs code and click our run

button and then you'll notice that our

program is outputting as expected now

you're probably thinking that's a really

cool feature that tab 9 has but there's

one more thing that makes it even cooler

so what we're going to do is we're going

to navigate our way down to this panel

on the left here and you should see this

icon that's popped up since we've

installed tab 9 so this is the tab 9

logo and what we're going to do we're

just going to click on it here and

you'll notice it opens up an AI chat

feature I'm going to type something in

here like write me a Hello World program

this is very simple but just for the

purpose of this video I'm going to be

showing you what it's going to do so as

you can see it generates us some code

here and what we're going to do is

actually click that insert button there

and it'll automatically copy and paste

that code into our environment here into

our file and I'm just going to remove

the public keyword here cuz we don't

need it it's a very small file that

we're working with so once we've done

that we're going to save our file and

then we're going to click our run button

up here okay now we should get an output

that says hello world so you'll see that

the code generated by tab 9 Works um you

know it's not faulty there's not any

bugs not any bugs that I've come across

in my time sometimes you have to change

a few things like I had to do there I

had to remove the public keyword in

order to get it to run just Tinker with

it a little bit you'll find that it

works 99% of the

time now I know that a lot of my

subscribers are web developers so this

next extension is very cool we're going

to go into our extension tab here and

type in Live server now this is a very

cool extension and absolutely essential

if you guys want to be professional web

developers so install that right now if

you haven't already and down the bottom

you'll notice that we get a little popup

here that says go live so what that's

going to do is it's basically going to

allow us to simultane ously code and see

what the changes we make in our code are

in our actual browser so what I'm going

to do here is open up a project that

I've been working on this is the

previous tutorial that I put up on my

channel now when I'm in my index.html

file and I click that go live button

you'll notice that the program that I've

been working on is going to open up in

my web browser and I don't manually have

to open up the index.html file from the

actual folder that I'm working in so

that's really cool now you'll notice

here I'm going to go back in and I'm

actually going to remove the stylesheet

from my program so I'll just comment it

out now and then I'll make sure that I

save my file and then I'll go back into

my web browser and you'll notice that

straight away after saving the file all

my styling will be removed from my

program it allows you to preview your

project in real time you don't have to

continually save the file and then open

it back up in your web browser close it

again save the file it just

automatically does that for you when you

save your file in your IDE so that's

very cool highly recommend that now

let's move on to the next

one this next extension is very useful

for data scientists or data analysts

have you ever been programming in vs

code or your IDE and you wish that you

could just view your Excel spreadsheet

inside of vs code without having to

navigate to a completely different

application well this extension does it

for you so let me show you what happens

when we actually drag an Excel file into

vs code without having this extension

installed okay as you can see I've got

this employee sample data here I'm going

to drag that into my vs code and then

we'll get a warning message here that

says the file is not displayed in the

text editor because it is either binary

or uses an unsupported text encoding I'm

just going to click this button here

that says open anyway and just select

text editor here now this is what our

spreadsheet looks like inside vs code

right now so as you can see this is

completely useless we can't use any of

this data we can't see any of it even so

what I'm going to do here is navigate

over to my extension Tab and I'm going

to type in Excel viewer inside the

search bar here okay now it's going to

be the first extension that pops up here

by grape City and all we're going to do

is install it okay and then we're going

to go back here and we're going to drag

our employee sample data back in and

look what happens we have a beautiful

spreadsheet displayed in our vs code

without any errors we can see our data

nicely formatted so that is the beauty

of this extension guys if you're a data

scientist or a data analyst this is such

a powerful tool it helps you visualize

your data without actually having to

navigate from vs code back to excel back

to vs code and so forth and I highly

recommend that if you guys are studying

data science or data analytics make sure

you have this extension installed on

your vs

code so this next extension is very cool

as well if you guys are needing to

present your code or you know just show

a walk through of how your code Works

whether it be to employees or your

friends family whoever this is a very

cool extension that you guys can install

it is called code tour so it's going to

be this one here by Jonathan Carter so

Props to him for creating this extension

it's very cool what we're going to do is

just install that here and then we're

going to drag in a project that I am

actually working on at the moment uh you

guys can drag in any project I'm just

using this for the sake of the tutorial

and you'll see after we've installed our

code tour extension we'll have this

little code to a tab in our Explorer of

our vs code here now what we can do here

is open up any file it can be a HTML

file CSS you know javascripts SQL

whatever you want um and we're going to

click this button down here record tour

now we're going to get a prompt up the

top here that says specify the title of

the tour or save it to a specific

location so this is just naming our tour

I'm going to call it HTML tour for now

and you'll notice that a new tour is

created down here on our left now just

for this example say that I wanted to

explain to somebody what the body

section of my HTML was doing okay so

instead of commenting what each line

does I can actually go to the line in my

code here and I can click the plus

symbol over here on the left now a

prompt will pop up asking us to type a

new comment so for this example I'm just

going to type in create div container to

hold contents on notet taking app now

what I'm going to do is go down here and

click add step to tour and you'll notice

we get a popup here and it is the start

of our tour so this is going to be the

first step the first point of our tour

if you will and you'll see we've got our

comment there and it's going to be step

one of one all right so what I can do to

exit that is just click this little

arrow here and then we'll go to the next

line and create another step so I'm just

going to write second step of our

program and click add step to tour now

you'll notice that there is also a

previous button here that pops up this

navigates our way back to the previous

step that we just created which was

creating our div container and then you

can click next to go to step two of our

tour and as you can see the steps also

appear over here on the left in our

Explorer let's go to this line here and

create a new comment creating list

header and you'll notice that we have

another step that appears on the left

here in our Explorer now I'm going to

create another step and just say use

icon from font awesome and then I'm

going to add that step to the tour as

well you'll notice we get that added

down the bottom in our Explorer now

let's run through our code tour from the

start so I'm going to close that and

then I'm going to click HTML tour here

and then I'm going to go to the first

step and then I'm going to click next

and that's going to go to step two and

it's going to navigate to that line step

three and then I'm going to click next

again and you'll notice that each time I

go through these steps we just get a

little tick here as we've completed them

and then I'm going to go to my fourth

step here you'll see step number four of

four and then I can click either

previous and go back and look at the

different steps that I've created if I

want to review them again or just finish

tour there now you'll see that the green

tick appears at the top of our tour and

that means we have finished we can

always redo it again you can do it as

many times as you want now you'll notice

that we can also edit the steps here as

well so once you've created them it's

not set in stone you guys can edit the

comments so that's a very cool feature

as

well so this next extension is very cool

we're going to go to our search bar here

and type in to-do and then we're going

to click the first one here called to-do

highlights we're just going to click the

install button there and then afterwards

just open a file of you're choosing it

can be any file you want now you'll see

in my Javascript file here I have a

function called Update note okay say I

need to do something later on inside of

my uh Update note function to change it

or something you know we need to uh we

need we need to alter it somehow so what

most people would do when they first

start out programming is they'll put a

comment above the function that they've

written or inside the function just to

remind them that they need to do

something later on whether they need to

alter it fix it whatever they need to do

just to get it working they'll write a

comment there just to remind them now by

all means this is a great thing to do

but the problem with this is in large

scale projects your comments can get

lost in your code very very easily so

with this extension to-do highlight

what's going to happen is we're just

going to use a keyword to-do here and

then we're just going to put a coal in

and then afterwards we're going to write

our comment so you'll notice there that

our to-do section is going to be

highlighted in a bright yellow now this

is very beneficial because when you're

scrolling through a lot of code you can

easily Miss like like a lot of comments

so when you see this big bright yellow

highlighted text appear you'll be like

oh yep there's my comment and then

you'll be able to go and fix it

accordingly now if for any reason you

don't like that bright yellow color you

can also use a bright reddish color and

you can use that by typing fix me in

capital letters and then a colon and

then write your comment after that and

now your comment has a nice red

highlighted section there that stands

out now if for any reason this extension

is not working as expected like you

can't see the highlighted section appear

what we're going to do is open up our

Command pallet on our vs code so on Mac

this is command shift p and then on

Windows it's control shift p and then

what we're going to do is we're just

going to type in toggle H now you'll

notice this little popup here that says

to do highlight toggle highlight make

sure you click that so in this example

I've already got it set up so you can

see that my comments are highlighted but

if I toggle H here in my command palet

and press enter you'll notice that the

highlighted section disappears so when

you first install the extension just

make sure that you go into your command

pet and type in toggle H and press enter

just to ensure that the extension is

working as

predicted the next extension is not so

much productive as it is decorative I'm

just including it because I like my vs

code to look aesthetic and clean and I

think that incorporating this extension

just adds to the overall aesthetic of

the development environment so basically

how it works is I've got a few files

open here you can see index.html

script.js and style.css now the icons

that represent those files look okay but

they don't look amazing we can make them

look a whole lot better and we can do

this by going to our extension section

here and we'll just type in material

icon now it's going to be the first one

that pops up by Philip Keefe and we're

just going to install that one here okay

and it's going to prompt us to select a

theme once we have and we're just going

to make sure that we select our material

icon theme now if I close that and go

back to Explorer here inside of our

folder our index.html file our script.js

and our style do CSS files all have

really cool icons next to them and

they'll also appear up the top there in

the tab section so I think that just

looks a whole lot nicer than the

built-in vs code icons that they provide

uh you don't have to do this like I said

before but I just think it adds to the

overall Aesthetics of the

program this next extension is an

absolute Game Changer if you guys have

created a large or medium scale project

you'll know that creating a uml diagram

is one of the most beneficial things you

can do before you even start coding now

in order to create these diagrams you

need to use a completely different piece

of software or a web application to do

so now whilst that is great and they're

very powerful tools if you guys just

want something really quick to use this

is one of the best extensions that I

have ever come across so what we're

going to do here is we're going to

navigate over to our extension tab here

and we're going to type in draw IO we're

going to click on the first one here and

just install it and then I'm going to go

over here into my folder I'm going to

create a new file and I'm just going to

call it drawing. draw iio so what's very

important here is that you guys add the

draw IO extension otherwise this won't

work and now as soon as we do so you'll

notice that an offline version of draw

iio will appear inside of our vs code

and I can go down into the general tab

here and drag this rectangle in I can

drag this cylinder in here and then I

can also drag in this line and I can

connect the rectangle to the cylinder I

can then make that cylinder as big as I

want it to be and then I can label it

database for example and then I can

label the rectangle up here server so

this is just a quick diagram linking our

database to our server you can do a

whole lot of other things too you can

link classs lists whatever you guys want

you can also change the colors of all

these different shapes as well so make

it nice and appealing and once you

finished creating your diagram you can

go to the file section here and then

click export and then you can export

your file as an SVG file a PNG file or a

drawer IO file so I use this extension

all the time guys it's very useful

before you're starting each of your

projects to create a diagram just to

visualize the overall structure without

having to chop and change between

different programs so having everything

in vs code just helps

tenfold this next extension is super

cool essentially what it allows you to

do is produce really high quality code

Snippets if you have a snippet of code

that you need to show to somebody and

you need to present it in a professional

manner this is a really good tool to

help you with that so the extension is

called polar code all right now it's

basically a Polaroid for your code that

is their tagline if you will but what

you want to do is make sure that you

don't install the first one that pops up

you want to install the 2022 version so

the original version actually had a lot

of bugs and it ended up breaking back in

2019 so make sure you guys install that

cuz it is the actual working version and

is up to date next I'm going to navigate

my way to my script.js file and I'm just

going to bring up my command pallette

inside of my command pet I'm going to

type in polar code and then press enter

and you'll notice that our polar code

extension pops up here on the right so

as you can see we're presented with this

snippet of code that just outlines how

we use the extension so what I'm going

to do here is just make this a little

bigger and I'm going to highlight my

close popup function here okay now

you'll see as soon as I highlight it in

real time it will be converted over into

our polar code extension here and we can

see a preview of our code snippet now we

have two options here Shadow and

transparent if I click Shadow I can

toggle the Shadow on and off and then if

I click transparent I can toggle the

transparency on and off so if I want a

nice little background there I can uh

turn the transparency off and then

choose a color for the background I'm

just going to use this nice purple color

now we'll click this little icon down

here and this allows us to export our

code in the form of a PNG file and then

as soon as I click save you can see that

it gets sent to my desktop here and I

can open it up and I've got this

beautifully formatted piece of code

that's ready to be presented to anybody

of my choosing so I would highly

recommend that you guys install this

extension especially if you present your

code to people quite often

now this next extension can be an

absolute Lifesaver what I'm going to do

to demonstrate how useful this extension

can be is I'm just going to drag this

test. Java file off my desktop into my

vs code and then as you can see I have

this simple test class here inside we've

got our main method and then we have a

Boolean declared here called B and it's

equal to false and then we just have a

simple if statement okay so if B is

equal to false then we print out bullan

is false and then if B is equal to

anything else which it can only be equal

to true then we're going to Output

Boolean is not false now you may notice

a couple of issues in our code here

pause the video and see if you can spot

them so if you guys did notice when

we've declared our Boolean variable here

our Boolean keyword is spelled

incorrectly it's meant to be b l e a an

instead of b o l e a an so when we

compile our code in a second here we're

going to come across an error that could

have been avoided if we had this

extension installed you'll also notice

that in our first print line function

here we've got a sentence that has a

word spelled incorrectly while this

particular spelling error won't actually

stop our program from running it's very

important that we do fix these

especially if you guys are deploying

this in a professional workspace as you

can see here when we run our code we

have a compilation error on line four of

our Java file now this is good we've

identified the error and we can go fix

it accordingly but what would be really

nice is if we never had to encounter

this error in the first place so what

I'm going to do here is I'm going to go

over to my extensions and I'm going to

type in code spell checker now it's

going to be the first one that pops up

here by Street side software and you're

going to do is click that install button

now let's go back to our Java file here

and the first thing that we're going to

notice is our Boolean keyword is

underlined blue now much like Microsoft

Word and many other applications this

extension is able to identify which

words are spelled incorrectly inside of

our code and it will let us know what

needs to be fixed you'll also notice

here that in our print line function it

has correctly identified that the word

false has been spelled incorrectly so

what we can do now is we can hover over

our Boolean keyword that's spelled wrong

and we can click Quick Fix and what it's

going to do is is it's going to suggest

us words that it thinks that we were

going to type out so as you can see

we've got bullion here the second from

the top and if we click that then it'll

just quickly change our Boolean keyword

to be spelled correctly if you don't

want to use that quick fix function you

can just manually type it out like I've

done here as well now you can see here

when we run our code we have a perfect

output with zero errors you'll see

Boolean is false as output here because

B is equal to false so whilst this is a

very basic extension it is extremely

helpful and saves you a lot of time

especially when you're coming across a

lot of compilation

errors so the next extension on our list

is called prettier what this is is an

automatic code formatter so when you

guys are writing your code you want to

make sure that you format it and

structure it correctly good formatting

is beneficial for multiple reasons

including optimizing the readability of

your code so when you're working on a

project with multiple other people you

want to make sure that they can read and

comprehend the code that you've written

without any issues this extension is

fantastic for doing exactly that it

takes all the formatting worry away and

just automatically does it itself so

what I'm going to do is drag in this

test JavaScript file here and you can

see I've got these three functions now

while these functions are empty they're

formatted terribly so what we're going

to do we're going to head over to our

extensions panel here and we're going to

type in prettier it's going to be the

first one that pops up so we're going to

install that there and then what we're

going to do is we're going to head down

to our settings here what we're going to

do is type in format on Save and we're

going to make sure that that is ticked

this is going to ensure that every time

we save a file inside of our vs code

it's automatically going to be formatted

now the next thing we're going to do is

we're going to open up our Command pet

and we're going to type in preferences

open user settings now what we're going

to do is we're going to go back into our

extension tab here and we're just going

to copy this snippet of code into our

settings. Json file so just highlight

that copy it and then over here in our

settings. Json file we're going to add a

comma at the end here of our format on

Save then we're going to paste in the

code snippet that we copied from our

extension and then make sure that you

save the settings file now we're going

to go back into our test Javascript file

here we're going to go file and then

save and then straight away you're going

to notice that our code is formatted

beautifully into this nice nested

structure so that is the beauty of this

extension it worries about all the

formatting and structuring of your code

for you leaving you guys more time to

focus on the project that you're working

on okay so the last extension on our

list is called vibrancy so much like our

icons extension this is very much

decorative it doesn't really have any

other purpose besides making sure that

your vs code looks immaculate so in your

extension search bar type in vibrancy

and then it's going to be the second one

that pops up now let's have a look here

in the description of the extension now

when you install this extension you're

going to receive an error code in the

bottom right hand side of your vs code

that says your code installation appears

to be corrupt please reinstall now the

developer of this extension has

acknowledged this error they've told us

that the warning is safe to disregard

and all changes can be reverted now if

you click on the Cog wheel and select

don't show again you'll never see that

error message pop up when you start up

your vs code now one of the most

important things that you guys need to

do before you install this extension is

make sure that your theme is set to dark

plus so whatever theme that you guys

have right now in your vs code make sure

that you revert it back to the default

theme which is dark plus so after you

guys have reverted the theme back to

dark plus it is safe to install our

theme so what we're going to do is click

the install button on vibrancy continued

and then we're going to open our Command

pallet and type in reload vibrancy after

you've selected that we'll get a

notification in the bottom right hand

corner here that says vibrancy enabled

restart to take effect so what we're

going to do is click that there and it's

just going to close our vs code for us

and restart it accordingly now when it

pops up we've got this nice glass

morphism kind of design here and you'll

also see here in the bottom right hand

corner we received that warning that we

were talking about earlier all we're

going to do is click that settings

button and then click don't show again

so there's nothing to worry about as the

developer said in their description the

only reason that it's popping up is that

it's editing the vs codes built-in CSS

so as you can see we've got that nice

glass look that we were after and we can

use this with any other theme that we've

also installed in our vs code so I'm

going to go back and I'm going to change

my theme to pale Knight which was what I

was running before in my vs code so

you'll see that I can actually use the

vibrancy continued theme and my pale

Knight theme at the same time so you

guys don't have to say goodbye to

whatever theme that you were using

originally so what I'm going to do to

Showcase how nice this extension makes

your vs code look is I'm going to change

the background on my desktop to

something a little bit more vibrant so

I've chosen this really nice vibrant

wallpaper and you can see all the colors

are coming through the back of our vs

code now so that is really nice it gives

that nice transparent look that glass

morphism kind of design and like I said

before this is purely decorative so it

doesn't really add any benefit to your

vs code besides making it look pretty

but I just like it so I highly recommend

that you guys add this extension it

looks really nice all right guys that

brings us to the end of the video I hope

this helped you guys out a lot these are

the vs code extensions that I've been

using in my day-to-day Life as a

computer science student there are

plenty more extensions that I could list

in this video but for me these are the

ones that I use the most if you guys

want to suggest any that I haven't put

in the video please make sure to comment

them down below and while you're at it

you might as well smash that like button

and please subscribe to the channel it

helps out a lot I hope you guys are

having an amazing 2024 so far and I

can't wait to see you in the next

video