Applies to: Visual Studio Visual Studio for Mac
In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you create and run a simple Vue.js frontend web application.
Make sure to have the following installed:
- Adding the right VS Code Extensions to Visual Studio can make your life as a developer so much easier.
- They can help with formatting, scalability, enforcing best practices, and so automate so many of the forgettable tasks in our dev process.
- They can also just be fun extensions that make our code look prettier / easier to write.
- As a Vue enthusiast, I’ve spent time looking for the best VS Code Extensions for Vue developers.
Create your app
Here are some of the ones that have made my life so much simpler.
Let’s jump right in. If you download one VS Code extension from this list, it has to be Vetur. A Vue tooling kit for VS Code – it provides Vue specific syntax highlighting, snippets for common snippets, and so much more that every Vue developer needs.
Vetur is very well maintained – it even comes with Vue3 Typescript support.
Set the project properties
There’s not really too much else to say about Vetur – just get it. It’ll make your development so much better.
Most developers are familiar with ESLint – one of the most popular linter tools that helps keep your code consistent with best practices and readable across large codebases.
Build Your Project
Choose Build > Build Solution to build the project.
Start Your Project
Press F5 or select the Start button at the top of the window, and you'll see a command prompt:
VueJS has its own ESLint Plugin to check the syntax of single file components.
I think it’s one of the best tools for writing maintainable and scalable code.
There’s nothing worse than looking at some old code and not even knowing where to start debugging it.
Next, you should see the base Vue.js app appear!
For ASP.NET Core integration: