JavaScriptでコードを書くときは JS Beautifier を使ってフォーマットしていたのですが、
mizchi’s blogの最近のフロントエンドのエディタ事情で
フォーマッタは当然のように prettier が入る。もう選択肢はなくて、猫も杓子もprettier。すでに勝負は決している。
と書かれていたので、じゃぁprettier入れようと思ったのがきっかけです。
prettier を使うには
私がメインで使っているエディタは Adobe Brackets です。
vs-code にも atom にも拡張があるので、Bracketsでも誰か作ってるだろう… と思ったらありませんでした。
ここで考えたのが、以下アイデアです。
- gulp-watch 使って、ファイルに変更があったら自動的に変換する
- git の commit フックに仕込む
- Bracketsの拡張作る
- vs-code にエディタを変える
Brackets 愛が強すぎて拡張を作ってみることにした
まぁアレですよ。エディタの機能拡張といえば古くは（これはものすごく古い話）Emacsの拡張作ったり、Sublime使っていたころはpython使って拡張書いたりしていたので「エディタ拡張を作るとは」みたいな流儀はわかっていたつもり、でした。
そもそもBracketsの拡張ってatomやvs-codeとどう違うのか？と思って、atom版とvs-code版のコードを見比べましたが「お・おぅ」となって、断念しました。
まぁBracketsってCEFベースだからなー（electronベースではない）、そもそもコードを流用とか考えない方が良さそうだ。
Brackets 拡張を作るのに参考になるサイト
とりあえず調べられた範囲が以下のとおり
どうやって作るか
公式サイトにも書いてあります
For a quick start, you can paste in the Simple “Hello World” extension or the code from an existing extension that is similar to what you want to do.
「既存の機能が似ている拡張のコードを参考にすると良いよ！」（おまえドキュメントを書くということを放棄しているんじゃないだろうな…
参考にするもの
Brackets Beautifyという、最初にも紹介した JS Beautifier を使えるようにする Brackets拡張です。
普段この拡張を使っているので、参考にするにはもってこいです（機能もコードフォーマットという部分では似ている）。
いくつかの壁
Brackets Beautifyのコードは難しくなく、簡単に読めたのですが
- これテストコードとか書けないの？（まぁ書けないに近い
- ES6とか使えないの？
- ファイル分割するベストプラクティスとかないの？
という部分が気になりました。
他の拡張のコードをいくつかみたりしましたが、まぁエディタの拡張って、ちょこっとした機能だから分割するまでもないんですよね、「わかる」みたいな感じ。
結果として
- テストコードは諦めた（モックのテストになりそうだったので
- ES6というとアレですが、
const let あたりは使えた。allow functionはエラーになってしまった
- ファイル分割してみた！（ベストではないかもしれないが!!
Brackets Prettier 作ったよ！
そんなこんなで、Brackets Beautifyのコードを パクって 参考に、Brackets Prettier を作りました。
Brackets 拡張を作ったらやること
Brackets Extension Registryというところに登録しておくと、エディタの 拡張機能マネージャ からインストールできるので、世界中のBracketsユーザーが prettier と検索したら出てくるようになります。
で、レジストリへの登録方法は、公式WikiのExtension Registry Helpに書いてあるので、そのとおり作業を進めます。
で、登録するとBrackets拡張のBotアカウントがツイートしてくるんですね。知らなかった。
今後は
Brackets拡張の作り方わかったので、これからは俺得な拡張をもっと作っていこうと思います！
とりあえずPolymer関係を作ろうかなー
