You’re browsing the documentation for v2.x and earlier. For v3.x, click here.
- Visual Studio View Console
- Visual Studio Vue Support
- Visual Studio Vue Template
- Visual Studio View Encoding
Visual Studio View Console
When you save the file, Visual Studio adds the package under the Dependencies / npm node in Solution Explorer. If you don't see the node, right-click package.json and choose Restore Packages. In some scenarios, Solution Explorer may not show the correct status for installed npm packages. Visual Studio 2019 includes improved support for the Vue.js framework, which improves the development experience when creating an application with Vue. Extension for Visual Studio Code - Popular VS Code extensions for Vue.js development providing Syntax highlighting, Code format, Code snippets, IntelliSense, Linting support, npm & node tools. Vue.js Extension Pack - Visual Studio Marketplace. Visual Studio Tools Vue.js Pack 2019. Vue.js Pack 2019. Mads Kristensen 28,066 installs (4) Free. Contains HTML Intellisense and code snippets for the Vue.js JavaScript library. Overview Q & A Rating & Review. Extension for Visual Studio Code - Sort vue component.
Every application reaches a point where it’s necessary to understand failures, small to large. In this recipe, we explore a few workflows for VS Code users who would like to debug their application in the browser.
This recipe shows how to debug Vue CLI applications in VS Code as they run in the browser.
Note: This recipe covers Chrome and Firefox. If you know how to setup VS Code debugging with other browsers, please consider sharing your insights (see bottom of the page).
Prerequisites
Make sure you have VS Code and the browser of your choice installed, and the latest version of the corresponding Debugger extension installed and enabled:
Install and create a project with the vue-cli, following the instructions in the Vue CLI Guide. Change into the newly created application directory and open VS Code.
Displaying Source Code in the Browser
Before you can debug your Vue components from VS Code, you need to update the generated Webpack config to build sourcemaps. We do this so that our debugger has a way to map the code within a compressed file back to its position in the original file. This ensures that you can debug an application even after your assets have been optimized by Webpack.
If you use Vue CLI 2, set or update the devtool
property inside config/index.js
:
If you use Vue CLI 3, set or update the devtool
property inside vue.config.js
:
Launching the Application from VS Code
We’re assuming the port to be 8080
here. If it’s not the case (for instance, if 8080
has been taken and Vue CLI automatically picks another port for you), just modify the configuration accordingly.
Click on the Debugging icon in the Activity Bar to bring up the Debug view, then click on the gear icon to configure a launch.json file, selecting Chrome/Firefox: Launch as the environment. Replace content of the generated launch.json with the corresponding configuration:
Setting a Breakpoint
Set a breakpoint in src/components/HelloWorld.vue on
line 90
where thedata
function returns a string.Open your favorite terminal at the root folder and serve the app using Vue CLI:
Go to the Debug view, select the ‘vuejs: chrome/firefox’ configuration, then press F5 or click the green play button.
Your breakpoint should now be hit as a new browser instance opens
http://localhost:8080
.
Alternative Patterns
Vue Devtools
There are other methods of debugging, varying in complexity. The most popular and simple of which is to use the excellent Vue.js devtools for Chrome and for Firefox. Some of the benefits of working with the devtools are that they enable you to live-edit data properties and see the changes reflected immediately. The other major benefit is the ability to do time travel debugging for Vuex.
Please note that if the page uses a production/minified build of Vue.js (such as the standard link from a CDN), devtools inspection is disabled by default so the Vue pane won’t show up. If you switch to an unminified version, you may have to give the page a hard refresh to see them.
Simple Debugger Statement
The example above has a great workflow. However, there is an alternative option where you can use the native debugger statement directly in your code. If you choose to work this way, it’s important that you remember to remove the statements when you’re done.
Visual Studio Vue Support
Acknowledgements
This recipe was based on a contribution from Kenneth Auchenberg, available here.
Visual Studio Vue Template
Visual Studio View Encoding
Contains HTML Intellisense and code snippets for the Vue.js JavaScript library See the changelog for changes and roadmap. Features
Directives IntellisenseBuilt in directives are shown in Intellisense to make it easier to write an to avoid typos. Any directive or component defined in any .vue or .js file in the project will be show up in Intellisense. Built in directivesSpecial elementsCustom components/elementDirectivesCustom directivesFile iconSolution Explorer correctly displays a file icon for .vue files. JavaScript snippetsA few handy snippets are available to speed up boilerplating of vew models, filters and directives. vue (view model)vued (directive)vuef (filter)Here's what it looks like in the Code Snippets Manager. ContributeCheck out the contribution guidelines if you want to contribute to this project. For cloning and building this project yourself, make sure to install the Extensibility Tools 2015 extension for Visual Studio which enables some features used by this project. License |