inputがむき出しだったり、兄弟関係にないとだめって縛りがあるからいろいろやろうとしたら普通に使い勝手悪いですよねーって話。
web
vscodeの拡張Bookmarks
いやーこれ便利だなぁ、もっと早く知りたかった。
[追記 / 2018/10/05]
なんて事でしょうか
prettierなんかでコードフォーマットを掛かるとブックマーク行がついていって紅………に染まったこの俺をッ！！！
ファイル保存時に発動する自動フォーマットも駄目。
ああああ。。。。
Bookmarks – Visual Studio Marketplace
Available commands
使用可能なコマンド
Bookmarks: Toggle Mark/unmark positions with bookmarks
ブックマーク：ブックマークで位置をマーク/マーク解除する
opt + + cmd + K
Bookmarks: Toggle Labeled Mark labeled bookmarks
ブックマーク：ラベル付きのマーク付きのブックマークを切り替えます。
Bookmarks: Jump to Next Move the cursor forward, to the bookmark below
ブックマーク：次へ進むカーソルを下のブックマークに移動します。
opt + + cmd + L
Bookmarks: Jump to Previous Move the cursor backward, to the bookmark above
ブックマーク：ジャンプする前にカーソルを上のブックマークに移動
opt + + cmd + J
Bookmarks: List List all bookmarks in the current file
ブックマーク：リスト現在のファイル内のすべてのブックマークを一覧表示します。
Bookmarks: List from All Files List all bookmarks from all files
ブックマーク：すべてのファイルからのリストすべてのファイルからすべてのブックマークを一覧表示する
Bookmarks: Clear remove all bookmarks in the current file
ブックマーク：現在のファイル内のすべてのブックマークを消去する
Bookmarks: Clear from All Files remove all bookmarks from all files
ブックマーク：すべてのファイルからクリアすると、すべてのファイルからすべてのブックマークが削除されます。
Bookmarks (Selection): Select Lines Select all lines that contains bookmarks
ブックマーク（選択）：行の選択ブックマークを含むすべての行を選択する
Bookmarks (Selection): Expand Selection to Next Expand the selected text to the next bookmark
ブックマーク（選択）：選択範囲を次に展開選択したテキストを次のブックマークに展開する
shift + opt + L
Bookmarks (Selection): Expand Selection to Previous Expand the selected text to the previous bookmark
ブックマーク（選択）：選択範囲を前へ展開選択したテキストを前のブックマークに展開する
shift + opt + J
Bookmarks (Selection): Shrink Selection Shrink the select text to the Previous/Next bookmark
ブックマーク（選択）：選択範囲を縮小選択したテキストを「前へ/次へ」ブックマークに縮小します
shift + opt + K
サイドバーからパネル開くとこんな感じで表示される。
今更知るscssのソースマップの存在意義
チームで作業する場合、ソースマップ普通に便利かも。
てか必須かも。
いままでは
1）cssからscssを辿るのはそんなに大変でもない
2）もしSassファイル内での行番号を知りたい時は、ラインコメントを出力すればいい
みたいな感覚でいたんですけど
cssを見ればscssのどこか判ると言っても、20〜30を超える数の.scssを@importしたサイトになると流石に骨（心）が折れるし
ラインコメントなんてのは論外で、例えば改行の仕方が違う人がscssを編集するだけで
gitが反応しまくるので非常に面倒臭いってのが実際。
けれどもソースマップならば！
開発者ツールで直接scssのどこかに書いてあるのかが判るので、使わないより使った方が断然早い。
もし直接cssが見たいようて時は
ブラウザの設定を変更すれば切り替えられるので
安心安心
google driveの共有アイテムにあるファイルをマイドライブに移す
複数のgoogledriveを一緒に開きたくてodrive（https://www.odrive.com/）とか使ってたんですけど
たまに共有に落ちてこないファイルがあったりして使うの辞めました。
とはいえgoogle driveアプリは共有アイテムを拾ってくれなくて困ったなーって思ってたら
マイドライブに移せばローカルでも開けるんですね。
マイドライブに移したいファイルを選択して、右上のマイドライブに移すアイコンをクリックです
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がうまいこと展開されない( ´・_・｀)
例えば
|
1 |
ul+ |
をexpand abbreviationすると
|
1 2 3 |
<ul> <li></li> </ul> |
とならずに
|
1 |
<ul+></ul+> |
となってしまい、このままでは使い物にならない。
.kitでもemmetを有効にする
わりと簡単に対応させられました。
|
1 |
/Library/Application Support/Coda 2/Plug-ins/Emmet.codaplugin |
を右クリックして[パッケージの内容を表示]
その中の
|
1 |
/Contents/Resources/snippets.json |
を開く
下の方に
|
1 2 3 |
"kit": { "extends": "html" }, |
を追加
これでおk
ul+を展開して動作確認してみよう。
ついでに.kitに.htmlのカラースキームを適用させる
こちらはcoda2の環境設定から[エディタ＞カスタム言語モード]
テンプレ使えるようになると、作業ファイルが見やすくなっていいですな。
こうゆう入力欄て超ユーザービリティ低いんで、やめてもらいたいんですけど。
なんで入力する内容の説明をプレースホルダーだけで賄おうって思ったんだって話。
こんなの全然スタイリッシュでもなんでもないですから。くっそ使いづらい。
さらにここは、よくある並びの
[姓 名]
[セイ メイ]
じゃなく
[姓 セイ]
[名 メイ]
が1列になってる点もポイント高いんじゃないかって思います。
CodeKitを使ってみた
CodeKitなら、Autoprefixerを簡単に使えるようなので試してみることにした。
Autoprefixerは、Can I use…の結果を元にベンダープレフィックスを補ってくれる機能
display:flexみたいな仕様がころころ変わってきたプロパティを使う時など、とても便利。
例えば次の記述は
|
1 2 3 |
div{ display:flex; } |
こんな風に変換される。
|
1 2 3 4 5 6 |
div { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } |
今まではgulpを使ってしていたんだけど
それだと、compass準備して、gulpインストールして、package.jsonを用意するか使いまわして、モジュールをインストールして、gulpfile.js書いて、、、とさっと始めるには労力がかかっていたけど
CodeKit2には基本機能としてAutoprefixerが組み込まれてるから、起動したらほぼいきなり書き始められるもんで超絶楽な予感。
ただcompassの追加プラグインなんてのはCodeKitからは追加できたりしないのかしら？
そうなると結局config.rbは自分で編集してターミナルも使う事になりそうだ。