キーバインドを変えただけではダメ？
Visual Studio Code(以下VSCode)では、emmetの展開コマンドがデフォルトではtabキーに設定されています。
ただ、はるか昔から別のテキストエディタでemmetを使ってきた身からすると、tabよりCtrl+Eの方が馴染み深いはず。
よって、キーボード ショートカットの画面から、コマンドをtabからCtrl+Eに変更したのですが、なぜかコマンドを押しても全く反応せず…。
(今回はバージョン 1.51.1 における話です。)
追加の設定が必要。
キーボード ショートカットを変更したあと、設定画面にて下記の設定も必要です。
検索窓に該当の項目名を入れると手っ取り早いです。
Emmet: Trigger Expansion On Tab
チェックをONにします。
Emmet: Show Expanded Abbreviation
Neverに変更します。
これで、emmet用の省略記法を入力したあとにCtrl+Eを押せば、無事に展開されるはずです。
sassで変換できない場合の対処法。
いわゆるSASSですが、拡張子scssならばとくに問題なく展開できるのに、なぜか拡張子sassだと展開できない場面がありました。
scssよりsassの方が、カッコもセミコロンも不要で楽なのに、scssに乗り換えたくはない…。
展開ができない原因としては、emmetを実行しようとしている行よりも前に、閉じタグがない複数行コメントアウトが存在していることでした。
閉じタグがなくても文字の色がおかしくなったりはしないのですが、コメントアウトにしっかり閉じタグを付けてあげることで、無事にsassでもemmetができるようになりました。
なお、コメントアウトの開始タグと閉じタグのインデントが揃っておらず、閉じタグだけ1段多い理由ですが、当環境ではpropresを使ってsassからcssに変換をかけています。
しかしそのpreprosだと、コメントアウトに閉じタグをつけた場合、1段空けておかないとcss変換時にエラーになってしまうためです。
