Bracketsを使ってみる

普段、エディタにはDreamweaverを使っていますが、最近、自宅環境のAdobe CC のライセンスが切れたのと、Dreamweaver CC 2017 からコードエディタ部にBracketsが取り込まれ刷新したのもあって、代替としてBracketsを導入してみることにしました。

自宅環境

Windows7 Home SP1(32bit)

インストール

公式サイト：http://brackets.io/

※2017/3/12現在1.8が最新版ですが、インストール後、機能拡張を導入しようとすると「インストールは失敗しました。不明な内部エラー」というエラー（インストールボタン・zipドラッグ共に）が出るバグ？のため、一度1.8をアンインストールし、改めて1.7をインストールしました。
ただし、ネット検索したところ出回ってる情報が少なかったので環境による症状である可能性が高いです。

今回入手したインストーラー「Brackets.Release.1.7.msi」
DLページ（1.7）： https://github.com/adobe/brackets/releases/tag/release-1.7

インストーラをダブルクリックして起動。
「Brackets Destination Folder」画面でインストール先を指定。
[Add "brackets" launcher to PATH for command line use] [Add "Open With Brackets" to Explorer context menus for all files and folders]チェックボックスはオン（デフォルト）、[Next]ボタンで次へ
[Install]ボタンでインストール。
インストールが終わったら[Finish]で完了。

初回起動時「このプログラムの機能のいくつかが Windowsファイアウォールでブロックされています」というアラートが出るので、[プライベートネットワーク（ホームネットワークや社内デットワークなど）]チェックをオン（デフォルト）にして[アクセスを許可する]クリック。
「利用可能なアップデートがあります」ウインドウでアップデートを促されますが、1.8は上記不具合が出たので今回は[キャンセル]

設定

各設定のデフォルト値はdefaultPreferences.jsonに記述されており、設定をカスタマイズする場合はbrackets.jsonを編集します。
ショートカットや機能拡張の設定などもこのjsonファイルに記述するようです。

参考：Bracketsの機能紹介、使い方解説

インストール時のデフォルト

brackets.json

{
    "fonts.fontSize": "12px",
    "fonts.fontFamily": "'SourceCodePro-Medium', ＭＳ ゴシック, 'MS Gothic', monospace",
    "themes.theme": "dark-theme"
}

コードインデントを設定してみる。

メニュー[デバッグ] > [環境設定ファイルを開く]でbrackets.jsonを開く。
jsonファイルに設定をを追記していく。
"spaceUnits": 2, … インデント変更(スペース2つ)
"livedev.multibrowser": true, … クロスブラウザでのライブプレビュー有効
"maxCodeHints": 30, … コードヒント最大表示数
"dragDropText": true, … テキストのドラッグ＆ドロップ移動を有効

brackets.json

{
    "fonts.fontSize": "12px",
    "fonts.fontFamily": "'SourceCodePro-Medium', ＭＳ ゴシック, 'MS Gothic', monospace",
    "themes.theme": "dark-theme",
    "spaceUnits": 2,
    "livedev.multibrowser": true,
    "maxCodeHints": 30,
    "dragDropText": true
}

末尾プロパティには「,（カンマ）」を付けないよう注意（エラーになります）。

その他の設定は機能拡張インストール後に行う予定。

機能拡張

実務で効率的に作業するには機能拡張が必須。
必要に応じたものを選びインストール。

機能拡張インストール方法

メニュー [ファイル] > [機能拡張マネージャー…] で開く
[入手可能]タブの一覧から任意のものを選択し[インストール]ボタン

機能拡張をインストール

http://qiita.com/assialiholic/items/c7962f804cdb21a49327
http://brriant.hatenadiary.jp/entry/2015/08/06/224857

下記をインストールしてみました。

Extensions Rating：機能拡張のレーティングを表示。機能拡張を選ぶ参考になる。
Shizimily Multi-Encoding for Brackets：Shift_JIS/EUC-JP等、utf-8以外の文字コード対応
Indent Guides：インデント表示。インストール後、メニュー[表示]>[Indent Guides]で有効に。
全角空白・スペース・タブ表示：名前のまま。
Custom Working：タブ・ブクマ・ファイルアイコン・ファイルツリー等の機能を追加。設定参考 http://creating-homepage.com/archives/5023
Overscroll：最終行より下までスクロール可能にして見やすく。
WD Minimap：SublimeText風ミニマップ。
Emmet
Autoprefixer：CSS保存時に必要プレフィックスを自動付与。メニュー{編集}>{Auto prefix on save]で有効に。
colorHints：ファイル内で一度使用したCSSカラーをコードヒント表示。
Interactive Linter：HTML/CSS/JavaScripit構文チェック

最後に

当面これで使ってみます。
作業しつつ、必要に応じて機能拡張を追加や設定を見直し、自身の環境に合せてカスタマイズしたいと思います。

Brackets初心者のメモ

Bracketsを使ってみる

インストール

設定

機能拡張

機能拡張インストール方法

機能拡張をインストール

最後に