web-dev-qa-db-ja.com

* .vueファイル、Visual Studio 2017、TypeScript

HTML、TypeScript、SCSSのハイライトとインテリセンスサポートを使用して、Visual Studio 2017で vuejs の* .vueコンポーネントファイルを編集することは可能ですか？

現時点では、さまざまなセクションをさまざまなファイルに分けています。

<!-- 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>
vue.jsvuejs2visual-studio-2017
8
Dror Weiss

現在、答えはノーです。 HTMLエディターは、CSS、JavaScript、Razor（ASP.NET）など、ホストできるいくつかの言語を認識しています。このような場合、エディターはテキストのセクションを各言語サービスにマップするためにいくつかの凝ったことをします。ただし、TypeScriptとSCSSは現時点ではサポートしておらず、私が知る限り、どちらのチームのバックログにも含まれていません。

VSフィードバックツールを使用してこれをリクエストしてください。 vuejsはこれをサポートしているため、ある程度の重みがあり、将来の機能計画で考慮される可能性があります。顧客レポートは、私のものよりも重要な場合があります。

（完全な開示：私はVSでHTMLおよびSCSSエディターを所有するチームで働いています。私たちはTypeScriptを所有していませんが、このようなことについてチームと協力しています。）

4
Jimmy

しばらくして、実際にすべてVisual Studio 2017でセットアップしました。（scssを除くすべて）

これが私がしたことです：

  1. インストールvue-cli

  2. インストールVuePack -- https://marketplace.visualstudio.com/items?itemName=MadsKristensen.VuejsPack-18329

  3. コマンドプロンプトでこの行を実行します：dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

  4. コマンドプロンプトで、アプリケーションを作成するディレクトリに移動し、次のコマンドを実行します。

    dotnet new vue

    npm install

    これにより、プロジェクトが作成されます。これで、Visual Studio2017でプロジェクトを開いたりプロジェクトを追加したりできます。

    ただし、コンパイラは.vueファイルを認識しませんでした。もう1つの手動ステップを追加する必要がありました。

  5. アプリケーションのルートにファイルwebpack.config.jsがあり、モジュール=>ルールを探します。新しいルールを追加する必要があります。

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

  6. この後、いくつかのTypeScriptコンパイルエラーが発生しました-アプリケーションはLoading...でスタックします-これを修正するには、tsconfig.jsonを編集する必要があります-以下を追加します。

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

この後、私は問題なくプロジェクトを実行しました。

あなたを助けることができる他の興味深いリソース：

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/

8
Simcha Khabinsky

同じ問題に直面していました。最終的にVueファイル用のVisual Studio Codeエディターを使用し、という名前のこのプラグインをインストールしました。 ）Vetur： https://github.com/vuejs/vetur
Visual StudioCodeのサイドメニューにある拡張機能を検索してインストールできます。

2
hamzox

Microsoftは、.vueファイル内のTypeScriptがVisual Studio 2017でサポートされていると主張しています： https://developercommunity.visualstudio.com/idea/351510/support-vue-file-intellisense-in-visual-studio.html

実際、私はそれを試しましたが、（ファイルをリロードした後）htmlコードとTypeScriptの構文の強調表示、およびインテリセンスは正常に機能します。コンパイラに.jsファイルを生成するように説得する方法をまだ理解しようとしています...

0
nazgul

VuePackと呼ばれるVisualStudio用のVueプラグインがあり、単一ページの開発エクスペリエンスが向上しますvueファイル "* .vue"は次の場所にあります：- https://marketplace.visualstudio.com/items?itemName=MadsKristensen.VuejsPack-18329

0
KVigor

Djangoテンプレート拡張機能を使用してvsコードで開きます。動作しているようです。別の言語であることはわかっていますが、リンティングと自動フォーマットで動作します。

0
Ahmed Fouad