webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

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

adobe bracketsとは?

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

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

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


f:id:yachin29:20170724120419p:plain



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



https://nelog.jp/bracketsnelog.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 ゴシック, '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
    }
}