DEV Community: Kishan Zalariya

Become a Code Expert with CodeGPT VSCode Extension

Kishan Zalariya — Mon, 13 Feb 2023 07:24:01 +0000

In this article, we will learn how to configure the CodeGPT extension in VSCode and its use cases.

What is CodeGPT?

CodeGPT VSCode Extension is a plugin for the popular code editor, Visual Studio Code (VSCode), that utilizes OpenAI's language model to provide advanced code completion functionality. The extension integrates directly into VSCode, providing real-time code suggestions as you type. Using advanced machine learning algorithms, CodeGPT VSCode Extension can understand the context of your code and provide suggestions that are relevant to your current coding task. This can help you save time and improve your coding efficiency by reducing the time spent searching for the right code snippets. CodeGPT VSCode Extension is designed to make coding faster, more efficient, and more enjoyable for VSCode users.

Features of CodeGPT

Ask general questions
Right click on a code selection and run one of the context menu shortcuts
- Automatically write documentation for your code
- Explain the selected code
- Refactor or optimize it
- Find problems with it
View GPT's responses in a panel next to the editor

Install Extension

Go to extensions menu on VSCode and search for Code GPT then Install it.

Retrieve OpenAI API Key

Go to OpenAI's website. If you don't have an account, you will need to create one or sign up using your Google or Microsoft account.
Click on the Create new secret key button.
Your API key is generated copy it as shown in the image below:

**NOTE*: When you create a new account, you receive $18 in free credits for the API which you must use in the first 90 days. You can see API usage information here.

Configure API Key in CodeGPT

Now, the final step is to put this secret key in the settings of VSCode extension Code GPT. By perform the following steps:

Press Ctrl+Shift+P

Search for CodeGPT: Set API KEY
Finally, insert the Key and press Enter as shown in the image below:

Ready to Use

Select any code, open the context menu with the right mouse button, and choose the desired option from the list:
- Ask CodeGPT: will provide a prompt for you to enter any query
- Compile & Run CodeGPT
- Explain CodeGPT
- Refactor CodeGPT
- Document CodeGPT
- Find Problems CodeGPT
- Unit Test CodeGPT
See the result of ChatGPT's answer in a new editor window.
You can see more features here.

Thanks for reading!!!☺

Array Grouping In JavaScript Using array.groupBy()

Kishan Zalariya — Fri, 04 Mar 2022 05:46:16 +0000

Today’s topic is the new array-group-proposal that introduces new methods array.groupBy() and array.groupByToMap().

We will learn about grouping an array of objects by key using groupBy() and groupByToMap().

👉 Click here to read full article.

Export JSON Data To Excel In React

Kishan Zalariya — Thu, 27 Jan 2022 05:33:28 +0000

In this article, we will learn about how to load data asynchronously and export JSON data to excel in react using the react-csv package.

👉 Click here to read article.

Generate Dynamic PDF With Custom Style In React

Kishan Zalariya — Mon, 03 Jan 2022 17:01:53 +0000

“A person who never made a mistake never tried anything new.” - Albert Einstein

This article is a step-by-step guide to generate dynamic PDF. Also, view and download it in ReactJs using React-pdf library. We will also understand the basic components of the React-pdf library with real life examples.

👉 Click here to read article.

Create Different Charts In React Using Chart.js Library

Kishan Zalariya — Wed, 22 Dec 2021 07:56:04 +0000

"A little progress each day adds up to big results." - Satya Nani

In this article, I discussed how to create different charts like Line chart, Bar chart, Pie chart using Chart.js NPM library with examples. Also, discussed overview of Chart.js library.

Read here

I hope you like this article.