【Visual Studio Code】の設定もいじってみましょう！


こちらも、デフォルトにユーザー設定を上書き。



【Brackets】と同じ方法です。




フォントをヒラギノにして、テキストの折り返しを有効にしました。


私が新しいエディターにして使いたかったのは【Emmet】。


【Emmet】は、みなさんご存知！ コード入力支援のプラグイン。
【Visual Studio Code】には、実装されています。

決まりにのっとって入力すると、コードを展開してくれるっていう。
とーってもありがたいプラグイン。


今、ひまを見ては、チートシート を読んでます。

全部覚えるのは到底無理だけど、
記述のルールなら大丈夫そう・・・たぶん！

習熟できたかどうかは、実践時にご期待です！！


では・・・すぐできること。
スニペットを上書きして、カスタマイズしてみましょう！


コーディングの最初。 やっぱり面倒なのは、
DOCTYPE宣言と head 内の記述。

でも、DOCTYPE宣言は、html5 で簡単になりましたよねー。

xhtml の時なんてほんと、コピペ。
自分で打ったことなんて皆無です。




デフォルトのテンプレートは、宣言冒頭の文字「!」で。


びらっと。



おー！


「html」と打つと。



【Simple HTML5】というのがありました。


びら！



こっちは、言語指定なし。
でも「rink」と「script」の雛形が！

このあたりを直してもいいけど、やっぱり自分好みにしたい。


記述はネットからいろいろ参考させていただき、
自分がわかりやすい方法をとっています。
参考にさせていただいたみなさま。
ありがとうございました。




基本設定・ユーザースニペットから。




【html.json】を開きます。





これは css だけど、同じメッセージが書かれています。

ここにこう書けってことと、カーソル位置指定の説明です。




だいたいの意味はこんな。




私が書いたのは、こんな（一ヶ所記述ミスがありますね）！




「prefix」 につけた名前で呼び出して。


展開！



おー！！ なんか感激！
プログラムしてるみたいな気分になれちゃう（ド素人な感想）！

css ・ javascript と、どうせ使うから jquery へのリンクをつけました。



ミスした記述を直しつつ、複数書く練習。



最初、カンマを忘れて怒られた！

ちなみに、インデントをタブ下げにしています。
スペース4つ分の設定だから、改行コードの後にスペース4つです。




無事、呼び出せる！




じゃん！！

言語指定があるやつとないやつです。


これは、なんてすてき！

いつも使う css とか、雛形として登録しちゃえばいいんだ！！


このレベルの記述だったら、
私が適当にやってもできちゃうくらい簡単なのでした。



もっと早く、【Emmet】が使えるエディターにしておけばよかったな。

関連記事

• リニューアルしなければ！vol.01 【一ヶ月間】
• テキストエディターあれこれ【Emmet】
• テキストエディターあれこれ【Brackets】