My Top 5 VSCode Extensions for React and NextJS!

Summary

In this informative video, the presenter shares their top five Visual Studio Code (VS Code) extensions that enhance their coding experience. They discuss GitHub Copilot for AI-assisted coding, Import Cost to manage dependencies, Prettier for code formatting, Prisma for database file syntax highlighting, and Tailwind CSS Intellisense for streamlined CSS development. Additionally, they mention an XML extension for formatting XML files as a bonus. The video emphasizes the value of these extensions in boosting productivity without necessarily improving code quality.

Takeaways

• 😀 The presenter uses five main extensions in VS Code regularly and will discuss an additional bonus extension.
• 🔍 The first extension highlighted is GitHub Copilot, which offers code completion but requires a subscription or student access for full use.
• 💰 GitHub Copilot can be obtained for free by students, and it provides智能化 code suggestions to enhance coding efficiency.
• 📚 Import Cost is the second extension, which helps in managing the size of imports in a project to reduce client-side footprint.
• 🌟 Import Cost also has a shortcut that reorders and cleans up imports, categorizing external and local imports for better organization.
• 📝 The third extension, Prettier, is widely known for code formatting, offering customizable settings and the ability to format on save.
• 📑 Prettier can be configured project-wide using a .prettierrc file to ensure consistent code styling across a development team.
• 🌐 The fourth extension is Prisma, which provides syntax highlighting and auto-completion specifically for Prisma database files.
• 🎨 Tailwind CSS Intellisense is the fifth extension, which is essential for developers using Tailwind CSS, offering real-time CSS previews and class explanations.
• 🔧 The bonus extension, XML, is useful for formatting XML files, such as SVGs, when the default formatting options are insufficient.
• 🛠 Extensions are supplementary tools that can help write code faster, but they do not inherently improve code quality.

Q & A

What is the main topic of the video?

The main topic of the video is discussing the top five extensions the speaker uses in Visual Studio Code (VS Code) and one bonus extension.

How many extensions does the speaker regularly use according to the video?

The speaker regularly uses five extensions, with an additional bonus extension mentioned.

What is GitHub Copilot and why is it mentioned in the video?

GitHub Copilot is an AI-powered code completion tool that integrates with VS Code. It is mentioned because it is one of the top extensions the speaker uses.

Is GitHub Copilot free or does it require a subscription?

GitHub Copilot is not free; it requires a subscription. However, students can get it for free, and the speaker has obtained it for free through their student status.

What does the Import Cost extension do?

The Import Cost extension helps in identifying the 'cost' or size of imports in a project, which can help in optimizing the client-side footprint by avoiding heavy dependencies.

What is Prettier and how does it help in coding?

Prettier is a code formatter that automatically formats code according to the user's preferences. It helps in maintaining consistent code formatting across a project.

What is the purpose of a .prettierrc configuration file?

A .prettierrc configuration file is used to set Prettier's formatting rules for a project. It ensures that all developers working on the project follow the same code formatting standards.

What does the Prisma extension provide for Prisma files?

The Prisma extension provides syntax highlighting and auto-completion for Prisma files, which are used for database schema and queries in various databases.

What is the Tailwind CSS Intellisense extension and how does it assist developers?

The Tailwind CSS Intellisense extension provides real-time feedback and suggestions when working with Tailwind CSS classes, making it easier to understand and write Tailwind CSS code.

What is the XML extension mentioned in the video and what does it do?

The XML extension mentioned in the video is used for formatting XML files, such as SVG files, in VS Code. It ensures that the code is well-structured and readable.

What is the speaker's opinion on the usefulness of extensions in coding?

The speaker believes that extensions are supplements that do not make one write better code, but they can help in writing code faster.

Outlines

00:00

🤖 GitHub Copilot: AI-Powered Coding Companion

The video introduces GitHub Copilot, an AI extension for VS Code that assists in writing code. It offers code completion and pattern-based suggestions, which can be particularly useful for students who can access it for free. Despite occasional imperfections in its suggestions, it's a valuable tool for enhancing coding efficiency, especially in TypeScript projects.

05:02

📦 Import Cost: Visual Dependency Management

The script discusses Import Cost, an extension that helps visualize the 'cost' or impact of importing different packages in a project. It aids in understanding the weight added to the client-side footprint, which is crucial for performance optimization. The extension also facilitates better organization of imports and can be a helpful tool for developers looking to streamline their codebase.

10:04

🌟 Prettier: Code Formatting Made Easy

The video highlights Prettier, a widely-used VS Code extension for code formatting. It formats code consistently, which is beneficial for teams to maintain a uniform code style. The extension can be customized with a .prettierrc configuration file, ensuring that all developers adhere to the same formatting rules, thus improving code readability and collaboration.

🔍 Prisma: Enhancing Database Code Experience

The script covers the Prisma extension, which provides syntax highlighting and auto-completion for Prisma files used in database interactions. This tool is particularly useful for developers working with various databases like SQL, MongoDB, and others, as it simplifies the coding process and improves the readability of database-related code.

🌈 Tailwind CSS Intellisense: A Designer's Best Friend

The video features Tailwind CSS Intellisense, an extension that offers real-time insights into the CSS effects of Tailwind classes. It's an essential tool for developers using Tailwind CSS, as it helps understand and write better CSS by providing hover-over details of what each class does, enhancing productivity and consistency in styling.

🎨 XML: A Niche Tool for SVG and XML Formatting

As a bonus, the video mentions the XML extension, which is beneficial for developers working with SVG files. It provides formatting capabilities for XML files, which can be crucial for maintaining clean and organized code. Although it's not frequently used, it's a handy addition for those needing to format XML or SVG code within VS Code.

Keywords

💡VS Code Extensions

VS Code Extensions are additional software components that enhance the functionality of the Visual Studio Code editor. They are integral to the video's theme, as the script discusses the presenter's top picks for improving coding efficiency and experience. Examples from the script include GitHub Copilot, Import Cost, Prettier, Prisma, and Tailwind CSS Intellisense.

💡GitHub Copilot

GitHub Copilot is an AI-powered extension for VS Code that assists in writing code by providing code completion suggestions. It is highlighted in the video as a valuable tool for developers, especially students who can access it for free. The script demonstrates its use in generating function code based on user input.

💡Import Cost

Import Cost is an extension that helps developers understand the impact of importing different modules on their project's bundle size. It is relevant to the video's theme of optimizing code, as it helps in identifying heavy dependencies that could increase client-side footprint, as shown when the presenter discusses the 'unstable_get_service_session' import.

💡Prettier

Prettier is a code formatter extension for VS Code that standardizes code style. It is a central concept in the video, emphasizing code consistency and readability. The script illustrates Prettier's functionality in formatting code with a hotkey press and mentions the possibility of configuring it project-wide through a 'prettier.config.js' file.

💡Prisma

Prisma is an extension that provides syntax highlighting and auto-completion for Prisma schema files used in database operations. It is mentioned in the context of working with databases like SQL, MongoDB, and others. The video script shows how it can assist in writing and understanding Prisma files more efficiently.

💡Tailwind CSS Intellisense

Tailwind CSS Intellisense is an extension that offers real-time feedback and suggestions when writing Tailwind CSS classes. It is connected to the video's theme of enhancing coding productivity, especially for those using the Tailwind CSS framework. The script demonstrates its utility in displaying the underlying CSS for shorthand classes.

💡XML Extension

The XML extension for VS Code is a bonus tool mentioned in the script, which provides formatting capabilities for XML files, including SVGs. Although not frequently used by the presenter, it is highlighted as a helpful tool for improving the layout of XML-based files when needed.

💡Syntax Highlighting

Syntax highlighting is a feature that displays source code in different colors and fonts according to the role of the constructs in the language being programmed. It is a key aspect of the video, as it is provided by several extensions discussed, such as Prisma and the XML extension, to improve code readability.

💡Code Formatting

Code formatting refers to the arrangement and layout of code to improve its readability and consistency. The video script discusses the importance of code formatting with extensions like Prettier and the XML extension, showing how they can automatically format code with a hotkey press.

💡Auto-Completion

Auto-completion is a feature that predicts and suggests the rest of the line of code as it is being typed. It is a core concept in the video, particularly showcased by GitHub Copilot, which can write code based on user-provided comments and patterns.

💡Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. The video script discusses the use of Tailwind CSS Intellisense for developers who utilize this framework, emphasizing its role in enhancing productivity and understanding of Tailwind CSS classes.

Highlights

Introduction of the video discussing the top five VS Code extensions used by the speaker.

Mention of a bonus extension that is rarely used but still included in the video.

GitHub Copilot extension for AI-assisted coding, including its cost and availability for students.

Demonstration of GitHub Copilot's code completion capabilities in TypeScript.

The occasional repetitive suggestions from GitHub Copilot and its limitations.

Import Cost extension to visualize the impact of imports on the application's footprint.

Import Cost's feature to automatically organize and optimize imports in a project.

Live Server extension mentioned but not detailed as it's not used by the speaker.

Prettier extension for code formatting with customizable settings and team consistency.

Prisma extension for syntax highlighting and auto-completion in Prisma database files.

Tailwind CSS Intellisense extension for working with Tailwind CSS classes and utilities.

XML extension for formatting XML files, such as SVGs, within VS Code.

The practical use of extensions to write faster code rather than necessarily better code.

The speaker's personal experience and preference for using these extensions in their workflow.

Invitation for viewers to try these extensions and see the impact on their own coding experience.

Closing remarks and sign-off for the video.

Transcripts

hey guys nice to have you in this video

I want to talk about which five

extensions I use in vs code and I didn't

just make the number five up because I

realized I actually just use five

extensions regularly and then I'll add

one bonus one on top on this video

um well it's kind of a euphemism to call

it bonus because really it's one I

rarely use but I still want to include

it in this video okay here we are and

let me show you these Snippets I'm using

we're gonna go to extensions and now you

can see there are more than five

certainly but I don't know what this is

I don't use this one I used to use this

one when I started with react but the

first one I want to show you is GitHub

co-pilot and now chances are you

probably know that let's go over here

let's type in GitHub called pilot really

really good stuff now GitHub corporate

does cost money so you can install the

extension for free but um if you don't

have a subscription as you can see right

here there is a subscription required

you won't be able to actually use it and

the subscription either does cost money

or if you are a student you can um also

get GitHub corporated for free and

that's what I did because I'm studying

in that case you can actually get a

GitHub co-pilot completely for free and

as you can see right here in the bottom

it's an icon that appears when you have

GitHub co-pilot and when you got it

installed and the subscription running

you can like enable it globally and then

go into any file

so let's go for example into the nav bar

and um let me close this down a bit and

here we can say you know cons at dates

and then we can have a function and

pretty much let GitHub co-pilot

um write code for us so if you've never

used it essentially you can do

um it does code completion so if you

comment something

and say function to add to string or to

concatenate two strings and then press

enter

um it already knows what to do so you

get the parameters it can see okay we're

working in typescript so it will

automatically generate the code and

especially when it comes to you know um

the pattern finding and then completing

code based on patterns GitHub co-pilot

really shines so sometimes the the

output is really bad sometimes it's you

know repetitive so for example it will

suggest the line

um you know const hello is equal to just

an example and then when you press enter

it will suggest the same line again and

again and again so sometimes the model

does not work perfectly but GitHub

co-pilot can be really useful especially

if you can get it for free as a student

and that is my first extension now

number two

is import cost and what import cost does

is pretty much what it says on the can

right when you import something and we

can go into a different project for that

let's go into one huge file that has a

lot of imports um so it is in this

project right here which is the

project we've been developing together

the startup

and and here we can go to I think it's

a source document and then we can go to

okay here it is so as you can see there

are a lot of imports in here and what

the

um import cost does as you can see right

here you can see how like like how

expensive an import is so for example

the unstable get service session right

here that we import from next auth would

be really heavy like a heavy dependency

that you know adds a lot of weight to

the footprint on the client which is

generally what we really want to avoid

now one cool thing you can also know

this is let's say for example we put

this down here and then when you press

um control no shift alt and O pay

attention to what happens to the super

Json import right here so the green

green thing when I press that shortcut

as you can see the Imports that come

from outside will get automatically

moved to the top so I can move them all

down here and let's say we want that one

down here so it's kind of like not in

order but when we press shift alt and

all or the unused exports get deleted

automatically and then all the um like

exports from outside from you know

packages that we installed npm packages

will be listed on top with their cost

Associated and then below that will be

all the local Imports that you have in

your project so

um cool extension

um sometimes useful sometimes not that

useful honestly mostly not that useful

but it can it can help you save some

footprint on a client side and it's just

interesting to see um how expensive

certain packages are because for some I

really wouldn't have expected that they

are that expensive and yeah that's why I

use it cool package number two on my

list then live server I don't use that

then prettier and I think honestly

everybody knows what prettier is it's

essentially just a you know when you

press um control F so let's go into a

different project again let's go into

this one the business card application

we've done a couple days ago

and in here

we can use prettier so imagine the code

was like weirdly spaced out

um like that and then we press the

prettier hotkey and then as you can see

well it doesn't work right here because

it is a string so that we we don't

expect that to work but essentially what

Purdue does is it formats your code um

however you want it so you know we can

just format it very weirdly okay that

that wouldn't work but you can just do

some weird stuff with it and whenever

you press the hotkey that you can also

have on Save By the way and then it

automatically formats your code now if

you go into vs code and type in prettier

you can also have some

um you know controls on what what you

want uh your local prettier to do and

while it's local I'm gonna get to in a

second but you can you know have just a

lot of options you can fit code within

this line limit so if I were to say like

200 and then press Ctrl F then it might

just move some stuff to one line which

you know wouldn't really be readable but

you get the point so you can just have

your local prettier set these settings

now because pretty is such a useful

extension and because many Dev teams

also use it together there is a

possibility to define a

prettier.config.js for example in your

application and I've prepared something

right here it's a a pretty configuration

file and then here you can have like a

Json if you define this as a Json file

but we Define it as Js

so for example we can copy the prettier

config and then paste it in here and as

you can see I already formatted it with

um prettier and what this file does is

it overwrites your local settings that

I've just shown you that you can go to

add file then preferences and then

settings and then type in print here

essentially it overwrites these local

settings so every developer working in

this project gets their prettier

information from this file and so the

whole project will have one consistent

formatting which I think is a really

great idea because if everybody held

like had a different prettier settings

then it would look kind of better than

not having any formatting at all but you

get the point right if every developer

has the same prettier file and to work

with the whole project will just be

consistent which is great so prettier

definitely definitely up there really

really good extension and then there are

two more I want to talk about one is

Prisma and Prisma is a very very simple

extension but it essentially provides

syntax highlighting for Prisma files now

if you've never worked with Prisma files

they are database files so if you're

working with an SQL like right here or

with a cargo hdb mongodb postgresql

sqlite even and if you're working with

any of those you might have a Prisma

file and essentially if you want syntax

highlighting this is just the extension

that does it for you it does formatting

it does some Auto completion

so as you can wait no that's GitHub

co-pilot but sometimes it provides

really handy completion for example if

you were to type add ID and then add

default and then here you can say you

know this completion right here for

example comes from this Prisma extension

really useful if you're working with

databases now the last one and then

maybe one bonus one the XML but it's a

very simple one the last one is tail1

CSS intellisense great extension if

you're working with Tailwind really good

one so let me show you what it does if

you go to an index page so any file that

we are working with tailwind and

honestly I am only working with Tailwind

I am not doing that to myself having to

code out regular CSS anymore no more my

friends no more

um I I always tend to use Tailwind

and essentially what the intellisense

does is what you can see right here so

for example uh wait wait I can't zoom in

there we go

um if you type for example BG black 10

then you can see there's a

um you know the black color field so it

represents the color you've just typed

out and if you hover over certain stuff

as you can see right now it's loading

but normally

when it when it's not loading so I don't

know what my vs code is doing right now

takes a lot to load

um there we go and if you hover over

them now you can see what they actually

do so if I were to remove this

um or disable

right okay we have to reload I think so

let's read out the application

and go back into business card and then

go into the exact same file and then

let's hover over the stuff so as you can

see I'm hovering over this stuff right

now but it's not showing us any

intellisense so it's not showing us what

this rounded full actually means right

because this is essentially just a

shorthand for some CSS so when we're

saying round it full behind the scenes

some CSS is being applied and with the

extension that I've just shown you

um whatever CSS is

um you know the same thing as round at

full will be shown to you and then also

like the colors will be displayed

um so if you're working with Tailwind

Tailwind CSS intellisense

um like it's kind of a must-have add-on

I feel like

um so for example right now we can hover

over a rounded full and as you can see

you can see exactly what it does in CSS

right it applies a border radius of

999 pixels you can see the colors you're

using

M right here and I think they are even

adjusting yeah it's a very subtle change

but I hope you can see it so for example

if we have 10 transparency the black is

not as dark as when we go to for example

50 and the cool thing is whenever you

are inspecting code that comes from a

code base that you didn't right that is

written with tailwind and you don't know

what a class does you can literally just

hover over it and see what CSS exactly

it displays right so if we were to hover

over grid calls too we can see okay it's

a grid template columns that we repeat

two times with the min max of zero and

one fraction so that's pretty cool you

can just hover over the stuff and get a

way better understanding of how other

people write Tailwind CSS and how you

can write better code yourself okay and

the last extension I want to show you

those were my top five by the way the

last one is kind of a bonus but it's

also kind of ass so you you rarely need

it to be honest but if you're working

with SVG files then I found this XML to

be useful I'm not sure if we have an SVG

file in here no we don't but I if I go

into

for example the word for front end we

definitely have SVG files in here um so

let's go in here and as you can see with

the extension we have the XML one we can

see the code and also prettier Works in

here and if I uninstall or disable the

extension let me show you what happens

okay it says reload required so let's

restart the vs code

go back into the

um SVG files and as you can see right

now

um there is no formatter for XML files

installed so if the layout was really

bad as it often is when you for example

copy svgs from the web the layout will

be really bad sometimes and so right now

we have no way to format this if we

press the pretty hotkey nothing happens

and that is where the

that is pretty much the only case where

the XML

extension comes in clutch so we can

disable that and then if we press the

same hotkey we use for prettier you can

see the formatting actually worked so

that's what it does the syntax

highlighting is not done by the

um not by the extension unlike the

Prisma one for example and this one

actually does syntax highlighting this

one doesn't this one is just for the you

know formatting of XML so for example

HTML or svgs and that's pretty much the

only use case I've ever found it useful

and yeah that's pretty much it those are

the M5 main extensions I use GitHub

co-pilot if you can get it somehow you

know it is paid or if you're a student

you can get it for free really useful

One Import cost then prettier one of the

best extensions no questions asked like

26 million installs just speaks for

themselves then Prisma can be useful if

you're working in Prisma files but it is

quite specific I agree

um business intellisense really useful

if you're working with Taiwan CSS and

then if you're working with XML and the

and and sometimes need some code

formatting in those files you can use

the XML but this is just a bonus that I

rarely use so I want to concentrate on

the other five that's pretty much all

remember guys extensions are just uh

supplements pretty much you don't write

better code but you can write faster

code with them and I think with that

said

um this was all I wanted to share with

you thank you very much for watching I

wish you a lot of fun working with those

extensions yourself if you decide to do

that I'll see you in the next video have

a good one and bye bye