◆ スペース → タブ に変換する
ライブラリ使っていてプロパティやメソッドなどのリファレンスがあまり充実してないとソースを直接見てどうにかすることがけっこうあります

たいてい Chrome の devtools だけでなんとかなるのですが minify されていたり 最近よく見る webpack とかそういうツールで変換圧縮してると devtools で pretty print しても見づらいです
インデント揃うだけでもマシですが わかりづらい変数名かつ 1 つの式に 「,」 でまとめてしまっていたりであんまり読む気がでません

ですが 大抵のライブラリは github にコードが置かれています
なので変換済みでも変わらないだろう部分で検索して元のコードのおおよその位置を見つけて github の方でコード読んでします


ですが ここで問題が

私はインデントはタブ派でスペースは使わないです
こっちに強制されなければ 他の人が書くのはどうでもいいよ という感じだったのですが 読んでいると半角スペース 2 つのインデントのコードが読みづらすぎる！！


短いコードだとあんまり気にならないのですが 横幅が短くて こまめに空行とってる縦に長いコードだと インデントが目立たずに対応してるところをぱっと把握できません

エディタにコピペしてインデントを置換したり JavaScript コードなら devtools に入れて pretty print できるのですが やっぱり面倒です
それにせっかく github なので色ついていたりする元の状態で読みたいです

github のページに CSS 追加して tabsize を 4 にする機能は入れていますが スペースインデントだと CSS だけじゃどうにもなりません

やっぱりスペースインデントは消えてほしい


とりあえず JavaScript でスペースインデントをタブインデントに置き換えて CSS でタブインデントを設定する拡張機能を作りました
拡張機能といっても好きなページに js や css を埋め込める拡張機能に設定する JavaScript コードです

コードはこれ
var indent_per = 2
var tabsize = 4

var line_selector = ".js-file-line"
;[...document.querySelectorAll(line_selector)].forEach(e => {
var spindent
var first_elem = e.firstChild instanceof HTMLElement ? e.firstChild : e
if(e.dataset.indent){
spindent = e.dataset.indent
}else{
spindent = first_elem.innerHTML.match(/^ */)[0].length
e.dataset.indent = spindent
}
var tab_num = ~~(spindent / indent_per)
var sp_num = spindent % indent_per
first_elem.innerHTML = first_elem.innerHTML.replace(/^\s*/, "\t".repeat(tab_num) + " ".repeat(sp_num))
})

if(window.tabstyle){
window.tabstyle.innerHTML = `${line_selector}{tab-size: ${tabsize} !important;}`
}else{
window.tabstyle = document.createElement("style")
window.tabstyle.innerHTML = `${line_selector}{tab-size: ${tabsize} !important;}`
document.head.appendChild(window.tabstyle)
}

ツールは自作のこれ
コードそーにゅー。


ページに設定してしまって常に実行されるようにしてもいいですし スクリプトの登録だけして 見づらいと感じたら呼び出すだけでも使えます

今の github のソースに合わせているので将来的には 使えなくなる可能性は十分にあります