My Top 5 VSCode Extensions for React and NextJS!
Summary
TLDRIn 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
🤖 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.
📦 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.
🌟 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.
Mindmap
Keywords
💡VS Code Extensions
💡GitHub Copilot
💡Import Cost
💡Prettier
💡Prisma
💡Tailwind CSS Intellisense
💡XML Extension
💡Syntax Highlighting
💡Code Formatting
💡Auto-Completion
💡Tailwind CSS
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
Weitere ähnliche Videos ansehen
12 VS Code Extensions to INCREASE Productivity 2024
My Minimal and Beautiful VSCode Setup
How to Setup Visual Studio Code for Web Development | HTML, CSS, and JavaScript
Visual Studio Code 2022 | Web Dev Setup | Top Extensions, Themes, Settings, Tips & Tricks
GitHub Copilot tips and tricks
¡No pierdas tu tiempo! Necesitas esta configuración para VSCode
5.0 / 5 (0 votes)