0

vue.jsの学習をしております。VS Codeの拡張機能にVeturを入れたのですが、シンタックスハイライトがされません。環境はUbuntu Mate 19.10です。

VSIX(0.23.0)から直接インストールしても結果は変わりませんでした。
どうすればシンタックスハイライトがされるのかご教授願います。

veturの最新リリース

下記はソースファイルとなります。

practice.vue

new Vue({
  el: '#app',
  date: {

  }
})

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<div id="app">
  <p>OK!</p>
</div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="practice.vue"></script>
</body>
</html>
7
  • 2
    提示されているソースはいずれも拡張子.vueのSFCではないようにみえます……(もし,1つめのファイルがpractice.vueであるというならば,その拡張子は.jsが適切でしょう)
    – hinaloe
    2020年2月23日 4:36
  • 1
    スタック・オーバーフローはチャットではないため、時間に関する挨拶 (おはよう、こんばんは等) はリアルタイムに読まれるとは限らないことを考えると省略しても特に失礼とはなりません。
    – cubick
    2020年2月23日 4:40
  • 1
    なるほど、ファイル名が無いなと思っていたのですが、コードブロックの ``` の右に書かれていたのですね。ここはソースコードのハイライトを示すために使われる場所なので、今回の場合は html などと書くのが良いです。cubick さん編集ありがとうございます。
    – nekketsuuu
    2020年2月23日 10:07
  • 1
    @nekketsuuu コードブロックの ``` 横に「ファイル名」や「コードの1行目」、もしくは言語を指定してるけど大文字を使ってしまっているケースは結構見かけます。
    – cubick
    2020年2月23日 12:10
  • @hinaloe 拡張子は.jsが適切なのですね!ありがとうございます!早速試してみます(^^)
    – atago_IT
    2020年2月24日 10:20

1 件の回答 1

1

Vetur の FAQ に同様の項目があるのを見つけました:

No Syntax Highlighting & No Language Features working

The two possible causes are:

  1. Other extensions also contribute a Vue language, and that conflicts with Vetur.
  2. VS Code didn't install Vetur properly.

For 1, try disabling all other Vue related extensions.

For 2, try these methods:

和訳:よくある原因がふたつあります。

  1. 他の拡張機能も Vue 用の機能を提供していて、Vetur と干渉している。
  2. VS Code が Vetur をきちんとインストールできていない。

1 の場合、まずは他の拡張機能を無効にしてみてください。2の場合、次の手順を試してみてください。

  • Vetur の Developer: Reinstall Extension コマンドを実行して再インストールする。
  • 拡張機能一覧から Vetur を削除し、クリーンな状態から再びインストールする。
  • Windows の場合、削除&再インストールを管理者権限で実行してみる。
  • 上のどれも上手く動かなかった場合、vsix の最新版を vsix 経由でインストールする。

※既に vsix 経由でのインストールを試されたとのことですが、念のため回答として投稿してみます。

2
  • いつもご回答いただきありがとうございます! 拡張子を.jsにすることで解決とさせていただきます!
    – atago_IT
    2020年2月24日 10:25
  • 1
    @Yusuke_O_kaiy 解決してよかったです! もしそれで解決したのでしたら、こちらの回答とは別の内容となりますので、自己回答として別に回答を投稿し、そちらを(数時間待って)承認していただけないでしょうか。
    – nekketsuuu
    2020年2月24日 12:31

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。