Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Discover how AI-powered Visual Studio Code extensions like GitHub Copilot, IntelliCode, and Tabnine revolutionize coding practices! We'll explore how they can tremendously boost productivity by predicting code, suggesting relevant edits, and automating repetitive tasks.
Extensions Discussed
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hey everyone, Rohald here.
0:09
Today we'll look at AI powered VS Code
extensions that can supercharge your
0:11
coding productivity.
0:15
These extensions are designed to enhance
your coding experience providing
0:17
helpful features, and
allowing you to work more efficiently.
0:21
So let's dive right in.
0:25
One of the most notable tools
in this space is GitHub Copilot.
0:26
Copilot is an AI-powered coding assistant
that suggests entire lines or blocks
0:31
of code as you type, making the coding
process smoother and more efficient.
0:35
It's like having a pair programmer by
your side, offering suggestions and
0:40
insights based on a vast
amount of open source code.
0:44
If you're intrigued by GitHub Copilot and
want a comprehensive understanding,
0:47
we have a workshop dedicated to it.
0:52
You can find a link to this in
the teacher's notes below this video.
0:54
The next extension we're going
to highlight is in telecode.
0:58
This AI powered extension developed
by Microsoft, uses machine learning
1:01
algorithms to provide intelligent
code completion suggestions.
1:06
For example, when working with Axios,
a package for making HTTP requests,
1:10
the built-in IntelliSense would give
you suggestions alphabetically.
1:15
While it's helpful to see
what's available to us,
1:20
we're not very likely to use any
of the methods shown at the top.
1:22
IntelliCode rearranges the IntelliSense
suggestions based on relevance and
1:25
how commonly they are used
in open source projects.
1:30
Now the get, post, and create methods
are shown at the top, which saves you
1:33
time by reducing the need to type out
repetitive or commonly used CodeBlocks.
1:38
Next up we've got Cody.
1:43
Cody is an open source
alternative to GitHub Copilot.
1:45
It offers a lot of features like
autocomplete and an AI-powered chat.
1:48
After installing Cody,
1:53
you'll notice the autocomplete
suggestions it gives while coding.
1:55
When you start typing,
it will come up with suggestions and
1:58
try to complete a line or
even an entire block of code.
2:02
To accept a suggestion,
simply press Tab and the code will appear.
2:04
But that's not all.
2:08
Cody has quick commands for
common actions, such as adding code
2:10
documentation, explaining code, generating
unit tests, and detecting code smells.
2:14
Choosing such an action will open up the
chat, and once it has finished generating,
2:20
you can conveniently insert
the code at your cursor.
2:25
The explain command is great to
get familiar with a new code base,
2:28
select the piece of code and
run the command,
2:32
Cody will explain the selected
CodeBlock in detail.
2:35
Many more features come with this coding
assistant like an inline chat in your text
2:45
editor.
2:49
If you wanna learn more about Cody,
2:50
check out their documentation linked
in the teacher's notes below.
2:52
If you're looking for
3:07
a way to bring the power of ChatGPT into
your IDE Genie is a great extension.
3:09
Once installed, you'll be prompted
to provide an OpenAI API key.
3:14
After setting up your key,
3:20
you can use the most popular OpenAI
large language models in VS Code.
3:21
After installing the extension, you'll
find the Genie icon in your sidebar.
3:26
To start using it,
select the code you want to work with.
3:31
And open up the Genie panel.
3:35
At the bottom, you'll find shortcuts
to frequently used prompts.
3:37
Let's try the add test shortcut.
3:41
Genie will create a new file and
start doing its thing.
3:43
There we go.
3:46
Three tests ensure our bubble sort
function is working as expected.
3:47
In the text field,
you can create custom prompts.
3:51
And by adjusting the temperature,
3:54
you can control how the model
responds to your requests.
3:56
Let's ask it to add some JS
dot comments to our function.
4:00
Beautiful, it generated
a short description and
4:05
added param and return tags and
descriptions as expected.
4:08
You could even asked Genie to convert
your code into another language.
4:12
Let's see what this function
would look like in Python.
4:15
Finally, let's have a look at Tabnine.
4:20
Tabnine is an AI powered code completion
tool that integrates seamlessly with your
4:23
favorite code editors, providing
intelligent suggestions as you type.
4:27
It understands your code context and
predicts what you will type next,
4:31
saving you valuable time and
reducing errors.
4:35
Let's see Tabnine in action.
4:38
I've opened up the project build in
our React context workshop which has
4:40
a theme switcher.
4:45
Currently, it only stores
the preference in state.
4:46
So when I switch to dark and
refresh the browser window,
4:49
it will default back to the light theme.
4:52
Let's see if we can use Tabnine
to set up a local storage hook.
4:55
I've already created a new file,
and as I start the useState import,
4:58
you'll see that the extension
begins suggesting code.
5:03
To confirm a suggestion, I press Tab.
5:06
Let's call our hook useLocalStorage.
5:09
And before I can finish
typing the name of the hook,
5:12
I'm getting suggestions from Tabnine.
5:15
Great, it suggests adding two parameters,
a key, and the initial value,
5:17
which is exactly what we need.
5:22
And right away, when hitting return,
it suggests code for the entire hook.
5:24
Let's confirm this suggestion and
5:28
ensure the hook is being exported
at the bottom of the file.
5:30
There we go.
5:34
Just how I wanted.
5:35
As you can see,
this saves me a lot of time.
5:36
Depending on your plan,
Tabnine also offers a chat feature.
5:39
Let's see if we can ask it how we can
implement this new hook in our project.
5:43
Tabnine uses the context of our project
to provide a detailed explanation and
5:47
code snippet.
5:53
Let's give this a try.
5:54
The theme is currently stored in
context using the useState hook.
5:56
Let's adjust this to use
our useLocalStorage hook.
6:01
As suggested in the chat,
I'll provide the key of theme and
6:04
an initial value of false.
6:08
Finally, we'll want to ensure the hook
is being imported at the top.
6:10
Now in the browser, let's open up our
dev tools and check if our hook works.
6:14
When clicking the dark mode toggle,
the theme switches,
6:20
and in the dev tools we can now see
the value stored in local storage.
6:23
When I try to refresh the page, the page
uses the dark theme by default, and
6:28
toggling the mode adjusts
the value stored in local storage.
6:32
Perfect, all right, that wraps up our
quick tour of five amazing AI powered
6:36
VS Code extensions designed to
supercharge your coding productivity.
6:41
Remember, they're all about making
your life as a developer easier and
6:46
more efficient.
6:50
Don't be shy to experiment
with these tools and
6:51
determine which ones work best for you.
6:54
Until our next programming adventure, keep
coding, keep creating, and keep learning.
6:56
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up