Installing the Live Preview Extension

In VS Code, open the Extensions view or press Ctrl + Shift + X in Windows or Shift + Cmd + X in Mac OS. Inside the search bar, type “live preview”. Then select the extension and click on Install.

Using the Live Preview Extension

To preview your code in VS Code, do the following:

1. Open the code file that you want to preview. Select the Open File option from the “File” menu. Alternatively, press Ctrl + O in Windows or Cmd + O in Mac OS

   

2. Navigate to the code file in the Open File dialogue box, select it, and click on the Open button.

   

3. Click on the Live Preview button in the top right corner of the editor.

   

4. This is how you can work with the Live Preview.

   

The post How to Preview your Code in Visual Studio Code appeared first on Coding Campus.

But, when we include code snippets in the documentation for a presentation, it is desirable to remove the references as it makes our code look cleaner. This guide will show how to quickly remove references in VS Code. Follow these steps:

1. From the file menu, select Preferences. Then, from the sub-menu, select Settings.

   

2. Under Text-Editor, select the Diff Editor option. Then, uncheck Code Lens.

   

   Disabling Code Lens will remove references from your code file.

The post How to Remove References in Visual Studio Code appeared first on Coding Campus.

Opening EXE files in VS Code

To open an EXE file for an existing project, do the following:

1. In VS Code, select the Open File option from the “File” menu. Alternatively, press Ctrl + O in Windows/Linux or Cmd + O in Mac OS

   

2. In the “Open File” dialogue box, navigate to your .exe file, select it, and click on the Open button

   

3. When prompted with the following error, select the Open Anyway button.

   

4. A palette will open in the center of the VS Code to choose the editor. Choose the Text Editor option. It will open the .exe file in text format.

   

Running EXE files in VS Code

To run an EXE file inside VS Code, do the following:

1. Open the Extensions view or press Ctrl + Shift + X in Windows or Shift + Cmd + X in Mac OS. Inside the search bar, type “exe runner”.

   

2. Select the extension and click on Install.

   

3. Right-click inside the code editor and select the Run Executable. Alternatively, you can press the Run Executable button on the top-right corner. It will run the .exe file in the VS Code terminal.

   

The post How to Open .exe Files in Visual Studio Code appeared first on Coding Campus.

Follow these steps:

1. Open Recycle Bin from your local computer.
2. Find or navigate to the deleted file.
3. Right-click on the file and click on the Restore option.

   

The deleted files will be automatically restored in the VS code.

The post How to Recover Deleted Files in Visual Studio Code appeared first on Coding Campus.

Installations

Node Package Manager(NPM)

With NPM, you can install libraries, packages, and applications, along with their dependencies. You’ll need NPM to install all the libraries for Angular. You can install NPM by installing Node from nodejs.org. The NPM package manager comes bundled with it.

Angular CLI

The Agular CLI is a command-line interface that you can use to create a new project, generate code, execute your application, deploy to production and much more. To install Angular CLI, follow the below steps:

1. Open the command line in your respective operating system:
   –Command Prompt on Windows and Linux
   –Terminal on Mac OS
2. Execute the following command:

   npm install -g @angular/cli

   

Steps to create Angular Project in Visual Studio Code

Creating New Project

1. Inside the Command Line, type and execute the following command:

   ng new angular-example

   

2. When prompted with the question – “Would you like to add Angular routing?” Type Y and hit Enter.

   

3. When prompted with the question – “Which StyleSheet format would you like to use?” Select LESS by down-arrow keys and hit Enter.

   

The above command will create a folder or project named “angular-example” on the Desktop.

Opening The Project

Now that we’ve created the project let us open it in the VS Code. Follow the steps below:

1. From the sidebar, select the Explorer tab or press Ctrl + Shift + E. Click on the Open Folder button.

   

2. Select the folder which we just created. Here, I will choose “angular example.” Then, click on Select Folder.

   

3. Here’s the project the CLI created for us. You’ll notice that it has created a number of files, including the app folder. This is where you’ll do most of your coding on the Angular project.

   

Running The Project

Do the following to run the project:

1. From the top-level View menu, choose the Terminal option.

   

2. Inside the terminal, type and run the following code:

   npm start

   

3. The CLI then builds the application, starts a web server, and opens the URL in the default browser, as shown in the image below:

   

Debugging Angular

Follow the steps below to debug the Angular project:

1. From the sidebar, click on the Run and Debug tab and select the create a launch.json file option.

   

2. When prompted to choose the environment, select the Chrome option.

   

3. Change the local host from 8080 to 4200 and save the file by pressing Ctrl + S.

   

4. Open any file from your project and add a breakpoint by left-clicking in the Editor Margin or pressing F9 on the current line. Breakpoints have red-filled circles.

   

5. Inside the “Run and Debug” panel, click on the play button.

   

6. The debugging session will start. VS Code will switch views to open a new browser window. You’ll notice the debugger hitting your breakpoint.

The post How to Set Up Angular in Visual Studio Code appeared first on Coding Campus.

Step 1: Download Fira Code

Go to fonts.google.com/specimen/Fira+Code and click on the Download Family button. It will download a zip file into your system.

Step 2: Install Fira Code

To install Fira Code, do the following:

1. Double-click on the downloaded zip file to unzip it.
   Note: You can download and install WinRar from win-rar.com

   

2. Double-click on the file with .ttf extension.

   

3. Click on the Install button. It will install the font in your system.

   

Step 3: Using Fira Code in VS Code

To make Fira Code your default font in VS Code, follow the below steps:

1. From the top-level File menu, select the Preferences option. From the sub-menu, choose the Settings option. Alternatively, you can press Ctrl + ,

   

2. In the search bar, type font.

   

3. Type Fira Code inside the Editor: Font Family textbox.

   

4. Restart VS Code. Now you can use Fira Code in VS Code.

The post How to Install Fira Code in Visual Studio Code appeared first on Coding Campus.

What is VSIX?

VSIX stands for Visual Studio Extension. A VSIX file contains one or more Visual Studio extensions. VSIX files contain package descriptions, binaries, and other resources that make up the extension.

Installing VSIX

Follow the steps below to install a .vsix file in VS Code:

1. Go to marketplace.visualstudio.com and download the extension by clicking the Download Extension button. Here, I am downloading the Prettier extension.

   

2. From the sidebar in VS Code, open the Extensions tab.

   

3. Inside the “Extensions” panel, click on the Overflow button with the ellipsis icon and select Install from VSIX.

   

4. Go to the path where you downloaded the VSIX file. Select the file and click on Install.

   

5. You’ll be prompted with a successful installation message on the bottom-right corner.

   

The post How to Install .VSIX Extensions in Visual Studio Code appeared first on Coding Campus.

Installing PyAudio using the pip command

In this method, we run two pip commands in the command line to install PyAudio. Do the following:

1. Open the command line in your respective operating system:
   –Command Prompt on Windows and Linux
   –Terminal on Mac OS.
2. Run the following two commands:

   pip install pipwin

   pipwin install pyaudio

   

3. To check if the installation is successful, open the terminal in VS Code.

   

4. Run the following command in the terminal:

   pip install PyAudio

   

5. The installation is successful if the output shows “Requirement already satisfied”

   

Installing PyAudio using wheel

Wheel is a python package or library which contains the PyAudio module. Follow the steps below to install PyAudio using wheel:

1. Firstly, check the version of python installed in your system. To do that, run the following command in the command line:

   python

   

2. Head over to this website: lfd.uci.edu/~gohlke/pythonlibs/#pyaudio
3. Press Ctrl + F to open the search bar and type “PyAudio”. Download the correct version of the Python wheel according to the python version and python architecture highlighted in the above image. Here I will choose 3.10 and 64 bit.

   

4. Right-click on the downloaded file and select the Properties option.

   

5. Select the location and press Ctrl + C to copy.

   

6. Open the command line and type “pip install”. Then, paste the copied path followed by the downloaded file’s name. This is what the command looks like according to my system:

   pip install C:UsersgauraDownloadsPyAudio-0.2.11-cp310-cp310-win_amd64.whl

   

7. To check if the installation is successful, open the terminal in VS Code.

   

8. Run the following command in the terminal:

   pip install PyAudio

   

9. The installation is successful if the output shows “Requirement already satisfied”

   

The post How to Install PyAudio in Visual Studio Code appeared first on Coding Campus.

Method #1: Enable auto-indent in Settings

1. From the top-level “File” menu, select Preferences. From the sub-menu, choose Settings. Alternatively, you can just press Ctrl + ,

   

2. In the search bar, type “indent”.

   

3. Choose the option full from the “Editor: Auto Indent” drop-down.

   

4. Auto-indentation is now enabled. VS Code will now automatically indent code when you type, paste or move your code.

Methods #2: Enable auto-indent on Save

Visual Studio Code has built-in support for automatic formatting (including indentation) upon saving the document. We have written a guide on enabling VS Code auto-formatting here.

The post How to enable auto indent in VS Code appeared first on Coding Campus.

Align code with Keyboard shortcuts

Code Alignment is available in Visual Studio Code through the following shortcuts or key combinations:

1. Open the file you want to align. You’ll notice that I have an unaligned code.

   

   Select the code you want to align and use the following shortcut:
   On Windows: Shift + Alt + F
   On macOS: Shift + Option + F
   On Linux: Ctrl + Shift + I

   

The post How to Align Code in Visual Studio Code appeared first on Coding Campus.