タグ: カスタマイズ

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のカラースキーム適用させる

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


Coda2のコードヒントをカスタマイズしてみる

Coda2

例えばcssのborderをショートハンドで書く時
うちは[太さ、種類、色]の順番で記述してます
例えばこんな感じ

でもってcoda2でborderを記述しようとすると
過剰なコードヒントのせいで、solidの前にsilverが来てしまい非常にウザいです。

[image]使わないよ

Dreamweaverの「widthを入力したいのにwidowsが上に来てしまう」あれと一緒。

DreamweaverはCodeHints.xmlを編集すればどうにかなったけど

Coda2はどこをいじるのだろう?と探して見つけたのが
[text]/Applications/Coda2.app/Contents/Resourcesの中のCSS.mode[/text]

これを
[text]~/Library/Application Support/Coda 2/Modes/[/text]の中に複製して
CSS.modeを右クリック>パッケージの内容を表示の先にある
CodaCompletion.plistを編集
[text]~/Library/Application Support/Coda 2/Modes/CSS.mode/Contents/Resources/CodaCompletion.plist[/text]

手元のファイルだと13248行目から13251行目のsliverの記述をコメントアウトして保存、coda2を再起動
そうするとborderのコードヒントからはsilverが消える。

[image]消えた

並び順をコントロールしたいけど出来ない…

.modeファイルの中の登場順で表示されるわけではないようなので
コードヒントの順番を任意で入れ替える事が出来ない。

例えばpositionって入力したくてすると
poまで書くと
pointer-eventsが先に来るんだけど
CSS.modeのpointer-eventsとpositionを入れ替えても
pointer-eventsの方が上にきちゃう。
残念。

というわけで順番までコントロールする方法を知ってる人は教えてくださいな