s1r-Jの技術ブログ

とあるSEの技術ブログ

さよならBrackets

先日Bracketsがサポート終了となり、VS Codeへの移行が推奨と発表されました。 少し前まで愛用していたエディタだったので、ここでは追悼的な記事を書き残します。Adobeのサポートが終わるだけなので、もしかすると今後さらに発展するかもしれないですし。。。

2021 年 9 月 1 日、AdobeBrackets のサポートを終了します。 Brackets の使用、保守、改善を継続する場合は、GitHub でプロジェクトをフォークできます。 Visual Studio Code は、オープンソース上に構築された Microsoft の無料コードエディターです。AdobeMicrosoft とパートナー関係にあり、このエディターへの移行をお勧めします。

写真はHOTEL EDITというホテルのマグカップです。
Bracketsっぽくておしゃれ。

ホテル エディットのマグ

Bracketsとは

Brackets - Web デザインを認識する最新のオープンソースコードエディター

Bracketsとはオープンソーステキストエディタです。ちょっとリッチなエディタで、IDEのように重くないといったエディタです。

標準でライブプレビュー機能を持っているということが売りのひとつだと思います。ライブプレビューとは、Bracketsと連携させたGoogle ChromeブラウザでBracketsで編集したHTML・CSSファイルの内容が即座に反映されるという機能です。
HTML・CSS・JSの勉強をするときに非常に便利でした。というか、もともとEclipseしか使ったことがなかったとき、Webフロント周りの勉強をするために便利なエディタを探していて見つけたのがBracketsでした。

初めて使ったときには以下のQiitaの記事を参考にセットアップしました。

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の使いにくかったところ、残念だったところを上げていきます。

UTF-8以外の文字コードに対応していない

まずはこれですね。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にもライブビュー機能があることを知り、乗り換えることになりました。

ritwickdey/vscode-live-server: Launch a development local Server with live reload feature for static & dynamic pages.

おわりに

私自身、BracketsからVS Codeに乗り換えたため、今のPCにはBracketsのインストールすらしていないです。

HTML、CSSJavaScriptやNodejsを学び始めたときに、Bracketsを使っていたのは良い出会いだったとおもます。BracketsのエクステンションにGitHubでプルリクを出したこともありますし、思い入れのあるエディタです。
Bracketsの開発が別のサポートされるようになったり、後継となるエディタができたりしたら、また使ってみたいと思います。

サンキュー、Brackets