タグ: codekit

Coda2でCodeKitのKit Languageを編集する際に、Emmetを有効にする方法。

今まで使ってこなかったんですが、CodeKitにはKit languageという簡易テンプレート機能があるみたいなんです。
https://incident57.com/codekit/help.html#kit

参考
CodeKitの新機能「Kit Language」(2012年12月19日)
CodeKitの隠れた秀才「Kit Language」で効率化を図る(2013年03月27日)
CodeKitのKit Language(2014年12月11日)
(随分昔からある機能なんだな…

if文は使えないけど変数は使えて
拡張子.kitの中に.kitファイル(.htmlも可)をimport(include)して保存すれば
合体した.htmlファイルを書き出してくれます。

使いこなせたら便利そうなんだけど、
困ったことに拡張子.kitのファイル中ではemmetがうまいこと展開されない( ´・_・`)

例えば

をexpand abbreviationすると

とならずに

となってしまい、このままでは使い物にならない。

.kitでもemmetを有効にする

わりと簡単に対応させられました。

を右クリックして[パッケージの内容を表示]

その中の

を開く

下の方に

を追加

snippets.json

これでおk

ul+を展開して動作確認してみよう。

ついでに.kitに.htmlのカラースキームを適用させる

こちらはcoda2の環境設定から[エディタ>カスタム言語モード]
.kitに.htmlのカラースキーム適用させる

テンプレ使えるようになると、作業ファイルが見やすくなっていいですな。


CodeKitを使ってみた

CodeKitなら、Autoprefixerを簡単に使えるようなので試してみることにした。

codekit

Autoprefixerは、Can I use…の結果を元にベンダープレフィックスを補ってくれる機能
display:flexみたいな仕様がころころ変わってきたプロパティを使う時など、とても便利。

例えば次の記述は

こんな風に変換される。

今まではgulpを使ってしていたんだけど
それだと、compass準備して、gulpインストールして、package.jsonを用意するか使いまわして、モジュールをインストールして、gulpfile.js書いて、、、とさっと始めるには労力がかかっていたけど
CodeKit2には基本機能としてAutoprefixerが組み込まれてるから、起動したらほぼいきなり書き始められるもんで超絶楽な予感。

ただcompassの追加プラグインなんてのはCodeKitからは追加できたりしないのかしら?
そうなると結局config.rbは自分で編集してターミナルも使う事になりそうだ。