How do I get .vue files to open in the HTML editor?

[dtsao]

Installed product versions

• Visual Studio: 2017 Pro
• Vue.js Pack 2017 1.1.8

Description

.vue files appear to be mapped to the XML editor instead of the HTML editor, based on the error messages

Steps to recreate

1. Create test project using: vue init webpack test-01
2. Open the test-01 folder using vs2017
3. Open the file src\App.vue
4. Intellisense gives errors like:
   Expecting end tag (for img tags)
   XML document cannot contain multiple root level elements (for script tags)

Current behavior

.vue files are opening in the XML editor

Expected behavior

.vue files should open in the HTML editor

More info about my VS2017 install:

Microsoft Visual Studio Professional 2017
Version 15.1 (26403.0) Release
VisualStudio.15.Release/15.1.0+26403.0
Microsoft .NET Framework
Version 4.6.01586

Installed Version: Professional

Visual Basic 2017 00369-60000-00001-AA213
Microsoft Visual Basic 2017

Visual C# 2017 00369-60000-00001-AA213
Microsoft Visual C# 2017

Application Insights Tools for Visual Studio Package 8.6.00209.10
Application Insights Tools for Visual Studio

ASP.NET and Web Tools 2017 15.0.30320.0
ASP.NET and Web Tools 2017

ASP.NET Web Frameworks and Tools 2017 5.2.50303.0
For additional information, visit https://www.asp.net/

Azure App Service Tools v3.0.0 15.0.30209.0
Azure App Service Tools v3.0.0

Common Azure Tools 1.9
Provides common services for use by Azure Mobile Services and Microsoft Azure Tools.

JavaScript Language Service 2.0
JavaScript Language Service

JavaScript Project System 2.0
JavaScript Project System

KofePackagePackage Extension 1.0
KofePackagePackage Visual Studio Extension Detailed Info

Microsoft MI-Based Debugger 1.0
Provides support for connecting Visual Studio to MI compatible debuggers

Node.js Tools 1.3.50316.00
Adds support for developing and debugging Node.js apps in Visual Studio

NuGet Package Manager 4.1.0
NuGet Package Manager in Visual Studio. For more information about NuGet, visit http://docs.nuget.org/.

SQL Server Data Tools 15.1.61702.140
Microsoft SQL Server Data Tools

TypeScript 2.1.5.0
TypeScript tools for Visual Studio

Vue.js Pack 2017 1.1.8
Contains HTML Intellisense and code snippets for the Vue.js JavaScript library

[AndyHsuTW]

Check the mapped editor of .vue file by following step:

1. Right click on .vue file, then click 'Open With...'
   

2. Make sure the default editor is HTML editor, set it to default if not by click the "Set as Default" button.
   

[BOT-Man-JL]

Andy's solution works for me! 🎉 ...while the extension not. 😞
My environment: VS 15.5.2, Extension 1.1.8

[zcharleshebert]

+1