Open VSCode from Visual Studio

How to open certain file types in VSCode from the Solution Explorer.

If you are a full-stack developer mainly working in Visual Studio, it may be tempting to edit frontend files within the same software. However, this can be counter productive - especially if the frontend codebase has linting.

Imagine having to go through each lint error and manually resolve them because the pull request pipeline failed with the message: ESLint found too many warnings. When you could’ve simply installed a few extensions in VSCode to automatically format the code changes to follow the specific coding standards that has been set.

From my research, there is no good linting or prettier plugins for formatting on save within Visual Studio. So for now, my solution is to recommend developers to open frontend files from VSCode - and there is a setting that helps us achieve this.

Once you open your repository in Visual Studio, locate file types you would like to always open with VSCode from the Solution Explorer. For my project, I selected 3 different file types: TypeScript (.ts), HTML (.html), and SCSS (.scss). For each file, right click and open the Open With... menu. From here, Add the VSCode executable, which is typically stored within the following path: C:\\Users\\{USER}\\AppData\\Local\\Programs\\Microsoft VS Code. Then use Set as Default button to open these file types in VSCode going forward.