スキップしてメイン コンテンツに移動

zencoding.vimで、10倍速くHTMLを書く

ここ数日、Zen-CodingがLDCに上がってたので興味を持っていたのですが、手を出す事が出来ませんでした。
(環境構築とか面倒くさそうだったのでw)
ところが、mattnさんが、pure vim-scriptでZen-Codingを作成してたので、Vimmerな僕はさっそく導入してみました。

導入方法です。
3ステップで導入出来ます。

1.こちらからzencoding.vimをダウンロードします。
(僕のVim環境(Kaoriya版7.2.261)は若干古かったらしいので、Ver0.21を落としました)
2.vimをインストールしてあるディレクトリ/runtime/pluginにzencoding.vimをコピーする
3._vimrcに以下を追加
let g:user_zen_expandabbr_key = '<c-e>'


これで導入終了。

さあ、HTMLを構築しましょう。

html:5

と入力し、挿入モードのまま<c-e>を押すと……


<!DOCTYPE HTML>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>

</body>
</html>


はい。一瞬で出ます。
素晴らしい。
あと、例えば


<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>


みたいなコードも


#header+#content+#footer


と入力してから、<c-e>一発で作れるようになります。
これは気持ち良い!!
慣れれば今までの10倍速くHTMLを書けること間違いなしです。
VimユーザでWeb開発な人は是非zencoding.vimの導入をしてみましょう。

以上です

コメント

このブログの人気の投稿

ダイエット途中経過報告

2020年も残り2週間 2020年も残り2週間となった。 今年は、コロナウイルスによって様々な生活の変更を強いられた年でもあった。 そして自分の勤務形態も大幅に変わった。 もともと、たまにリモートワークみたいな感じをしていたが、今年からはフルリモートワークが出来るようになった。 ありがたい限りである。取引先の方々に無理を言ってしまった部分もあるが、現状うまく回っている。 フルリモートワークになって、大きく変わった事といえば、やはり通勤をしなくなった事で、歩数が大幅に減少したという事だろうか。 具体的には、昨年は1日平均5,000歩くらい歩いていたが、今年は2,000歩前後にまで下がってしまった。 基本家に引きこもっているので、実際に歩いている距離などはかなり少ないと言っても過言ではない。 この運動不足がたたり、一時的にであるが体重が+3kgも増えてしまいヤバい事になった。 ので、自分の体重管理として、今までは3,000円くらいで買った安い体重計を使っていたが、体組成計を購入して毎日チェックするようにした。 おかげさまで、とりあえずは元の体重に戻すことが出来たが、せっかくなのでという事で、ダイエットにも励んでいる。 あすけん というアプリでレコーディングダイエットをしつつ、 リングフィットアドベンチャー で身体を鍛えている。現状は、最高時から-5kgという事で、トータルで見ると-2kgという所であるが、徐々に痩せつつある。 とはいえ、目標としては全然減りが足りないので、これからも運動と食事バランスを考えつつ体重を落としていきたい。 美味しいものを食べつつ、体重も落としつつとかなり矛盾に満ちたことをやろうとしているが、やってやれない事はないと自分に言い聞かせながらやっている。 継続してダイエットをやってみて分かった事は、自分の食生活は、脂質をかなり多く摂る傾向にあったので、それを減らしたは良いが、今度は塩分が増えてしまい、それを減らすのもまた苦労している。和食は、案外塩分が多い食事である。 あすけんは、どんな栄養分を摂っているのかざっくり見ることが出来るので、不足している栄養素を満遍なく把握できるというのは大きい。 さて、来年の今頃はどこまで体重が落ちているのか楽しみであるが、目標の-15kgを達成した暁にはまた記事を書こうと思う。

webpack4→webpack5をして、Module not found: Error: Can't resolveが出た場合、'html-loader'を削除しろ

webpack4→webpack5でハマった 久々のLooxUと初音ミクで行こう!の更新。皆様お久しぶりです。 今回は、webpack4からwebpack5へ移行した際にハマった出来事について記載したいと思います。 事象 Module not found: Error: Can't resolve '/manifest.json' エラーメッセージとしては、上記の様なメッセージが出ていました。 なんとなく、html-webpack-pluginで呼び出している箇所に問題がありそう。 しかし、その設定を見る限り特に変な書き方とかをしていなかったので、一体何が問題なのかしばらく分かりませんでした。 原因解明 html-webpack-pluginの templateのドキュメント を読んでいて、原因に気が付きました。 1) Don't set any loader これかー! webpack.config.jsに書いてあった、 module: { rules: [ { test: /\.html$/, loader: 'html-loader' }], }, この部分を無効化したら無事に解決しました。 いやあ、とんでもない所に落とし穴があるものです(笑)