零弐壱蜂

[コードエディタ] Bracketsが正式リリース

8 min read
hiroweb developer

Brackets が正式リリースされた。
アップデートついでに色々とまとめてみた。

Bracketsとは

brackets-logo

Brackets は、Web アプリ開発向けのオープンソースコードエディタ(Adobe が一枚噛んでる)。「Adobe Edge Code」のベースになってるっぽい。

Sublime Text ほど人気はないけれど、個人的には Sublime Text より使いやすくて使っている。ここ最近はかなり使いやすくなっている。

特徴

  • クロスプラットフォーム(Mac, Windows, Linux)
  • 日本語を標準サポート
  • HTML/CSS/JavaScript/SCSS/LESSを標準サポート
  • クイックドキュメント タグやスタイルに関するヘルプ表示
  • クイック編集 タグを装飾するスタイルをインライン編集できるようにする(CSSファイルを開かずに済む)
  • 構文チェック(JSLint)
  • ライブプレビュー (HTMLのリアルタイムプレビュー) 同梱されたNode.jsが勝手にやってくれる
  • 画像のプレビュー 相対パスの画像もインラインプレビューできる
  • プラグイン(拡張機能)でカスタマイズ テーマもあるのでシンタックスハイライトも変えられる

あとはHow to Use Bracketsに色々書いてある。

シンタックスハイライトとかもいい感じで、PHP も JSON も MarkDown も大抵きちんとハイライトされる。

個人サイトレベルの開発なら Brackets で十分戦えると思う。(そもそも大きめの開発なら IDE を使えばいい)

おすすめのプラグイン

環境を構築・移行する時に必要になってくるのでメモがてら。

Brackets Icons

File icons in Brackets’ file tree.
ファイルツリーに各ファイル形式によって違ったアイコンを付けてくれる。控えめなアイコン。

Indentator

Re-indent a document using your current indentation settings.
構造を崩さずにインデントを整えてくれる。

Indent Guides

Show indent guides in the code editor.
インデントのライン(線)を表示する。 インストールして有効にならない場合は以下のような感じの設定を環境設定ファイル(json)に追加してやる必要がある。 
"brackets-indent-guides.enabled": true,
"brackets-indent-guides.guideStyle": "dotted"

jsbeautifier

Beautify JavaScript, HTML, CSS, and more
大抵の形式を整形してくれる。minifyされた奴を戻すのに便利。自動的に「保存時に整形する」のオプションもある。

SVG Preview

Live preview SVG files in an inline panel while you edit them.
Brackets上でSVGをプレビューしながら編集できる。

Sidebar Plus

Hide sidebar using View->Hide Sidebar Or Ctrl+Alt+H. For immediate access, click at the left corner to open it and click on editor to collapse it
サイドバー(作業中ファイル・ファイルツリー)を自動的に隠してくれる。 プラグインをインストールしたばかりの状態じゃ分かりづらいが、ツールバーの表示から「サイドバーを隠す(Ctrl+Alt+H)」で隠れるようになる。クリックで一時的に開くことができる。

Rename JavaScript Identifier

Rename any JavaScript identifier. Place the cursor on an identifier and press Ctrl-R.
「Ctrl+R」で変数名のリファクタリングができるようになる。

Strip trailing spaces

A Brackets extension to strip traling whitespace at the end of the line on document save.
ツールバーの編集からチェックを入れておけば、ファイル末尾のスペースを削除してくれる。

Tab To Space

Converts indentation to tabs or spaces.
インデントをタブ・スペースに変換してくれる。

他には Emmet(入力補完)などもプラグインで対応できるのでわりと自分好みの環境が構築できる。また、Node.js を同梱しているからか、タスクランナー(Grunt/gulp)でやるような仕事も物によっては補ってくれるものも多い。

Brackets 1.0、登場!

メジャーバージョンアップしたけれど、1.0自体には目新しい機能はあまりない模様。
カスタマイズ可能なキーボードショートカット ユーザーの編集可能な JSON ファイルで、初期設定および拡張機能のショートカットのキーバインドを上書きできます。

クイック編集の結果を折りたたむ
クイック編集の結果がファイル別にグループ化されるようになったため、不要な CSS ファイルの結果を簡単に隠すことができます。

コードヒントとクイック オープンの結果の向上
コードヒントとクイックオープンで入力内容の大文字と小文字に基づいて結果が提案されるようになったため、大文字または小文字を入力したときの結果が向上します。

パフォーマンスの改善
このリリースでは、リリース 0.44 のパフォーマンスが多くの点で改善されています。

Extract (抽出)

本体のダウンロード時に「+ Extract (Preview) by Adobe」と「without Extract」が選べるようになっている。

「+ Extract (Preview) by Adobe」をインストールするとプラグインに「Extract for Brackets (Preview)」が追加される。

Extract for Brackets (Preview) Brackets 内の Extract 機能のプライベートプレビュー。CSS の状況に応じたコードヒントを通じてデザインカンプからデザイン情報と アセットを抽出します。

先のアップデートで Photoshop や Dreamweaver に「抽出（Extract）」機能が追加されたので、これもその一環だと思われる。

機能

![image](https://user-images.githubusercontent.com/3617124/81212861-7e3c9f00-9010-11ea-9c1e-2c835874be79.png) Work with Extract for Brackets (Preview)より

サンプルの PSD を簡単に触った感じだと、Photoshop から「抽出（Extract）」した PSD をプレビューしながら、そのコードヒントを取得できるような感じ。あと、そこから PSD 内の画像を抽出することもできるみたい。

Adobe の公式ヘルプがWork with Extract for Brackets (Preview)あったので使う人は参考になるかもしれない。

ヘルプを見てみるとサポートしているプロパティ一覧があった。これだけ対応していれば問題ないと思う。

The following CSS properties are supported:
  • font (shorthand)
  • font-family
  • font-size
  • font-weight
  • line-height
  • text shadow
  • box shadow
  • opacity
  • transform
  • background (image)
  • background-color
  • border-radius
  • border-style
  • border-width
  • width
  • height
  • position properties top/left/bottom/right; position is relative to the document
  • color properties; both solid colors and gradients

こういう連携でデザイナーとコーダーの差が埋まればいいと思う。

最後

エディタとかIDEとかは色々触ってみて自分にあった好きなものを使えばいいと思うんだけれど、BracketsはSublime Textみたいな複雑な日本語化とかが無いから簡単に触ってみたいっていう初心者にはおすすめできる。