These VS Code Extensions made me a 10x developer 🔥🔥
Summary
TLDRThis video tutorial highlights essential Visual Studio Code extensions for developers. It's divided into three sections: code editing and formatting, version control, and enhancing developer experience. Key extensions include Auto Rename Tag, ES7 React Redux snippets, Prettier, ESLint, and multiple cursor case preservation. It also introduces Git Graph for visualizing commit history, GitLens for tracking changes, Live Share for real-time collaboration, and Peacock for theming. The video concludes with an AI co-pilot tool, 'Continue', offering local code completion and chatbot functionality.
Takeaways
- 🔧 The video is divided into three sections focusing on code editing/formatting, Version Control, and enhancing developer experience.
- 🛠️ 'Auto Rename Tag' is an extension that automatically updates closing HTML tags when the opening tag is edited.
- ✂️ 'ES7 React Redux React Native Snippets' provides boilerplate code for React components, saving time in development.
- 📄 'Prettier' is a widely used code formatter that automatically formats code, making it more readable.
- 👮 'ESLint' is used for identifying and reporting on patterns in code, with rules that can be customized to fit industry standards.
- 🔑 'Multiple Cursor Case Preserve' assists in maintaining consistent naming conventions when renaming variables or functions.
- 🌐 'Git Graph' visualizes the commit history of a project, aiding in understanding the development timeline and managing branches.
- 🔍 'GitLens' shows detailed information about commits directly within the code, helping to identify who made changes and when.
- 🤝 'Live Share' allows real-time collaboration on code, enabling developers to work together regardless of their location.
- 🎨 'Peacock' and 'Material Icon Theme' enhance the visual aesthetics of VS Code, improving the user interface and file辨识度.
- 📖 'Markdown Preview Enhanced' provides a live preview of Markdown files, making it easier to create and edit README files.
Q & A
What are the three sections discussed in the video for improving developer experience with VS Code extensions?
-The video is divided into three sections: code editing and formatting, version control extensions, and extensions to improve developer experience.
Which extension is recommended for automatically updating HTML tag pairs?
-The 'Auto Rename Tag' extension is recommended for automatically updating HTML tag pairs.
How does the 'ES7 React Redux React Native Snippets' extension help in code development?
-The 'ES7 React Redux React Native Snippets' extension helps by providing boilerplate code for React components when specific shortcuts are typed, saving time in large-scale application development.
What is the purpose of the 'Prettier' code formatter extension?
-The 'Prettier' extension is used to automatically format code, ensuring consistency and readability by removing unnecessary spaces and adhering to standard formatting rules.
How does 'ESLint' differ from 'Prettier' in terms of code formatting?
-While 'Prettier' focuses solely on code formatting, 'ESLint' is more comprehensive, enforcing code quality standards and identifying potential errors in addition to formatting.
What problem does the 'Multiple Cursor Case Preserve' extension solve?
-The 'Multiple Cursor Case Preserve' extension solves the problem of maintaining consistent camelCase or other case formatting when renaming multiple variables or functions simultaneously.
What is the benefit of using the 'Git Graph' extension for version control?
-The 'Git Graph' extension provides a visual representation of the commit history, making it easier to understand the hierarchy and manage commits in complex projects.
How does the 'GitLens' extension assist in collaboration among developers?
-The 'GitLens' extension assists by showing detailed information about commits directly in the code, such as who made the commit and when, which helps in tracking changes and resolving issues in collaborative projects.
What is the main feature of the 'Live Share' extension for collaborative development?
-The 'Live Share' extension allows real-time collaboration by enabling multiple developers to edit the same codebase simultaneously, seeing each other's changes live within the VS Code environment.
What does the 'Peacock' extension do to enhance the VS Code interface?
-The 'Peacock' extension allows users to change the VS Code sidebar color to personalize the workspace and improve aesthetics.
How can the 'Material Icon Theme' extension help in identifying file types?
-The 'Material Icon Theme' extension enhances file and folder辨识度 by providing distinctive icons for different types of files and folders, which aids in quickly identifying their contents.
Outlines
💻 Enhancing Development Productivity with VS Code Extensions
The paragraph introduces a video focused on VS Code extensions that can significantly boost a developer's productivity. It's divided into three sections: code editing and formatting, version control, and overall developer experience enhancement. The narrator emphasizes the importance of these extensions in making code more readable and efficient to edit. They also mention an AI copilot that revolutionizes application development. The first extension discussed is 'Auto Rename Tag', which automatically updates HTML closing tags when the opening tag is edited. This saves time and prevents errors. The second extension, 'ES7 React Redux React Native Snippets', provides boilerplate code for React components, expediting the development process. The third extension, 'Prettier', is highlighted for its ability to automatically format code, ensuring consistency and cleanliness. Lastly, 'ESLint' is introduced for its role in identifying and enforcing code quality standards.
🔍 Streamlining Code Quality with ESLint and Other Extensions
This paragraph delves deeper into 'ESLint', emphasizing its prevalence in the industry for maintaining code quality. The narrator demonstrates how ESLint rules can alert developers to unused variables and imports, thus preventing potential bugs and enhancing code efficiency. They also introduce the 'Multiple Cursor Case Preserve' extension, which simplifies the process of renaming variables while maintaining consistent case formatting. The paragraph also includes a recommendation for a resource to learn advanced JavaScript concepts, with a mention of a special discount for viewers.
🤝 Version Control and Collaboration Extensions
The focus of this paragraph is on extensions that aid in version control and collaboration. 'Git Graph' is introduced as a tool to visualize and manage Git commits, making it easier to understand the history and progression of code changes. The narrator also mentions 'GitLens', which provides insights into commit histories and authorship directly within the code editor. Another extension, 'Live Share', is highlighted for its ability to enable real-time collaborative coding sessions, allowing developers to work together regardless of their location.
🎨 Customizing VS Code for an Enhanced Developer Experience
This paragraph discusses extensions that enhance the visual and interactive aspects of the VS Code environment. 'Peacock' is introduced for customizing the editor's color theme, while 'Material Icon Theme' adds visually appealing icons to files and folders. The 'Next.js Nav' extension is showcased for its ability to provide a clear navigation structure for Next.js applications, making it easier to locate and manage files within complex projects.
🧩 Tailwind CSS and Other Technology-Specific Extensions
The paragraph highlights 'Tailwind CSS IntelliSense', an extension that assists developers with Tailwind CSS class suggestions, speeding up the development process. The narrator also mentions that there are similar extensions available for other technologies like Angular, Node.js, and Python, allowing developers to tailor their coding environment to their specific tech stack.
🤖 Introducing Local AI Code Completion with 'Continue'
The final paragraph introduces 'Continue', an AI code completion tool that serves as an alternative to GitHub Copilot. The narrator explains how to set up and use 'Continue' with the open-source 'Llama' model for local, offline code completion. They demonstrate how 'Continue' can provide real-time code suggestions and even explain code snippets, offering a seamless development experience without the need to switch contexts.
Mindmap
Keywords
💡VS Code Extensions
💡Code Editing and Formatting
💡Version Control
💡Developer Experience
💡AI Co-pilot
💡ESLint
💡React Snippets
💡GitLens
💡Live Share
💡Peacock
💡Material Icon Theme
Highlights
Introduction to VS Code extensions that can enhance development efficiency.
Section划分: 代码编辑和格式化、版本控制、提升开发体验的扩展介绍。
Auto Rename Tag扩展,自动重命名HTML标签。
ES7 React/Redux/React Native Snippets扩展,快速生成React组件代码模板。
Prettier代码格式化扩展,简化代码格式处理。
ESLint扩展,代码质量和风格检查。
Multiple cursors case preserve扩展,保持驼峰命名一致性。
推荐Scriba平台进行高级JavaScript学习。
Git Graph扩展,可视化Git仓库的提交历史。
GitLens扩展,代码历史和作者追踪。
Live Share扩展,实时代码共享和协作。
Peacock扩展,自定义VS Code颜色主题。
Material Icon Theme扩展,美化文件和文件夹图标。
Nextjs Nav扩展,增强Next.js项目的导航体验。
Tailwind CSS IntelliSense扩展,智能提示Tailwind CSS类。
Markdown Preview扩展,实时预览Markdown文件。
介绍本地AI代码补全工具,如Continue扩展。
Continue扩展配置和使用演示。
使用Continue扩展进行代码解释和查询。
Transcripts
using these vs code extensions will make
you a 10x developer and that is why I've
divided this video into three separate
sections in the first section I will
tell you the extensions which will help
you out in code editing and formatting
so that you don't get lost while
developing your applications in the
second section we will discuss the
Version Control extensions that can help
you supercharge your git and GitHub
experience and the third section I'll
tell you the extensions which can
drastically improve your developer
experience and make your development
cycle 10 times faster or who knows maybe
100 times faster as well if you use
these extensions effectively and I will
also tell you about a local AI co-pilot
which will change the game on how you
develop your applications so let's get
into
it all right so first let's discuss the
extensions related to the code editing
and formatting basically these
extensions will help us in making our
code much more readable and more
effective to update or you know edit our
code basically so the first one is Auto
rename tag so I'm going to come on to
this extensions tab over here and search
auto rename tag and here it is and click
on install so I've opened uh my calendly
clone project over here that I recently
uploaded on my channel so I've opened a
component over here and here now you can
see we have this button over here right
now first of all if I just go on and
disable this extension first and then
try to let's say edit this button let's
say button one over here right now
you've written button one over here but
the closing tag is still button right
you have to write one over here manually
and trust me in Long Run things like
this can take a lot of your time so to
prevent this we have Auto rename tag so
let's enable it now and now if I go on
and say button one notice it has updated
the closing tag as well this is awesome
now the second extension is this es7
react Redux react native snippits and
I've seen a lot of you ask me how I do
this so if I create a new file let's say
test. jsx and I say R A fce if you're
developing a react or xjs application if
you type this and click on over here you
can see it gives you a boiler plate code
for that particular react component and
it has multiple different things so
let's just say r a f and you can see if
you press control space over here it
will show you a display right here on
what that Cod snipper is all about right
so this is a arrow function with the
separate export default this one has
prop types as well so if I click on over
here and now you can see it has Auto
selected all these four sections now if
I say test component and press tab over
here you can see it has created this
component for me with the prop types and
everything in any other scenario we
would have spent probably 10 15 seconds
writing this code right so this can
massively save your time when you want
to quickly develop a large scale
application okay did you notice
something our component was looking like
this right but when I pressed save so
control s did you see what just happened
single quotes changed to double quotes
this didn't have any bracket but now it
does what's going on over here how is it
autof formatting and that brings me to
my next extension which is prettier so
over here in this extensions tab there
we go prettier code formatter and trust
me this is the most widely used
extensions out there and this will make
your code formatting a breeze if I let's
say uh press some spaces over here now
these are unnecessary spaces right
prettier knows that we don't need it if
I and when I press crl s it will
automatically delete this unnecessary
space if I say multiple different spaces
over here now obviously only one space
will be considered if I press save now
it will only allow one space and it will
you know remove the other spaces now
obviously these things are configurable
as well in the settings so if I go to
settings over here just search prettier
and here you can see we have this
prettier option and the there are lot of
options to configure like you can add
any configuration file over here as well
if you scroll down you have multiple
different options like if you want to
config like if you want to format the
code on Save if you want to format the
code on paste so I will highly recommend
you guys to you know go on and check and
explore uh these settings over here
according to your need but what I feel
like is probably the more industry
standard uh formatter is not prettier
it's actually es lint so so if you
search es lint over here it's kind of
very similar to prettier but in most of
the industry applications I've seen
eslint is used a lot and when you
initialize or you know when you create a
new nextjs app it comes right out of the
box with this do eslint rc. Json file
and this is basically the configuration
file for eslint and whatever rules we
write over here it will apply to all
other developers whoever uh you know who
are using our applic over here now let
me show you if I remove this rule over
here see we got no error in this
component but you can see over here this
prop types is not being used anywhere
this these props are not being used
anywhere right so what I want is
whenever these variables and imports if
they are not being used it should give
us warning right so that's why I've
written this rule over here that inside
of this rules bracket I've written no
unused bars and what I need to do warn
if I want it to give me error so I'll
say error and now you'll see it will
give us red line but I if I just want it
to war then it will give us yellow line
over here right and it will even tell us
that props is declared but it's never
used and so that is from us code
actually and this is from uh es lint
rules so Props is defined but never Ed
so if you are working in some companies
uh and all you might have seen something
like this like you might have attempted
to do something or change something
inside of a component but you can see
it's not allowing you to do this it's
because there are set eslint rules that
are written inside this eslint rc. Json
file now there are a lot of things that
uh you know goes on in writing a
configuration like this and I would
highly recommend you to go on and check
out their documentation to learn about
all of them and if you want me to create
a in-depth video on this just let me
know in the comments down below now this
another extension is something that I
didn't know for a very long time but
when I discovered this it honestly
relieved so much of my pain and I'll
show you probably you don't even know
about that this is something that you
want to solve in your life but now with
this extension you will get it so let me
show you over here you can see I have
three variables loading error and
function so I've basically created this
uh custom hook over here and I've
renamed all of these three things just
like this for loading it will be loading
and name of that event like for example
create event for error I have renamed it
to error and whatever the name of event
is and for the function I will keep it
exactly just like that like whatever the
event is but now over here you can see I
have I'm using camel case over here
right so the first one is uh lower case
and all of the others are upper case
lower case uppercase lower case
uppercase that's fine but now if I want
to change this to some other function
right so if I just select using control
D so a lot of you might be uh you know
editing your code just like this right
now if I let's say want to change this
to delete event so if I select this and
say delete event now this is for
following the perfect camel case over
here but notice what happened over here
now we have a capital D here and we need
to manually go on and add a lower case T
and this might again look like a very
small thing but in in large scale
development and you know hours and hours
of development things like this can
become a real pain point so let me show
you how we can uh you know solve it so
there's this extension called multiple
cursor case and this should uh bring it
Yep this one multiple cursor case
preserve now notice if I install it and
now if I go back I'm going to select
this again controll D for both of them
and now if I try to say delete over here
delete notice what happened it followed
the camel case or you know the original
basically formatting that we have added
over here if I show you again if if this
was delete event right it's completely
you know in the uppercase format so now
if I try to do this again
if I say create event notice it has
followed the same convention over here
this is amazing honestly when I you know
discovered this uh extension it relieved
so much of my pain and it will do the
same for you trust me now before moving
forward a lot of you message me and ask
me sometimes that what is the best place
for learning Advanced Java Script you
know functions like generator functions
getter or Setter functions Etc right so
let me let me show you so this is the
resource that I referred to and you can
see they have this Advanced JavaScript
course over here where in the first
chapter itself they will help you to you
know solidify your JavaScript
foundations by teaching you things like
switch tary operator set timeout set
interval the event Loop which is very
important for interviews as well right
if you come down to these last chapters
over here you can see collections and
symbols which I don't think and a lot of
people talk about right which is
sometimes asked in senior developer
interviews so this platform is called as
scriba and I actually reached out to
these guys to collaborate for this video
and they were kind enough to give me a
30% off discount for you guys and the
best part about scrimba is their
interactive video tutorials like if I
show you so you can see over here that
instructor is teaching about form
actions over here and you can see we
have zoomed out of the video and gotten
right inside of the code so we don't
ever have to leave our website and we
can directly jump right into the code we
don't have to open vs code or whatever
right so definitely click the link in
description down below and Avail this
30% off which is only valid for next 2
weeks right so don't miss out on this
offer let's get back to our video all
right now let's see the extensions which
will help us in Version Control and
collaboration with other developers so
if I go over here and search get graph
and you know in our day-to-day jobs the
production grade apps that we work on
have I mean infinite amount of comments
and everything right so it gets so much
messy to manage all of these commits and
to understand basically the hierarchy
and everything of these things right so
this git graph will help you out in that
massively so just click on over here
like on install button and then go to
your this Source control tab over here
now here there's this icon for view G
graph when you click on it you will see
all of the comments that are ever made
on this you know app during the
development of this app if I click on
any of the commit let's say this one so
this was my last commit and these are my
uncommitted changes right now if I click
on it I can see what are all the things
that I've changed if I click on it you
can see it clearly shows that we have
changed these many things inside of our
app and if I go to previous commits over
here if let's say some developer changed
something inside of a file and I want to
see what are all the changes that have
that they've made over here and you can
see they have basically removed this U
state from over here and nothing else
right so this makes things so much Clear
while you know developing our
applications but what if we have
multiple different branches this one has
just one branch right so let me show you
so this is basically my react 19 series
you can check out from Link in
description down below so here you can
see we have multiple different branches
teaching about multiple different things
first of all I uploaded this use action
tutorial right so all of these files are
over here now I don't want to touch this
uh Branch over here right and I want to
create new branches from it that's why
I've created multiple different branches
is like you know use optimistic or this
use form status or made some basic
changes as well like update readme right
so now you can clearly see the
representation on when a certain Branch
was made on which point and if you want
to see let's say just one single Branch
let's say if I want to see this use form
status Branch if I click on over here
use form status you can see the whole
timeline of this particular Branch only
now if I want to compare it with some
other Branch now if I just say Master
Branch you can see so it shows us this
was the master branch and here this
Branch was formed the head and here was
the use form status Branch right so this
will help you massively and
understanding get which is something
that confuses freshers the most right so
this is the type of tools that you
should be using and there's actually one
more extension for G that is called as
get lens without any spacing Okay so
this one I just click on install over
here I've already installed it now what
will this help us to do so imagine a
scenario where um let's say five
different developers on are working on
some feature and one of the developer
broke something inside of our app at
some particular line right now either
you can go on and uh into the commit and
dig when that particular change was made
or you can simply go onto that
particular line let's say if it was this
line if I click on over here in this
line it will clearly show who was the
one who made this commit and how long
ago it shows 2 months ago right so every
single detail can be seen right over
here this one extension has helped me so
much over the years on getting myself
out of a situation like that you know if
something broke in the branch that I was
working I can clearly show no my code
didn't break this Branch it was someone
else you can clearly see the commit over
here this will also tell you uh the name
of the commit as well now this third
collaboration uh extension is just uh
mind-blowing right so if I go on over
here in the extensions and search live
share click on over here and install
this extension now how will this help us
let me just open my that kendly clone
project back now let's say I'm
developing this application and I want
uh my friend who lives in some other
part of the world to help me develop it
so what I will do after installing live
share you will see there's this icon
over here in your vs code I want it like
I can decide if I want him just to see
my code or to edit my code as well let's
say I want him to edit as well so if I
click on share read write and it will
start a collaboration session okay there
we go it has started the collaboration
session it will give you the invite
invitation link it has already copied it
but if you want to copy again click on
copy again right now if I go onto our
browser and open this link right over
here it will open the vs code instance
inside of our browser and it will also
ask you that if you want you can you
know take uh this to vs code as well you
can clearly see it shows us to download
vs code but let's say if I don't want to
do it right and let's just continue as
Anonymous I will say Al go Agarwal press
enter and you can see joining
collaboration session now I would have
gotten a this thing over here like if
you want to accept the user so I'll say
accept read write and now you'll see
that user will join our workspace if I
go back to the browser there we go user
can see our code successfully and they
can see where I am in the code currently
and I can see where they are in the code
currently so if I hover on this so you
can see p is over here and let's see
where is algo aaral I can click on over
here on their name and it will take me
right where they are coding that is over
here let's say if if we try to change
something let's say hello you can see it
is updating everything in real time
right here right so this is absolutely
amazing I love this and I use this a lot
whenever I'm developing an application
in you know collaboration with someone
either it's a freelance project or if
it's you know a company project as well
and if you're someone who's preparing
for fronted interview you can definitely
go and check out my frontend interview
preparation course this is the only
thing that you will ever need to prepare
for your front-end interviews and not
only this I've covered every single
topic of reactjs like react router Dom
Redux all of the hooks class-based
component function based component react
even the performance optimization which
is asked from senior developers a lot
tons of machine coding questions as well
and obviously in-depth interview
preparation course on JavaScript as well
and not just this along with this course
you get an active Discord Community
where you can ask your doubts whenever
you get stuck and we will be there to
help you so click the link in
description down below because right now
we're having the biggest sale of the
year for a very limited time so don't
forget to check it out or you can also
scan this QR code on your screen to go
directly to the course page all right
now the third and the most interesting
part of this video that is improving
your developer experience now one thing
that you may have noticed from the since
the beginning of this video is this blue
color over here and honestly I love this
a lot because this feels you know very
aesthetic to be able to apply uh colors
onto your vs code so just go to your
extensions Tab and search Peacock and
here's this this extension obviously
this is very like know specific to some
people just install this extension and
press F1 and now if you search Peacock
over here and let's say change to a
favorite color here you can see we have
bunch of different options you can
either you know you can also enter
a specific color over here but you know
whenever I'm teaching react probably on
my channel I like to keep this
Mandalorian blue so that you know it
fits the theme of what I'm teaching it
has node green it has JavaScript yellow
and bunch of different colors over here
right apart from this you can see my
files and folders over here have these
beautiful icons which helps me
differentiate on What that particular
folder contains and this is not
something that comes in built in vs code
so if you go on over here and search m
material icon something like this yeah
material icon theme so you can see if
you install it if let's say if I disable
it right and restart extension you can
see it's very simple right now right
it's it will only show us these icons
for the files and everything but if I go
on and enable it you're going to see it
looks much more pretty now for Prisma
folder it has created this Prisma logo
over here for public folder it shows
this globe icon hooks components app Etc
right so you can see next config icon
over here as well so it it supports
variety of uh icons for different
different types of file types and you
can see over here in the file icons List
It supports all of these icons and list
goes on and on all right now if you're
developing a nextjs application just
like the one that I have over here
sometimes these apps can get a little
bit complex right if you open this main
folder we have multiple different files
and folders over here one inside the
other and you it might get you know a
little bit over in if you're trying to
find some uh file or folder inside of
your app so for that we have this nav
sorry next do nav Yep this one over here
just install it and let me show you what
this helps us do and you can see we have
this next do nav over here if you click
on it there we go we can see uh you know
the whole structure of your app
obviously this is not the structure of
my app we have to configure one thing
click on over here and you have to uh
set where is our app folder so our app
folder is right over here in the root
click like enter app and submit
now you can see the proper structure of
my app inside of the app we have a o
folder which contains sign in signup
routes we have a username you know a
dynamic route a main folder a lip folder
multiple different things over here if
you want you can click on over here and
you can create a file from right here
itself if you want to see one particular
tree let's say if I just want to see
this main tree over here it will only
show me that one when I click on it we
can go back to the whole tree over here
as well so this is also something which
is something that we don't know we need
but we actually do to make our life much
more easier now next uh this thing can
vary from different different things
right we have Tailwind CSS intelligence
right so when you're writing uh the
classes Tailwind classes let's say over
here if I say text Dash um let's say
gray you can see we can see a lot of
types of colors over here lot of shades
of green orange and whatever that trying
to do so it makes our development super
fast and we don't have to you know rely
on the documentation for these things so
these intelligence extensions are very
very helpful and you can like if it
depends from uh you know the type of
tech you're using if you're coding on
angular node or if there's some other
you know technology like DT python Etc
right so you can U install an extension
with respect to that now there's one
thing that has always been pretty hard
for some people and that is writing this
read me file you cannot see the preview
of this thing over here while you're you
know building it but no more we have
this thing called as
markdown preview this one I believe yeah
markdown preview enhance let's say if I
install it and now if I go back to my
readme file readme.md and now if I click
on over here and you're going to see
amazing we can see the you know live
preview of what we are doing over here
if I remove this progress you can see
it's updating in real time and we can
know what this will be like to see when
we upload our you know upload this file
onto GitHub generally we would go on and
you know create this file in GitHub
because there's a preview feature but no
more now you can directly you know
create a file over here and edit it as
well all right now is the moment that
all of you are waiting for that is a
local AI code completion tool basically
an alternate of GitHub co-pilot so if
you go to extensions over here and
search continue and click on install
over here so you can see continue and it
supports multiple different AI models
and right here you can see it has
created a new tab for continue over here
so yours might look a little bit
different because I've used this
extension before right so here you can
see this tells us what are all the AI
models that you can use with the
continue so if you click on quick start
it tells you that you can quickly get up
and running using the API keys of
different different models but we don't
want that right we want it to be
completely free so we're not going to go
on and uh enter like Claud or open uh
API Keys over here we're just going to
go local with ol Lama and this will
basically use the open- source llama 3
model from meta so it tells you how to
install ama if you click on it and open
it so it will open this ama.com download
you can quickly go on and download for
Windows and close it and you can open it
up now it shows us AMA is running at
this Local Host right but that is not
enough you need to click on over here
and install both of these models so this
one basically is going to be helping you
for chatting with an AI models right
inside of your vs code so if you add it
to your terminal and press enter it will
install it I've already installed it so
this one and this one over here as well
this will help you to autocomplete
things inside of uh you know vs code so
let's see let's first uh try it out
before that we need to configure one
thing so click on over here in the
settings of continue so configure
continue and you will come onto this
file over here now here it shows tab
autocomplete model and here you need to
write all of these things like you need
to provide the title whatever title it
is the provider is AMA the model name is
this you can find all these things in a
documentation uh for continue as well
and the API base whatever the API base
is so in our case it's 114 34 so that's
why I've written it that over here right
so this will basically set up our auto
complete and over here you can uh
for our chat you can select llama 3 so
if you click on over here add chat model
let's select o l and model let's just
say Auto detect and connect so I've just
restarted my vs code and now when you
click on it over here you can see it uh
shows all of these installed models here
so let's just select Lama 3 latest and
if I say hi you can see it is processing
and yep it will give us the responses
here as well amazing so we have a local
completely free AI chatbot here let's go
on to any file um let's say if I go on
to this event form right uh now if you
press uh let's just uh press enter over
here and now you're going to see this
will give us code completion you see
right away if I say const let's see if I
want to add use search params let's see
if it's able to detect it or not so
search equals use no search yeah you can
see use search params it's able to
detect what I'm trying to do over here
and accordingly it will learn over the
time and it will give you you know quote
suggestions so yeah this completely
replaces GitHub co-pilot into your you
know development cycle and if you get
stuck somewhere just open this continue
uh tab over here and let's just say
explain this code you press enter oh it
needs to have a context so let's just
select this code and you're going to see
we have multiple options over here like
add to chat edit highlighted code let's
say add to chat so we need to just say
contrl l and it's added to our chat
let's say explain this code right now
it's going to quickly go on and explain
so we don't have to ever leave vs code
or go to chat GPT or CLA whatever right
it just explains everything right over
here so this is an amazing tool and let
me know if you want to see a standalone
video on this tool as well and I'll
explain you know all of the capabilities
on how you can use this effectively one
thing to keep in mind is you need to
have a decent PC like probably a Mac or
if you're using Windows a decent
graphics card to run these models in
your local machine so yeah that's pretty
much it if you're preparing for front
interviews definitely click the link in
description down below and check out my
front end interview preparation course
浏览更多相关视频
12 VS Code Extensions to INCREASE Productivity 2024
Como usar o VS CODE para programar? Guia COMPLETO e RÁPIDO!
¡No pierdas tu tiempo! Necesitas esta configuración para VSCode
25 VS Code Productivity Tips and Speed Hacks
Learn Visual Studio Code in 7min (Official Beginner Tutorial)
My Top 5 VSCode Extensions for React and NextJS!
5.0 / 5 (0 votes)