VSCODE EXTENSIONS FOR MY REACT

umaola — Sun, 26 Mar 2023 11:14:46 +0000

An extension is a program that adds to the functionality of another software. That is, it is a type of software that is designed to extend what the base program can do. There are so many extensions for a different software, for instance, there are extensions for our search engines like chrome extensions which aid in Chrome’s functionality. The aim of extensions is basically to make the usage of software easier for a user. This can be seen from our daily usage of Google Calendars, Maps, Meet, Drive, etc, which makes our experience with Google easy.

Therefore, extensions have also been designed for developers to make coding, editing, and formatting easier for them. Here is how to search and install VScode extensions on your visual studio;

1. Click on the extensions Icon on your vscode left menu bar

You can also do this by using the shortcut which is 'Ctrl + shift + x'.

2. Search for your required extension on the search icon

Installation is done by simply clicking on the install button that pops up by clicking each extension. From here, you can search for the extensions that will be discussed below to aid your React coding experience.

Here are some VScode extensions I installed to make react app development easier;

1. Prettier

Though not explicitly designed for React, can be used for react code formatting. It can be used for various languages like Javascript, graphql, JSX, Vue, etc.

Prettier is an opinionated code formatter that enforces a consistent style by parsing your code and re-printing it with its own rules. By opinionated, it means Prettier believes there is one way (the right way) your code should be and it guides you through this right way.

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

Functionalities offered by Prettier
• You can type ‘! + enter’ to give you your file structure in your index.html file like this;

• Instead of manually typing out your elements and inputting classes, you can type the class name with the class indicator + enter. Like, typing ‘.class’ will give;

The element’s tag can then be edited to the desired tag.

You can also make it appear many times by imputing the class name and multiplying by the number of times you want. Eg, ‘.class*3’ will give;

There are so many other functionalities for different languages you will get to discover as you go on.

2.ES7 React/Redux/Graphql/React-Native snippets

This provides Javascript and React snippets. It supports the following languages; Javascript, Jsx, Typescript, and Tsx.

Functionalities offered by ES7/React/Redux/Graphql/React-Native snippets
• rfce + enter: this works like ‘!+enter’ in prettier. It gives the file structure of a component in react. Typing ‘rfce + enter’ in your App.js will yield;

It also autocompletes your react codes and brings suggestions to also choose from while typing your react codes. I highly recommend this extension for your VScode.

3. Auto Rename Tag

This automatically renames your paired HTML/XML tag. It gives room to make changes to just one tag while the other tag automatically changes too. It increases coding productivity with Tabnine’s AI code completions.

4. Code GPT

This is using ChatGPT on your VScode! Once, it is installed it brings up a chat section in your left menu bar used for asking the AI to generate code snippets.

After the code is generated, you can copy and use it in your project. For more, on using CodeGPT read my article: Using ChatGPT on your VScode.

HOW TO USE CHATGPT ON VSCODE

umaola — Fri, 17 Mar 2023 22:04:35 +0000

What is ChatGPT?

ChatGPT is an Artificial Intelligence chatbot that mimics human conversation. The dialogue format makes it possible for ChatGPT to answer follow-up questions, admit its mistakes, challenge incorrect premises, and reject inappropriate requests. It was designed by an AI research company, OpenAI, and launched on 30th November 2022. Its latest version, ChatGPT-4, was recently launched on March, 2023.

Features
ChatGPT has been embellished with great features that makes it too good to be true. Elon Musk said, “ChatGPT is scary good. We are not far from dangerously strong AI”. Some of the features are;
• It is very versatile in that it can be used for various tasks cutting through different works of life. It can write and debug computer programs, and compose music, letters, reports, resume, articles, essay, etc. It can even answer test questions. ChatGPT-4 was tested to answer exams originally designed for humans and the estimated percentile for a uniform Bar exams was 298/400.
• Also, it attempts to reduce deceitful responses by framing its answer as a hypothetical consideration of the prompt.
• Similarly, ChatGPT can accept a prompt of both text and images. This really came to life with the ChatGPT-4 even though it outputs texts. Image inputs are still a research preview and not publicly available. That is, the image input will be available to only users of ChatGPT-4.
• Lastly, ChatGPT does not erase previous prompts by a user on the same conversation.

Limitations
Even though ChatGPT was created to imitate man and try to be as natural as possible. It can never replace man nor exist without its shortcomings. Hence, it is not fully reliable. Some of the limitations include;
• It sometimes writes incorrect answers or answers without meaning.
• It is sensible to tweaks in input statements. Like, given one phrasing of a question, the model can claim to not know the answer, but given a slight rephrase, can answer correctly.
• It can sometimes respond to harmful instructions or show biased behavior. For this OpenAI uses the Moderation API to warn or block certain types of improper contents.
• It can fail at hard problems the same way humans do, such as introducing security vulnerabilities into the code it produces.

However, GPT-4 scored 40% higher in its internal adversarial factuality evaluation making it better than GPT-3.5(the previous version).

Having talked extensively about ChatGPT, you will agree with me that using ChatGPT with caution will aid your productivity when coding. Now, this is how I use it on my VScode;

VScode has an extension available for download on it extension store called, CodeGPT

Installation
This is pretty much simple.
Search for Code GPT on your extensions search bar.

Install and restart your VScode to activate.

Usage
Caution:_ Do not ask very tactical coding issues to prevent creating bugs in your codes. Use with caution and review every output!_
A chat icon will appear at the left menu bar on your VScode. Click on the chat icon and begin to use Code GPT.

You can write a comment asking for a specific code, press ctrl+shift+i or cmd+shift+i and use the code generated.
You can also ask CodeGpt to review a set of code.

It has a functionality that allows you to get questions from Stackoverflow and compare the best human answer with the answer from an artificial intelligence.

You can ask CodeGPT to create a README.md for a set of codes

You can also select a block of code and ask CodeGPT to explain the code for you.
And lots more!!

In summary, ChatGPT is an AI designed to help us but not to replace us. It cannot replace your intellect and what you code from your own understanding of a language. Utilize the help and give your best.

Forem: umaola