*.vue files, Visual Studio 2017 & TypeScript

Question

Is it possible to edit vuejs's *.vue component files in Visual Studio 2017 with highlighting and intellisense support for HTML, TypeScript AND SCSS?

At the moment, I'm separating the different sections to different files:

<!-- my-component.vue opened in HTML editor -->
<template>
    <div> text </div>
</template>
<script src="./path/to/my-component.ts"></script>
<style src="./path/to/my-component.scss"></style>

Answer 1

After some time, I actually have it all set up in Visual Studio 2017. (Everything except scss)

Here is what I did:

1. Install vue-cli

2. Install VuePack - https://marketplace.visualstudio.com/items?itemName=MadsKristensen.VuejsPack-18329

3. Run this line in command prompt: dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

4. In command prompt, go to the directory where you want to create your application and run this:

   dotnet new vue

   npm install

   This will create the project for you. You can now open the project/add the project in Visual studio 2017.

   However the compiler did not recognize .vue files. I had to add one more manual step:

5. In the root of the application there is a file webpack.config.js, look for module => rules, you need to add a new rule:

   { test: /\.vue$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },

6. After this I ran into some TypeScript compilation errors - the application would just get stuck on Loading... - to fix this you need to edit tsconfig.json - add the following:

   "awesomeTypescriptLoaderOptions": { "useWebpackText": true, "useCache": true, "useTranspileModule": true }

After this I ran the project without issues.

---

Other interesting resources that can help you:

http://www.dotnetcurry.com/aspnet/1383/modern-web-dev-aspnet-core-webpack-vuejs

https://github.com/MarkPieszak/aspnetcore-Vue-starter

https://herringtondarkholme.github.io/2016/10/03/vue2-ts2/

Answer 2

Currently the answer is no. The HTML editor is aware of some languages that can be hosted, such as CSS, JavaScript, and Razor (ASP.NET). In these cases, the editor does some fancy things to map sections of the text to each language service. However, TypeScript and SCSS do not support that at the moment, and as far as I know it's not on the backlog for either team.

Please request this using the VS Feedback tool. Since vuejs support this, it bears some weight and may get taken into account for future feature planning. A customer report can sometimes carry more weight than mine.

(Full Disclosure: I work on the team that owns the HTML and SCSS editors in VS. We don't own TypeScript, but we work with the team for things like this.)