Setup Visual Studio Code for debugging an Electron application with the Vue CLI Service

If you have created a project for an Electron application using the Vue CLI, it is not possible to debug the application with Visual Studio Code (e.g. with breakpoints) right out of the box.

This article builds on the article Create an Electron application with Vue and Vuetify. Please read the article first if you have never set up a project for an Electron application with Vue CLI before.

We can build the application for any platform (Windows, MacOS or Linux) with the following command:

npm run electron:build

After the command has finished, we will have an executable Electron application in the subfolder dist_electron/.

Also we can run the following command:

npm run electron:serve

This command will run the Electron application as a development server and we can debug it directly in the Electron application using the built-in developer tools.

This will work for most of the time, but in the long run an application grows, functions and processes become more complicated. In the end, output on the console will no longer suffice.

But for illustration we will prepare a simple example with an output to the console and afterwards debug it with the Visual Studio Code.

Debug with console.log(…)

This is one of the most common techniques and in most cases I can only advise against it. For a quick test, you can write some output to the console, but the danger is that you will forget to remove the output when you don’t need it anymore.

We modify the HelloWorld component (HelloWorld.vue ) a little bit. First we add a simple function to open a URL in a new window. Additionally we write the URL to the console.

Image for post

In the template section we update one of the v-for loops by using a click event instead of a href, which should call our method with the corresponding URL.

Image for post

change href to click-event

#typescript #nodejs #vuejs #vscode #debugging

What is GEEK

Buddha Community

Setup Visual Studio Code for debugging an Electron application with the Vue CLI Service

COMO USAR e trabalhar com Code Review no Visual Studio Code

Não é todo programador que gosta de compartilhar o seu trabalho ou até mesmo receber feedbacks de como o seu código foi escrito, mas o Code Review é cada vez mais comum em empresas do mundo todo.

Conheça uma extensão para Visual Studio Code e comece a trabalhar com Code Review em seu próximo projeto. Essa é a sua chance de saber COMO USAR e trabalhar com Code Review no Visual Studio Code.

#visual studio code #code review #visual studio #code

Brain  Crist

Brain Crist

1596975120

Writing Visual Studio Extensions with Mads - Episode 1: Item Templates

Join Mads Kristensen from the Visual Studio team each week as he builds extensions for Visual Studio live!

#visual studio code #visual studio #code #microsoft #visual studio extensions

Brain  Crist

Brain Crist

1597032000

User Snippets (Code Shortcuts) in Visual Studio Code

Hello, my friends and fellow developers, this video is all about User Snippets. That means the Snippets (Code Shortcuts) that you can make for yourself. It is a really amazing feature. I hope you like this video

Let me know in the comments below if you want more Visual Studio Code videos or any other videos. And like the video, if you like it.

#visual studio code #visual studio #code

Setup Visual Studio Code for debugging an Electron application with the Vue CLI Service

If you have created a project for an Electron application using the Vue CLI, it is not possible to debug the application with Visual Studio Code (e.g. with breakpoints) right out of the box.

This article builds on the article Create an Electron application with Vue and Vuetify. Please read the article first if you have never set up a project for an Electron application with Vue CLI before.

We can build the application for any platform (Windows, MacOS or Linux) with the following command:

npm run electron:build

After the command has finished, we will have an executable Electron application in the subfolder dist_electron/.

Also we can run the following command:

npm run electron:serve

This command will run the Electron application as a development server and we can debug it directly in the Electron application using the built-in developer tools.

This will work for most of the time, but in the long run an application grows, functions and processes become more complicated. In the end, output on the console will no longer suffice.

But for illustration we will prepare a simple example with an output to the console and afterwards debug it with the Visual Studio Code.

Debug with console.log(…)

This is one of the most common techniques and in most cases I can only advise against it. For a quick test, you can write some output to the console, but the danger is that you will forget to remove the output when you don’t need it anymore.

We modify the HelloWorld component (HelloWorld.vue ) a little bit. First we add a simple function to open a URL in a new window. Additionally we write the URL to the console.

Image for post

In the template section we update one of the v-for loops by using a click event instead of a href, which should call our method with the corresponding URL.

Image for post

change href to click-event

#typescript #nodejs #vuejs #vscode #debugging

Sadie  Cassin

Sadie Cassin

1598109060

How to Develop an ASP.NET Core Application Using Visual Studio Code

Visual Studio Code (VS Code) is a free, cross-platform, and lightweight source-code editor developed by Microsoft for Windows, Linux, and Mac operating systems. It is a source-code editor while Visual Studio is an IDE (integrated development environment). VS Code supports development operations such as debugging, task running, and version control, like Visual Studio.

In this blog, we will learn about developing, debugging, testing, and deploying ASP.NET Core applications using Visual Studio Code.

Prerequisites

The following packages should be installed in your machine:

Install essential plugins

  1. Install the C## extensions, which are required for development of ASP.NET Core applications. To open the list of extensions, please select the extensions icon on the left side of menu or use the Ctrl + Shift + X shortcut key. Refer to the following screenshot.
  2. Install C## Extensions
  3. Then, install the NuGet Gallery extension to add and update NuGet packages in the VS Code.
  4. Install the NuGet Gallery Extension

#asp.net core #visual studio code #web #productivity #visual studio #vs code #web development