先日Bracketsがサポート終了となり、VS Codeへの移行が推奨と発表されました。 少し前まで愛用していたエディタだったので、ここでは追悼的な記事を書き残します。Adobeのサポートが終わるだけなので、もしかすると今後さらに発展するかもしれないですし。。。
2021 年 9 月 1 日、Adobe は Brackets のサポートを終了します。 Brackets の使用、保守、改善を継続する場合は、GitHub でプロジェクトをフォークできます。 Visual Studio Code は、オープンソース上に構築された Microsoft の無料コードエディターです。Adobe は Microsoft とパートナー関係にあり、このエディターへの移行をお勧めします。
写真はHOTEL EDITというホテルのマグカップです。
Bracketsっぽくておしゃれ。
Bracketsとは
Brackets - Web デザインを認識する最新のオープンソースコードエディター
Bracketsとはオープンソースのテキストエディタです。ちょっとリッチなエディタで、IDEのように重くないといったエディタです。
標準でライブプレビュー機能を持っているということが売りのひとつだと思います。ライブプレビューとは、Bracketsと連携させたGoogle ChromeブラウザでBracketsで編集したHTML・CSSファイルの内容が即座に反映されるという機能です。
HTML・CSS・JSの勉強をするときに非常に便利でした。というか、もともとEclipseしか使ったことがなかったとき、Webフロント周りの勉強をするために便利なエディタを探していて見つけたのがBracketsでした。
初めて使ったときには以下のQiitaの記事を参考にセットアップしました。
記事の内容はさらにまとめられて、書籍になっています。
Webのための次世代エディタ Bracketsの教科書 | 半田 惇志 | 工学 | Kindleストア | Amazon
プラグイン（エクステンション）
Bracketsではプラグインをインストールし、組み合わせることでエディタをカスタマイズするようになっていました。
ユーザからも様々なプラグインが提供されており、例えば、エディタの表示を変えたり、ファイルツリーのアイコンを変えたり、特にマークダウンのライブプレビューにはお世話になりました。
使っていたプラグインについて書き残します。とは言っても、Brackets おすすめエクステンション集・解説 - Qiitaで紹介されているプラグインがほとんどですが。。。
記事で紹介されているエクステンション
asgerf/bracket-rename: Rename refactoring for bracket
記事中では「Refactoring Tools for JavaScript」と紹介されていました。変数名や関数名を一括で変更できるエクステンションです。リファクタリングのときに便利です。
brackets-beautify/brackets-beautify: Beautify HTML, CSS, and Javascript in Adobe Brackets
ソースコードの整形をおこなうBeautifyのエクステンションです。
cmgddd/Brackets-css-color-preview: css color preview extension for Brackets
CSSファイルで色を指定している行の左端に、実際の色を表示してくれます。
assialiholic/brackets-highlight-multibyte-symbols: Highlight multibyte symbols and alphabets.(including Show Whitespace by DennisKehrig)
マルチバイト文字（全角文字）の英数字および記号をハイライトしてくれます。なぜか動かないJSにありがちな打ち間違いを探すときに便利です。
lkcampbell/brackets-indent-guides: A Brackets extension to show indent guides in the code editor
インデントを見やすく表示してくれます。なぜか動かないJSにありがちなカッコの過不足を探すときに便利です。
brackets-key-remapper
ショートカットキーのカスタマイズをBracketsデフォルトを含めて変更できるようにするエクステンション。エクステンションを追加していくと重複したり、そもそもBrackets以外のショートカットキーと重複したりするので、その解消に使うそうです。個人的にはあまり利用しませんでした。
Bitbucketで公開されていたリポジトリが削除されたかなにかでソースコードが見られなくなっている。
gruehle/MarkdownPreview: Brackets extension for previewing markdown files
Markdownファイルのプレビューをできるようにするエクステンション。とても利用しました。
abagshaw/brackets-minifier: Minifies and Concatenates JS and CSS in Brackets using UglifyJS3 and CleanCSS
JS、CSSのminifyするためのエクステンション。正直あまり使わなかった。
konstantinkobs/brackets-colorHints: Get all used hex colors in the current CSS file as code hints
CSSファイル内で同じ色を指定するときにサジェストをしてくれます。
alessandrio/custom-work-for-brackets
複数ファイルをタブで開けるようにしたり、分割表示できるようにしたりするエクステンションです。
この手のエクステンションを複数入れると、表示がおかしくなったりBracketsが起動しなくなったりするので注意です。
dnbard/brackets-extension-rating: Brackets extension used to display other extensions rating
Bracketsに標準搭載されているエクステンション検索のソート機能を強化するエクステンションです。
yasinkuyu/brackets-tools: Brackets developer tools extension
プログラミングでよくおこなう大文字・小文字の変換など諸々を解消してくれる便利エクステンションです。
機能が多いので、インストールしてから「これはできるっけ？」みたいな感じで機能を探すとよいです。
ivogabe/Brackets-Icons: File icons in Brackets' file tree
サイドバーなどに表示されるファイルのアイコンをいい感じにします。
似ているエクステンションは多くあるので、好みで選ぶとよいでしょう。
JeffryBooher/brackets-bookmarks-extension: Brackets Editor Bookmarks Extension
ソースコード内にブックマークをつけることができます。// TODOのようなコメントを残さずに済むようになります。
Wikunia/brackets-QuickDocsJS: Inline short documentation for JavaScript functions, including a summary,syntax and parameters.
クイックドキュメント（ショートカットキーで表示される説明）に、JSのドキュメントを追加してくれる。
sathyamoorthi/brackets-sidebar-plus: adding auto show/hide to sidebar
サイドバーの挙動を改善。
sprintr/brackets-color-palette: An extension for Brackets that lets you pick colors from images.
画像から色を抽出できるエクステンション。
ペイントを開いたり、インターネット上のツールを使ったりすることなく、Bracketsで完結できるようになります。
記事で紹介されていないエクステンション
AlanHohn/markdown-toolbar: Brackets extension that adds Markdown editing support via a toolbar
Markdown記法のツールバーです。ヘッダの挿入、リストの挿入、文字表現のON/OFF、リンクの作成などを簡便にしてくれます。
ranjandatta/brackets-open-in-linux-terminal: Open current location in terminal
Bracketsで開いているワークスペース内でターミナルを開くエクステンションです。
Nodejsの実行など、いちいちファイルエクスプローラをたどってターミナル・コマンドプロンプトを開くのが面倒くさかったので、Bracketsからすぐに開くために導入しました。
yasinkuyu/brackets-newdoc: Brackets new html5 document extension
HTML5ファイルの新規作成に利用するエクステンションです。
brackets-userland/brackets-git: brackets-git — git extension for adobe/brackets
BracketsにGitクライアントの機能を追加します。
差分の確認、ステージング、コミット・プッシュをGUIで実行できるようになります。ただし、差分の表示ではマルチバイト文字が文字化けします。
Bracketsの残念なところ
Bracketsの使いにくかったところ、残念だったところを上げていきます。
まずはこれですね。S-JISとかのファイルがあると別のエディタで開いて、変換してというようなことをしていました。これについてはエクステンション（Hiromi-Ayase/brackets-shizimily-multiencoding）を入れることで対応できるため、そこまで大きな問題ではないかもしれません。
ですが、エクステンションがマルチバイト文字に対応していないことがあり、これは時折問題になりました。Brackets-Gitは特に面倒くさく、差分を見てもマルチバイト文字が文字化けしてしまい、ろくに確認ができませんでした。
ファイル数が3万を超えるとフリーズする
プロジェクトとしてフォルダを開くとき、ファイルが3万を超えるとフリーズします。こちらもエクステンション（brackets-userland/brackets-file-tree-exclude）で対応できるそうですが、ちょっと不親切な感じもしました。
似たエクステンションを複数インストールするとクラッシュする
サイドバーの挙動を変更するエクステンションを複数インストールするとBracketsが起動しなくなったり、表示がおかしくなったりします。
当然といえば当然ですが、こっちのエクステンションのこの機能とあっちのエクステンションのこの機能がほしいというとき、諦めざるを得なかったのは残念です。
たぶんちょっと流行っていない
難癖っぽいですが、ちょっと流行っていなかったと思います。
エクステンションはあまり管理されていないものがあり、機能の追加やバグの修正が長く行なわれていないことがありました。
プラグインのインストールがプロキシに妨害される
会社で働くSEあるあるのプロキシ大嫌い問題です。 BracketsのエクステンションはAWSのS3からファイルをダウンロードし、PCに保存して利用するようになっているようです。社内プロキシは大抵の場合、このアクセスを許可してくれておらず、エクステンションを入れることができませんでした。（プロキシ設定をちゃんとすればできた？？） やるとすればGitHubからzipファイルをダウンロード・解凍し、フォルダに配置でしょうか。
ちなみにVS Codeは利用者が多いから許可しているのか、プロキシ設定がちゃんと通るのか、実際にはわかりませんが。プラグインを入れられました。
Bracketsイチオシのライブビュー機能だが、VS CodeにもLive Serverという拡張機能が存在する
上記のようなことがあってVS Codeを使おうかなー、と思っていたところ、VS Codeにもライブビュー機能があることを知り、乗り換えることになりました。
おわりに
私自身、BracketsからVS Codeに乗り換えたため、今のPCにはBracketsのインストールすらしていないです。
HTML、CSS、JavaScriptやNodejsを学び始めたときに、Bracketsを使っていたのは良い出会いだったとおもます。BracketsのエクステンションにGitHubでプルリクを出したこともありますし、思い入れのあるエディタです。
Bracketsの開発が別のサポートされるようになったり、後継となるエディタができたりしたら、また使ってみたいと思います。
サンキュー、Brackets！
