長い間お世話になった Adobe の html エディタ Brackets

UB3/informatics/html/html_editor_brackets


  1. 概要: 最強の html エディタ Brackets
  2. 使っている機能拡張
  3. Live preview が起動しないとき
  4. Live Preview Highlight: 自動スクロール
  5. Linux version の感想

広告

概要: 最強の html エディタ Brackets

2022 年 5 月、Monterey のクリーンインストール に伴い VSCode へ移行した。以下は Brackets に関する古い記事だが、まだ GitHub から入手可能。

Adobe が提供するエディタ。

かつては「Emmet を使えるようになって編集効率が上がったことと、BlueGriffon のように勝手にタグをいじられないことから、現在はこれを主に使っている」と消極的な理由で使っていたが、現在は完全にこれ一択、他の選択肢は考えられない。

2021 年 9 月、なんと Adobe が Brackets のサポートを打ち切ってしまった。Microsoft の Visual Studio Code というアプリに Brackets の extension ができ、使用感が同じになるようにしたらしいが、試してみると Live Preview に相当する Live Server がダメ。保存してからリフレッシュするタイプ。

Brackets のメンテナンスは Github に移行した 模様。自分でやるほどの実力はないので、親切な人がメンテしてくれる限りは使い続けたい。便利なショートカット集 もある。

Brackets

Brackets の良いところ

  • Live Preview が最高。保存すると html の内容がブラウザに反映されるエディタは結構あるのだが、Brackets はタイプすると即反映される。これが最高。また、エディタとブラウザのどちらをクリックしてもその箇所に飛べる。これも 便利。
  • コードを見ながら編集できるのが良い。
  • ペアになっているタグがハイライトされるのがわかりやすい。
  • 拡張機能が充実していて、いろいろなことができる。
悪いところ
  • 選択範囲の置換ができない。できるようになる拡張機能はあるのか？
  • Emmet で br から変換されるタグが <br> で、xhtml 対応の <br /> になってくれない。
  • たまに Live view が動かないことがある。
  • 編集中、改行すると勝手にインデントを入れられるのを解除できず面倒。


使っている拡張機能

Emmet
様々なショートカットを可能にする。この業界では有名過ぎるらしく、かえって使い方についての説明を探すのに手間取った。

String convert
選択した文字列を変換してくれる。たとえば大文字から小文字など。

Show whitespace
スペースをドットで表示してくれるようになる。

Code folding
コードを折り畳めるようになるので、長いページが見やすくなる。div, ul だけでなく、自分で作った css の名前でも折り畳めるようになるとさらに良いと思う。

Shizimily Multi-encoding for Brackets
UTF-8 以外で書かれたファイルを開けるようになる。コメント欄 をつけるファイルが php で書かれており、これを編集するために入れている。


Live preview が動かないとき

保存しないでも編集した内容 Google chrome に反映される Live Preview は、Bracket の素晴らしい機能の一つ。うまく動かないときは、以下のことを試すと動くようになるかもしれない。Mac OS での経験談。


  • コードにエラーがあると、リアルタイムで変換されない。閉じるタグがないとか、明らかなエラーは Brackets の編集画面に赤で表示されるのでチェックする。
  • Brackets または Google chrome を再インストールしてみる。
  • フォルダを読み込んでいないと動かない。クリーンアップ後に html ファイルを直接 Brackets アイコンにドラッグして開いたりするとこの状態になる。html ファイルが入っているフォルダをドラッグしてから、各ファイルを開くようにする。
    • 上のような状態の場合、たぶん Chrome の URL 表示がローカルファイルを参照している (2)。file://Users/... などのような状態になっているとダメ。正しく Live preview が動いているときは、ここには IP アドレスのような数字が表示されている。123.0.1.0:23595/informatics/html/html_editor.html のような形式。

Live Preview Highlight: Brackets の自動スクロール

Brackets Live Preview は、スクロールに対応している。つまり、1) Brackets で編集したい場所をクリックすると、Chrome 側も自動でスクロールし、その場所が表示される。また、2) Chrome をスクロールしてから編集したい場所をクリックすると、Brackets でも自動的にその場所にスクロールする。

以前、2) は OK なのに、1) のみが動かないという変な状況になって困ったが、これは実は Brackets の Live Preview Highlight という機能である。

View から Live Preview Highlight にチェックを入れることで解決。ショートカットキーもあるので、おそらくどこかで間違って解除してしまったのだろう。


Linux version Brackets の感想

2017 年 4 月から Ubuntu のセットアップ をしており、Brakets はまあまあ快適に使えている。Word や Excel などの互換性よりも問題は少なそうである。使用感をメモしておく (4-30-2017)。

  • ショートカットもほとんど同じで、Emmet が使えるので Mac 版とほとんど使用感は変わらない。
  • Live preview も Google Chrome を入れるとちゃんと動く。
  • Ubuntu のフォントはきれいで好感がもてる。Windows のフォントは汚いと思う。
  • html ファイルをドラッグすると、ブラウザプレビューの画面が表示されてしまうことがある。Brackets の左カラムからファイルを開く必要がある。

広告

References

  1. BlueGriffon をインストールしたら最初にやっておきたい 7 箇条. Web.
  2. Brackets でライブプレビューが起動しない. とあるプログラマーのブログ. Link.
  3. Word さんは今日もおつかれです. Link.

コメント欄

サーバー移転のため、コメント欄は一時閉鎖中です。サイドバーから「管理人への質問」へどうぞ。

↑