These VS Code Extensions made me a 10x developer 🔥🔥

Summary

This 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

00:00

💻 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.

05:01

🔍 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.

10:01

🤝 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.

15:05

🎨 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.

20:08

🧩 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.

25:10

🤖 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.

Keywords

💡VS Code Extensions

VS Code Extensions are add-ons that can be installed in Visual Studio Code to enhance its functionality. In the video, the presenter discusses various extensions that can make a developer more efficient, such as 'Auto Rename Tag' for automatically updating HTML tags, 'ES7 React/Redux/React Native Snippets' for generating boilerplate code, and 'Prettier' for code formatting. These extensions are central to the video's theme of improving developer productivity.

💡Code Editing and Formatting

Code editing and formatting refer to the processes of writing and structuring code in a way that is efficient, readable, and maintainable. The video emphasizes the importance of these processes by showcasing extensions like 'Auto Rename Tag' and 'Prettier', which automate aspects of code editing and enforce consistent formatting standards.

💡Version Control

Version control is a system that records changes to a file or set of files over time so that developers can track and manage these changes. The video introduces extensions like 'Git Graph' and 'GitLens' that enhance the experience of using Git and GitHub, which are popular tools for version control, by providing visual representations of commit histories and authorship information.

💡Developer Experience

Developer Experience (DX) pertains to how easily and efficiently developers can use tools and technologies to create software. The video's third section focuses on improving DX through extensions like 'Peacock' for theming and 'Material Icon Theme' for enhancing file and folder icons, which contribute to a more pleasant and organized development environment.

💡AI Co-pilot

An AI Co-pilot is a tool that uses artificial intelligence to assist developers in writing code. The video mentions an extension called 'Continue' that can act as a local AI code completion tool, similar to GitHub Copilot. It uses AI models to suggest code and explain existing code, which can significantly speed up development and reduce the learning curve for new technologies.

💡ESLint

ESLint is a pluggable JavaScript linter that enforces a consistent style and a set of rules in JavaScript codebases. In the video, the presenter explains how ESLint can be configured to enforce coding standards, prevent errors, and highlight unused variables or imports, which helps maintain code quality.

💡React Snippets

React Snippets are pre-written code templates for React components that can be quickly inserted into a project. The video highlights the use of 'ES7 React/Redux/React Native Snippets' extension, which provides boilerplate code for React components, saving time and ensuring consistency in the structure of new components.

💡GitLens

GitLens is a VS Code extension that helps in code authorship and exploration. It provides insights into the history and evolution of code, such as who made changes, when, and what changes were made. The video uses GitLens as an example of an extension that can supercharge the Git and GitHub experience by making it easier to understand and navigate commit histories.

💡Live Share

Live Share is a VS Code extension that allows real-time collaborative editing and debugging with others. The video demonstrates how Live Share can be used to invite others to edit code simultaneously, regardless of their location, which is particularly useful for remote collaboration and pair programming.

💡Peacock

Peacock is a VS Code extension that allows users to change the color of the VS Code sidebar and activity bar. In the video, Peacock is used to personalize the development environment with colors that match the theme of the tutorial being taught, enhancing the aesthetic appeal and user experience.

💡Material Icon Theme

Material Icon Theme is a VS Code extension that enhances the file and folder icons in the editor to make them more visually distinct and informative. The video mentions how this extension can help developers quickly identify different types of files and folders by their icons, improving the overall navigation and organization within the codebase.

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