This VS Code AI Coding Assistant Is A Game Changer!

codeSTACKr
12 Mar 202414:27

Summary

TLDRこの動画では、無料で提供されているVSSコードAIコーディングアシスタントであるCodiumを探索しています。Codiumは、GitHub Copilotに代わる最高の無料オプションである可能性があります。40以上のIDEに対応し、70以上の言語で動作し、リポジトリ全体のコンテキストを認識。個人ユーザーには無料で利用可能で、チームは月額12ドルでサポートや管理ダッシュボードを提供。Codiumの機能を試して、基本的なNode.js Expressサーバーを作成し、リアルタイム為替レートを取得するAPIエンドポイントを実装。また、Codium Liveの機能を利用して、BunやNext.jsなどの技術に対応するAIチャットボットと対話。Codiumは開発者のエクスペリエンスを向上させるために、コードの説明、リファクタリング、問題の解決を提案する機能も備えています。

Takeaways

  • 🌟 VSS code AIコーディングアシスタントの新製品、Codiumが紹介されています。
  • 🔍 Codiumは、GitHub Co-pilotの無料の代替として注目されています。
  • 💡 Codiumは現代のコーディング超能力者と自称し、400以上のIDEと70以上の言語をサポートしています。
  • 🆓 個人ユーザーには無料で利用可能で、40以上のIDEと70以上の言語に対応しています。
  • 📚 完全なリポジトリのコンテキスト認識を提供し、プロプライエットコードにも対応しています。
  • 🏢 企業向けには、管理者ダッシュボードや席管理、GPT-4のサポートが利用できます。
  • 🚀 CodiumはSaaSであり、プライベートクラウドのデプロイも可能です。
  • 🛠️ Codiumはエラーチェックやコードの改善提案も行います。
  • 📝 コードブロックの説明やJSドキュメントコメントの作成もサポートしています。
  • 🎉 正しいコードを生成した際には、コンフィettiと共に「Good Job」という称賛が表示されます。
  • 💬 Codiumのチャット機能では、特定の技術に関連するAIチャットボットと対話できます。
  • 🔧 コードのリファクタリングや問題の解決を提案する機能も備えています。

Q & A

  • VSSコードAIコーディングアシスタントとは何ですか?

    -VSSコードAIコーディングアシスタントは、プログラム開発者がコードを書く際に助言や自動完成などの機能を提供するツールです。

  • codiumはどのようなツールですか?

    -codiumは、現代のコードスーパーパワーと自称するVSSコードAIコーディングアシスタントです。GitHub co-pilotの無料代替として注目されています。

  • codiumが支持されているIDEの数は何ですか?

    -codiumは40以上のIDEに対応しています。

  • codiumがサポートする言語の数は何ですか?

    -codiumは70以上の言語をサポートしています。

  • codiumのFull repo context awareness機能とは何ですか?

    -Full repo context awareness機能とは、codiumがリポジトリ全体の文脈を理解し、その文脈に基づいてコードの自動完成や提案を行う機能です。

  • codiumのAIチャットアシスタントはどのように動作しますか?

    -codiumのAIチャットアシスタントは、ユーザーが入力したコードや質問に対して、リアルタイムに助言やコード提案を行うことができます。

  • codiumの有料プランにはどのような機能が含まれていますか?

    -codiumの有料プランには、管理者ダッシュボード、席管理、GPT-4サポートなどの機能が含まれています。

  • codiumが培養されるデータの種類は何ですか?

    -codiumは、ある程度オープンソースであるコードベースでのみ訓練されます。つまり、許可されたデータのみを使って学習されています。

  • codiumが提供するコード生成の精度はどの程度ですか?

    -codiumは高速で正確なコード生成が可能ですが、完璧ではありません。AIが全てのコードを書くわけではなく、開発者が理解し、調整する必要があります。

  • codiumのコード説明機能はどのように動作しますか?

    -codiumのコード説明機能は、選択したコードブロックを分析し、その機能や動作を説明するコメントを生成します。

  • codiumのリファクタリング機能はどのようなことをすることができますか?

    -codiumのリファクタリング機能は、コードにコメントを追加、バグを修正、コードをより効率的かつタイプセーフにするためにasync/awaitを使用など、様々な改善を行います。

Outlines

00:00

🚀 VSSコードAIコーディングアシスタントの探求

ビデオの第1段落では、多くのVSSコードAIコーディングアシスタントの1つであるCodiumについて探求しています。このアシスタントはGitHub Copilotの最高の無料代替として注目されています。Codiumは現代のコードスーパーパワーとして自称しており、40以上のIDEに対応し、10万以上の開発者から愛されています。このツールはマルチラインの自動完成、チャットと検索、そしてコパイロと比較して注目すべき大きなポイントは個人向けの無料利用、40以上のIDEサポート、70以上の言語対応、そしてフルレポジトリのコンテキスト認識を誇っています。また、CodiumはSaaSであり、Proprietaryコードにも対応し、SOC2タイプ2のコンプライアンスを維持しています。

05:00

🔍 Codiumの機能と実践

第2段落では、Codiumの機能を実践的に検証しています。Codium Liveという機能を通じて、BunやNext.jsなどの技術に対応したAIチャットボットと対話することができます。これらのボットは、特定の技術に関する豊富なコンテキストを持っており、ブラウザ上で即座にサポートが可能です。 また、Codiumはコードブロックの説明を生成し、JSドキュメントスタイルのコメントを自動作成することができます。コードのリファクタリング機能も豊富で、コメントの追加、バグのチェック、コードの最適化など、多数のオプションを提供しています。

10:03

🌟 Codiumのパフォーマンスとユーザエクスペリエンス

最後の段落では、Codiumのパフォーマンスとユーザエクスペリエンスについて述べています。Codiumは非常に高速であり、エラーの特定や修正を正確に行うことができます。また、コードの改善提案や、Unitテストの生成など、開発者がより迅速かつ効率的にコードを書くための多くの機能を提供しています。 ただし、AIコーディングアシスタントは完璧ではありません。自動ですべてのコードを書くことはできませんが、Codiumのようなツールは開発者の助けとして非常に役立ちます。最後に、Codiumを試してみることを勧め、コメント欄で意見を共有し、他のAIコーディングアシスタントのレビューを希望する場合はライクや登録をしてください。

Mindmap

Keywords

💡VSS code AI coding assistant

VSSコードAIコーディングアシスタントは、プログラマーがコードをよりスムーズに作成できるように支援するツールです。このビデオでは、その一種であるCodiumについて紹介されており、GitHub Copilotの無料の代替として注目されています。

💡Codium

Codiumは、プログラマー向けのコード補完や自動化を支援するAIコーディングアシスタントです。このツールは、40以上のIDEに対応し、70以上の言語に対応しています。また、Codiumは無料で利用でき、企業ではプライベートコードにも対応するという特徴があります。

💡Auto-completion

自動補完は、プログラマーがコードを書く際に、AIが適切なコード候補を提案する機能です。これにより、開発者は効率的にコードを書くことができます。Codiumでは、複数行の自動補完が提供されています。

💡Chat and search

チャット&サーチは、Codiumの機能の一つで、プログラマーが特定の質問や問題を解決するために使用できます。チャットボットと呼ばれるAIが、ユーザーの質問に答え、必要な情報を提供します。

💡Free for individuals

個別のユーザーに対して無料で利用できるとは、Codiumが提供するサービスを個人が無償で使用できることを指します。これにより、プログラマーは経済的な負担なく、Codiumの機能を活用できます。

💡Repo context awareness

レポコンテキストの認識は、Codiumがコードベースの全体像を理解し、その文脈に基づいて補完や提案を行うことを意味します。これにより、より適切なコード生成が可能になり、開発者の作業効率が向上します。

💡SO2 type 2 compliance

SO2タイプ2の準拠は、医療機器ソフトウェアの開発において、品質管理システムの国際基準を遵守することを意味します。Codiumがこの基準に準拠していることは、医療分野での利用においても安全と信頼性が確保されていることを示しています。

💡GPT-4 support

GPT-4のサポートは、Codiumが最新のAI技術であるGPT-4を活用して、より高度な機能を提供することを意味します。これにより、より自然なコード生成や問題解決が可能になり、開発者の生産性が向上します。

💡Tailwind CSS

Tailwind CSSは、Web開発において人気のデザインシステムです。これは、UIのコンポーネントを作成するためのクラスライブラリで、高速で柔軟なスタイル付けを可能にします。CodiumはTailwind CSSとの互換性があり、スクリプトではその使用法が示されています。

💡Error checking

エラーチェックは、プログラムの実行中にエラーが発生しないように、事前にコードを検証するプロセスです。Codiumはエラーチェック機能を備えており、スクリプトではこの機能が正しく動作することを示しています。

💡Code refactoring

コードリファクタリングは、既存のコードを構造化し、効率的で読みやすいものに改善するプロセスです。Codiumはこのプロセスを支援し、スクリプトではリファクタリング機能が示されています。

Highlights

探索VSS code AI编码助手,可能成为GitHub co-pilot的最佳免费替代品。

介绍Codium,一个现代编程超级大国,受到成千上万开发者的喜爱。

Codium支持40多种IDE和70多种语言,具有完整的仓库上下文感知能力。

Codium对个人免费,提供无限使用、AI聊天助手和自动补全功能。

Codium可以在私有云和NVPC上部署,适合拥有专有代码的公司。

Codium遵守SOC 2 Type II合规性,适合企业使用。

Codium的团队版提供每月12美元的订阅服务,包括GPT-4支持和管理员仪表盘。

Codium的AI聊天助手能够创建基于Node.js和Express的HTTP服务器和API端点。

Codium提供了代码块的解释功能,帮助开发者理解代码逻辑。

Codium的AI助手能够生成JS文档风格的注释。

Codium Live提供针对不同技术的AI聊天机器人,如Bun、Next.js等。

Codium Live的Bun聊天机器人能够提供使用Bun构建简单HTTP服务器的代码示例。

Codium的AI助手能够为Next.js应用创建服务器端行动以从数据库获取数据。

Codium提供代码重构建议,如添加注释、生成单元测试和优化代码。

Codium能够快速准确地识别和修复代码中的问题。

Codium支持Tailwind CSS,能够为电影标题添加样式创建卡片。

Codium虽然不是完美的,但能够帮助开发者更快地编写代码。

视频作者推荐尝试Codium,并邀请观众分享他们的看法。

Transcripts

play00:00

in today's video I'm going to explore

play00:01

yet another VSS code AI coding assistant

play00:05

yes I know what you're thinking there

play00:07

are tons of these things now but this

play00:09

really just might be the best free

play00:11

alternative to GitHub co-pilot so let's

play00:14

check it

play00:15

[Music]

play00:18

out we're going to take a look at codium

play00:21

now codium is the sponsor of today's

play00:23

video but the viewpoints expressed are

play00:25

my own I will give an unbiased analysis

play00:28

so they call themselves The Modern

play00:29

coding

play00:30

superpower let's take a look here loved

play00:33

by hundreds or thousands hundreds of

play00:35

thousands of developers over 40 IDE e

play00:38

supported that's crazy all right Auto

play00:40

completion what I'm seeing here is

play00:42

multi-line auto completion so that's

play00:44

pretty cool chat and search and let's

play00:47

see how they are comparing themselves to

play00:49

co-pilot here and I think this is the

play00:51

big piece here that it is free for

play00:54

individuals um 40 plus idees and 70 plus

play00:59

languages which which is pretty crazy

play01:01

full repo context awareness interesting

play01:05

not only is this a sass but it can be

play01:06

deployed on Prim and nvpc which is great

play01:09

for companies with proprietary code and

play01:12

they're s SO2 type 2 compliant so let's

play01:15

see what we get uh individual one seat

play01:17

free forever autoc completion uh AI chat

play01:21

assistant unlimited usage that's pretty

play01:23

big and then it's trained on permissive

play01:26

data which means it is not trained on

play01:29

code bases that are not open source to

play01:32

some degree and then for teams let's see

play01:34

what do you get if you pay $12 a month

play01:36

you get admin dashboard seat management

play01:39

okay GPT 4 uh support so that's uh

play01:43

interesting so I'm assuming the

play01:44

individual one is 3.5 all right so we've

play01:48

got all of our different

play01:49

idees uh different

play01:52

languages uh looks like your your

play01:54

Tailwind image here is

play01:57

broken uh we'll look past that um bunch

play02:00

of Partners and a lot of cool reviews oh

play02:03

I just noticed this one from swix pretty

play02:04

cool all right so let's check it out and

play02:07

see what it's capable of I installed the

play02:09

extension in vs code and I did have to

play02:11

sign in but now this is what I get here

play02:14

under the codium chat let's start out by

play02:16

seeing if it can create a basic node.js

play02:18

Express server and create some custom

play02:21

endpoint so I'm going to ask it using

play02:22

no. JS how do I create an API endpoint

play02:25

for an HTTP server that dynamically

play02:28

converts currencies by fetching realtime

play02:30

exchange rates from a third party

play02:32

service and the endpoint should accept

play02:34

yada yada okay so let's see what it does

play02:37

okay so it is pretty thorough here and

play02:41

fast as well uh let's see what it did so

play02:45

it's having us use the HTTP package and

play02:48

node

play02:49

Fetch and I mean I think this would

play02:53

technically work let's um let's Also

play02:56

let's modify this I want to say uh let's

play02:59

use

play03:00

Express for this

play03:05

instead okay all right that seems to

play03:09

be uh pretty good so it looks like uh

play03:13

require Express node fetch we got our

play03:16

app going on a port uh we've got our get

play03:19

in points here our from and two we're

play03:22

getting that from our request query uh

play03:25

it's using this API and then doing the

play03:28

conversion

play03:31

and it's got even some error checking in

play03:33

here and then it's running so it seems

play03:36

like that would actually work so let's

play03:38

do a thumbs up this is actually one of

play03:40

the best parts of the app I like when

play03:42

you get something right you give it the

play03:43

thumbs up and you get confetti that's

play03:46

pretty pretty amazing I love the

play03:48

developer experience there okay so what

play03:50

are our options we can looks like we can

play03:53

copy the code or insert the code so I

play03:55

have a a server JS file open here and

play03:57

let's go ah and insert it and pretty

play04:00

easy okay let's see if we can get it to

play04:02

explain a code block for us let's say

play04:05

let's just highlight this bit

play04:08

here and I'm not sure the proper way to

play04:11

go about this let's go

play04:14

codium uh explain selected code

play04:18

block all

play04:21

right says this code snippet creates an

play04:23

endpoint slon convert currency which

play04:27

takes query parameters from in two and

play04:29

the ount fetches the exchange rate

play04:31

external API from in two currencies then

play04:34

calculates the converted amount and

play04:36

sends it as Json response um so yeah

play04:40

that's exactly what it does let's see

play04:42

how well it does creating a JS doc style

play04:46

comment okay so it looks like it's going

play04:49

line by

play04:52

line I'm hitting enter for each

play04:55

line okay so it keeps giving us the same

play04:58

example over and over there um but this

play05:00

is this is pretty good so we've got our

play05:02

prams from two

play05:04

amount each example was basically the

play05:08

same thing um but pretty good now maybe

play05:12

I want to do that same thing but with

play05:14

the bun JavaScript run time well I want

play05:17

to check out this as well codium live so

play05:19

codium also has on their website this

play05:22

feature codium live which has various

play05:24

context aware AI chat bots so they have

play05:26

one for bun Lang chain nextjs and and

play05:29

several others so let's use the the bun

play05:33

uh chatbot and let's ask it a question

play05:36

how do I use bun to build a simple HTTP

play05:40

server show a code

play05:46

example okay so it's giving us this

play05:48

example here looks like it's importing

play05:51

serve from

play05:53

bun uh Bun Run server. TS and it's

play05:57

giving us some uh context items

play06:01

here what does this bring us

play06:04

to okay so it looks like it's pulling

play06:06

most of its context directly from the

play06:07

bun repo that's pretty cool so this is

play06:10

really nice to be able to chat with some

play06:13

specific uh AI chat Bots uh for

play06:15

different technologies that could be

play06:17

helpful right here in the browser let's

play06:19

try a different use case all right so I

play06:22

have a nextjs App open here and under

play06:26

the app directory I have an actions. TS

play06:28

file here and it's blank so I want to

play06:30

create a server action to bring in

play06:33

movies from a database so let me write a

play06:36

comment here all right so create an xjs

play06:38

server action that Imports movies from

play06:40

the manga to be sample database that is

play06:43

called sample

play06:44

inflix let's see what it does all right

play06:47

so first option here is import

play06:50

client that is not what I want to do I

play06:51

actually have a lib file here that

play06:54

controls uh the mongod to be connection

play06:57

let's see what the next suggestion is

play06:59

okay that's right client promise from my

play07:01

local file export async function get

play07:04

movies that looks good and then client

play07:07

is going to await client promise sure my

play07:10

DB is going to be sample inflix yep

play07:14

movies is going to await DB do okay do

play07:18

collections is going to be movie and

play07:21

then find all limit of two to array that

play07:25

looks good and then let's return movies

play07:30

the only thing that I'm not seeing here

play07:33

is it probably should be uh use server

play07:37

up

play07:39

here and now I'm seeing these things

play07:41

above here codium refactor explain and

play07:44

generate JS doc that's pretty cool let's

play07:46

do the generate JS doc real quick and

play07:48

see what that does let's say yeah

play07:52

and add it okay that looks pretty good

play07:56

um let's see what happens when we hit

play07:57

refactor okay so it's giving us us some

play07:59

options add comments and dock strings to

play08:02

the code add console log statements

play08:05

clean up this code check for bugs and

play08:08

null pointers implement the code for the

play08:11

to-do comment oh uh generate unit tests

play08:15

make oh there okay generate unit

play08:17

tests make this code strongly typed make

play08:21

this faster more efficient use async

play08:23

await instead of promises verbosely

play08:26

comment this code so that I can

play08:28

understand what's going on let me see

play08:30

what that

play08:35

does okay so let's see let's just apply

play08:38

it and accept well yeah so basically

play08:41

just added a comment for most lines so

play08:44

wait for M to be client to be ready

play08:47

connect to the sample inflix database

play08:50

retrieve all movies from the uh movies

play08:52

collection limit to two and convert the

play08:54

results to an array um it

play08:58

didn't um say anything about the return

play09:00

but I guess that's

play09:02

obvious um and if I didn't explain it

play09:05

should basically tell me that same thing

play09:07

uh just in a very short paragraph

play09:10

retrieves a list of movies from the

play09:12

sample inflix database uh uses mongodb

play09:15

returns a promise that resolves to an

play09:17

array of movie objects pretty cool okay

play09:20

and I see here it says ask anything use

play09:23

at symbol to mention code blocks so

play09:26

let's see if we can say at get

play09:30

movies let's say

play09:32

rewrite this function to remove all

play09:40

comments nice so we could use that to uh

play09:43

refactor probably or to add additional

play09:45

functionality so I like that let's uh

play09:47

let's get some confetti and copy that

play09:50

now if we have an error let's see let's

play09:53

remove one of these awaits and we're

play09:55

going to get an error here and now we

play09:58

can see this new link here codium

play09:59

explain problem so let's do that and see

play10:03

what it

play10:05

says okay I just want to reiterate the

play10:08

fact that it's so fast it's crazy fast

play10:12

so the issue property DV does not exist

play10:14

on type promise occurs when variable

play10:16

client is assigned to client promise

play10:18

directly which is a promise that

play10:20

resolves toong to be client to fix this

play10:22

you need to await the client promise so

play10:24

it very accurately found the issue and

play10:28

is fixing it here so it's notices that

play10:31

we need the await there and what did it

play10:33

comment yeah it even commented here

play10:35

await client promise all right so this

play10:38

is great again and the only issue I see

play10:41

here though is copy code and then insert

play10:46

code I wish that this had some way of

play10:49

just overwriting the existing code here

play10:51

but that's a a feature request um if I

play10:54

did insert code it's going to kind of

play10:55

just insert it wherever my cursor was so

play10:58

I need a c copy this and

play11:00

then uh actually it's going to copy the

play11:02

entire thing probably from client

play11:06

promise all the way

play11:10

up there but now it works so let's now

play11:13

implement this into uh a page here so

play11:16

let's go over to our page and I want to

play11:19

bring these in so let's see uh here at

play11:22

the top go right here and this time I'm

play11:24

going to do control I and I'm going to

play11:27

say use the get movies server action to

play11:31

display the movie titles on this page

play11:34

and let's see what it

play11:39

does pretty good let's accept it uh we

play11:42

need to get rid of this page that we had

play11:44

below

play11:45

that and this is coming from our server

play11:48

actions that's let's see is this cannot

play11:51

find the module

play11:53

actions okay so let's uh see what

play11:57

happened here this should be

play12:00

actions like that so it was going up too

play12:03

many directories there then we have an

play12:05

issue here with our map it says map does

play12:08

not exist on type promise yeah this so

play12:11

this is a let's I think we're going to

play12:12

need to await this and then uh this is

play12:16

going to have to be an async

play12:19

function and then we should be good all

play12:22

right so even though it got it mostly

play12:25

right there were still some little

play12:28

issues which kind of goes back to the

play12:30

point of can AI really do it all but

play12:33

it's definitely helping and

play12:36

assisting so this seems like it should

play12:40

work um let me just go ahead and save

play12:42

this and run it and see what happens

play12:44

okay so we've got movies and two titles

play12:47

from movies and it actually worked which

play12:50

is pretty cool all right I want to try

play12:53

one more thing here let's see how good

play12:55

it is with Tailwind so I want to add

play12:58

some Tailwind classes to this so let's

play13:00

select that control I and say add

play13:04

Tailwind

play13:06

classes

play13:08

to create

play13:11

cards with the

play13:15

movie

play13:16

titles the cards

play13:20

should have a black

play13:24

background and white text let's just see

play13:28

what it does

play13:33

I really like how it does this diff here

play13:34

so we see what it was before and then

play13:37

what it is changing it to that's pretty

play13:40

cool so black background text white um

play13:42

some rounded corners and a shadow I mean

play13:46

that's pretty decent let's accept that

play13:49

and let's save that and then go back and

play13:51

check it out well we've got some

play13:53

interesting looking cards there but it

play13:55

is working codium is pretty cool now

play13:58

none of these AI coding assistants are

play14:00

perfect and they're not going to write

play14:02

all of the code for you you still need

play14:04

to know what you're doing and but they

play14:06

should be able to help you to code

play14:08

faster and for what what I've seen I

play14:10

think codium is very capable of that and

play14:13

for the price it's a no-brainer so give

play14:16

codium a try and let me know what you

play14:17

think in the comments below and if you

play14:19

want to see me review other AI coding

play14:21

assistants let me know and if this video

play14:23

was helpful give this video a like And

play14:25

subscribe

Rate This

5.0 / 5 (0 votes)

Связанные теги
VSSコードAIアシスタントCodium無料で利用開発効率化Node.jsExpressリアルタイム為替レートAPIエンドポイント
Вам нужно краткое изложение на английском?