テキストエディターあれこれ【Emmet】

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


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

VScode_24

【Brackets】と同じ方法です。


VScode_25

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


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


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

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


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

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

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


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


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

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

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


VScode_30

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


びらっと。

VScode_31

おー!


「html」と打つと。

VScode_32

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


びら!

VScode_33

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

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


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


VScode_26

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


VScode_27

【html.json】を開きます。



VScode_28

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

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


VScode_29

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


VScode_34

私が書いたのは、こんな(一ヶ所記述ミスがありますね)!


VScode_35

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


展開!

VScode_36

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

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



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

VScode_37

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

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


VScode_38

無事、呼び出せる!


VScode_39

じゃん!!

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


これは、なんてすてき!

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


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



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




関連記事

コメント

非公開コメント

mayahuel

ブログ内検索

カレンダー

03 | 2024/04 | 05
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -

月別アーカイブ