ワイヤード・パンチ

サイトタイトル変えたい…。もうメカメカしいの関係なくなった…。

VSCode 1.28.1以降でEmmetの展開コマンドが効かないときの対処法。

2018年10月16日

Adobe Bracketsが1.8以降、IMEの予測変換の位置がずれるバグが起きるようになり、いまだに直らないので、移行先のテキストエディタとして使ってきた、Visual Studio Code。

しかしそのVSCodeも最近になって配信されたバージョン1.28.1にて、作業に支障を来たすほどのバグが発生するようになってしまいました。

Emmetの展開コマンドを実行してもなぜか何も起こらず、これでは作業がままなりません。

広告

Emmetのバグについて。

短縮ワードを入れてコマンドを実行することで、正式な入力値に自動変換してくれるEmmet。

コーディングするうえでは欠かせない存在となっているでしょう。

そのEmmetが、VSCodeには標準搭載されています。

Bracketsでは拡張機能でしたが、VSCodeでは拡張機能を入れずにEmmetを使用できます。

それはさておき、最初に貼った写真ように、sassファイルを編集中に「mb0」と入力し、Emmetのコマンドを実行して「margin-bottom: 0」に変換しようとしました。

しかし、いくらコマンドを入力しても、Emmetによる展開を実行することができません。

mb0に限らず他の値でも、というか何を入れてもまったく展開できません。

なお、Emmetのデフォルトの展開コマンドは非常にやりにくいので、当環境の場合は「Ctrl+E」で実行するようにしています。

それが影響しているのかどうかは調べていないのでわかりませんが、仮にもとのコマンドで展開できるようになったとしても、そんな打ちづらいコマンドでは作業がままなりません。

やはり今のコマンドで展開してくれないと困ります。

念の為キーボードショートカットの一覧を確認してみましたが、Ctrl+Eに別のコマンドが重複しているわけではありませんでした。

対処法。

Emmet keybind not working · Issue #61568 · Microsoft/vscode

Emmetの問題についてGithubでissueを投稿したところ、解決方法をいただくことができました。

まずは「ファイル」→「基本設定」→「キーボードショートカット」に進みます。

高度なカスタマイズを行うには、次を開いて編集: keybindings.jsonと書かれている一文の、ファイル名の部分をクリックします。

すると、ペインが二分割され、左ペインにはデフォルトのキーバインド、右にはカスタマイズしたキーバインドが記載されたjsonファイルが開かれます。

そして今回、Emmetの展開コマンドをCtrl+Eに変えるために入力した行があります。

{
	"key": "ctrl+e",
	"command": "editor.emmet.action.expandAbbreviation",
	"when": "config.emmet.triggerExpansionOnTab && editorTextFocus && !editorReadonly && !editorTabMovesFocus"
},

上のテキストから、「config.emmet.triggerExpansionOnTab」を取り除きます。

{
	"key": "ctrl+e",
	"command": "editor.emmet.action.expandAbbreviation",
	"when": "editorTextFocus && !editorReadonly && !editorTabMovesFocus"
},

これで、バージョン1.28.1以降でも、Ctrl+EによるEmmet展開が、無事に行われるようになりました。

追記。(2019/1/6)

バージョンを上げてから本記事の現象が起きたので、以前は本記事にダウングレードについてのトラブルも記載していました。

ダウングレードしたあと、自動更新を無効にしていても、勝手にアップグレードされるというものです。

ただ、Emmetバグの対処法がわかったため、ダウングレードおよび自動更新の無効方法を探すことは不要になりました。

よって、記事タイトルを変更し、該当箇所は読むうえでのジャマになるので削除いたしました。

VSCodeに関する商品探してたら、ぜんぜん違うものが出たけど、絵が気になったので。