Develop using Visual Studio

Lucy Bates
Develop using Visual Studio Background
c# dev
6 min read

A popular alternative development environment to our preferred JetBrains Rider IDE is to use Visual Studio, the primary issue with this is that VS Code is a better IDE with richer support for JavaScript and npm projects whilst Visual Studio is a better IDE for C# Projects.

Essentially this is why we recommend Rider where it's best at both, where both C# and JS/TypeScript projects can be developed from within the same solution.

Developing with just VS Code

If you prefer the dev UX of a lightweight text editor or your C# project isn't large, than VS Code on its own can provide a great development UX which is also what Vue recommends themselves, to be used together with the Volar extension.

VSCode's Integrated Terminal has great multi-terminal support you can toggle between the editor and terminal with Ctrl+ or open a new Terminal Window with Ctrl+Shift+` to run Tailwind with:

$ npm run ui:dev

Then in a new Terminal Window, start a new watched .NET App with:

$ dotnet watch

With both projects started you can open a browser tab running at https://localhost:5001 where it will automatically reload itself at every Ctrl+S save point.

Useful VS Code extensions

We recommend these extensions below to enhance the development experience of this template:

Using Visual Studio

As your C# project grows you'll want to consider running the back-end C# Solution with Visual Studio .NET with its much improved intelli-sense, navigation, tests runner & debug capabilities.

As we've never had a satisfactory experience trying develop npm or JS/TypeScript projects with VS.NET, we'd recommend only using VS.NET for C# and Razor and continuing to use VSCode for everything else.

If you'd prefer to use Visual Studio for front-end development we recommend moving all JS to external files for a better Dev UX, e.g:

<script type="module" src="/Pages/SignIn.mjs"></script>

Deploying to Production

This template also includes the necessary GitHub Actions to deploy this Apps production static assets to GitHub Pages CDN, for more info, checkout GitHub Actions Deployments.

Get Started

If you're new to Vue 3 a good place to start is Vue 3 Composition API.