【Vue + VSCode】折りたためない、Emmet 効かない現象
なぜか最近 VSCode で Vue の開発を行ってる際コードが折りたためない現象と Emmet のインテリセンスが効かなくなった事があったのでその際の解決方法の備忘録を書いておきます。
コードの折り畳みができない問題
折りたたみと言っているのは下記の矢印マークを押してコードを省略状態にする事です。何故か急にこの矢印が動かなくなりました。
解決方法はこちらに記載されていました。
Mac なら「 ⌘ + , 」 で開ける設定で画面上部の検索欄に「editor.foldingStrategy」と入力。
下記画像のように折りたたみ方法を indentation に設定、これで無事折りたたみがまた使えるようになりました。
正直なぜ急にできなくなったか分からないです。。。設定をいじった覚えもないので。
Emmet のインテリセンスが効かない
Emmet ですが HTML/CSS などのコード入力をインテリセンスによって補助してくれて今まで Vue のテンプレートでも使用できていたのですが、これも何故か急に使えなくなる事がありました。
調べてみるとこちらも git hub に issue として起票されていました。(Emmet doesn’t work in Vue)
先ほどと同じようにこちらも VSCode の設定のページで emmet.includeLanguages と検索してください。
すると下記のような項目追加の欄が出てくるので画像と同じく項目の列に vue 値の列に html と入力してください。これでインテリセンスが動くようになりました。
ファイルの種類毎に設定を追加する必要があったようです。
しかしこれも元々特に設定ぜずとも動いていたので何故今回こちらが必要になったかはよく分からず・・・ただまあ今まで通り使えるようになったので良しとします。
参考書籍
Vue3 を本で勉強したい方はこちらを参考にしてください。 ３ になるとまだあまり種類は出ていない様です。
その他基礎から体系的に勉強したい方はこちらも。
