adobe brackets｜オープンソースの高機能テキストエディタ

adobe bracketsとは？

HTMLやCSS、JavaScriptのコーディングに特化したOSS製テキストエディターとして、2011年12月から開発をスタートし、Windows版やmacOS版に限らずLinux版(Debパッケージ)をGitHub上で公開している。

Adobe SystemsはBracketsを「HTML/CSS/JavaScript用のコードエディター」と称しているが、PHP、Ruby、Pythonなど多くのシンタックスハイライトを用意している。だが、後述する機能を俯瞰(ふかん)すると、やはりWeb開発の利便性を向上させるテキストエディターと評すべきだろう。

Brackets最大の特徴となるのが、ライブプレビュー機能だ。編集中のHTMLファイルやindex.htmlファイルを含むCSSファイルに対して実行すると、Webブラウザーでリアルタイム表示するというもの。現バージョンはGoogle Chromeが必要となるが、＜ファイル＞メニュー→＜試験ライブプレビューを有効にする＞を選択するか、brackets.jsonの「”livedev.multibrowser”: true」にすることで、Microsoft Edgeなども使用可能だ。

Brackets – A modern, open source code editor that understands web design.

nelog.jp

adobe bracketsの特徴

リアルタイム表示（ライブプレビュー）
高度な拡張性

授業では

Brackets File Icons
Highlight Multibyte Symbols

というプラグインを入れてみましょう。

他にも色々と便利なプラグインがあるので自宅のPCに入れてみましょう。

qiita.com

デフォルトではインデントの設定がonになっているので、インデントの機能をoffにしたい場合は以下の設定を行います。

"smartIndent": false,

bracketsはデフォルトで、閉じカッコを打つと、終了タグが自動で挿入される仕様なので、
「デバッグ」→「環境設定ファイルを開く」→「brackets.json」の記述を下記の内容に変更

{
    "smartIndent": false,
    "fonts.fontSize": "9px",
    "fonts.fontFamily": "'SourceCodePro-Medium', ＭＳ ゴシック, 'MS Gothic', monospace",
    "denniskehrig.ShowWhitespace.checked": true,
    "closeBrackets": false,
    "in3tween.ShowWhitespaceJA.checked": true,
    "in3tween.ShowWhitespaceJA.colors": {
        "light": {
            "empty": "#FFD3FF",
            "leading": "#ccc",
            "trailing": "#ff0000",
            "whitespace": "#ccc"
        },
        "dark": {
            "empty": "#FFD3FF",
            "leading": "#686963",
            "trailing": "#ff0000",
            "whitespace": "#686963"
        }
    },
    "custom.work.useIconsOfCustomWork": true,
    "custom.work.moveToolbarToSidebar": true,
    "custom.work.toggle.sidebar": true,
    "custom.work.autoHideTheTabmenu": true,
    "livedev.multibrowser": true,
    "closeTags": {
        "dontCloseTags": [],
        "indentTags": [],
        "whenClosing": true,
        "whenOpening": false
    }
}