Setup C++ in VS Code (Windows 2024)

Sujal Agre — Sat, 10 Aug 2024 13:49:00 +0000

This blog post will guide you to install C++ in Windows for VS Code

Step 1: Installing VS Code

Download the latest VS Code Setup.exe from this link.
Click on I Accept the agreement and click on Next
Make sure to check all the boxes as shown below and click Next.
Click on Install and wait till its installed.
Click on finish.

Step 2: Installing Required Extensions in VS Code.

Go to the Extensions Tab (Ctrl+Shift+X) in VS Code.
Search up and Install the following Extensions.

C/C++

Code Runner

Step 3: Installing C++ Compiler.

Installing the MinGW-w64 toolchain
Get the latest version of MinGW-w64 via MSYS2, which provides up-to-date native builds of GCC, MinGW-w64, and other helpful C++ tools and libraries. This will provide you with the necessary tools to compile your code, debug it, and configure it to work with IntelliSense.

You can download the latest installer from the MSYS2 page or use this direct link to the installer and open it.
Install it with default settings and check the run MSYS2 now box at the finish page and click finish.
In this terminal install MINGW64 by running this command and press enter. pacman -Syu

then type Y to proceed with the installation.
and then type Y once again to update confirm all the MSYS2 Processes.
Open Msys2 application from the start menu.
Type this command line pacman -Su and press enter. Type Y and enter to proceed with the installation.
Paste this command in the terminal.
pacman -S --needed base-devel mingw-w64-ucrt-x86_64-toolchain
and press enter.

then press enter again and type Y to proceed with the installation.

Step 4: Adding bin to Windows PATH environment variable.

Search Edit environment variables for your account and open it.
Select PATH and click on Edit.
Click on new and enter your path to bin folder. If you used the default settings above, then this will be the path: C:\msys64\ucrt64\bin

Step 5: Check your MinGW Installation.

To check that your MinGW-w64 tools are correctly installed and available, open a Command Prompt and type:

gcc --version
g++ --version
gdb --version

If MinGW is installed correctly you should see the version of your installation.

That's It, you have successfully installed MinGW and C++ for VS Code.

Discord Status Widget in Next.js

Sujal Agre — Fri, 09 Aug 2024 22:11:10 +0000

Discord Status Widget in Next.js

This guide will help you integrate a dynamic Discord status widget into your Next.js project.

Step 1: Create the Discord Status Component

Create a folder named components in your project folder if it doesn't exist.
Inside the components folder, create a file named DiscordStatus.js.
Copy the code for the Discord Status component from this link and paste it into DiscordStatus.js.

Step 2: Add Status Images

Create a folder named public in your project root if it doesn't exist.
Inside the public folder, create a subfolder named status.
Download the status images from this folder and place them in the public/status folder.

Step 3: Get Your Discord User ID

To display your own Discord status, you need to use your Discord user ID:

Enable Developer Mode in Discord:

Right-click on your profile in a Discord chat and copy your user ID:

Step 4: Join the Lanyard API Discord Server

To get your Discord status information, we are using the Lanyard API. For the widget to show your own status Join this Discord server and your discord data will be visible at https://api.lanyard.rest/v1/users/[your_id_here]

Learn more about the Lanyard API.

Step 5: Update the User ID in the Component

Open the DiscordStatus.js file and replace the user ID in the fetch URL with your own:

Step 6: Import and Use the Discord Status Component

In the file where you want to display the widget (e.g., app/page.js), import the DiscordStatus component:

   import DiscordStatus from '@/components/DiscordStatus';

Add the DiscordStatus component in your JSX:

   <DiscordStatus />

Here's an example of how to integrate it:

Result

After following these steps, your Discord status widget should be integrated and look similar to this:

It will change according to your current Discord status.

DEV Community: Sujal Agre

Setup C++ in VS Code (Windows 2024)

Step 1: Installing VS Code

Step 2: Installing Required Extensions in VS Code.

Step 3: Installing C++ Compiler.

Step 4: Adding bin to Windows PATH environment variable.

Step 5: Check your MinGW Installation.

Discord Status Widget in Next.js

Discord Status Widget in Next.js

Step 1: Create the Discord Status Component

Step 2: Add Status Images

Step 3: Get Your Discord User ID

Step 4: Join the Lanyard API Discord Server

Step 5: Update the User ID in the Component

Step 6: Import and Use the Discord Status Component

Result