Adobe Bracketsは、HTML、CSS、JavaScriptのオープンソースで、シンプルで強力な統合開発環境です。プラグインの追加をサポートして、追加の機能拡張機能を提供します。エラー検出の追加、ブラウザ固有のCSSプレフィックス、JSDOCアノテーションなどの現在利用可能なプラグイン。次のエディターは、ブラケットの使用と設定を簡単に紹介します。
1。プロジェクト設定
1.開くブラケット、インターフェイス全体が非常にシンプルで、トップメニューバーはファイル> exitエディター機能のみを提供します。左側には、プロジェクト組織構造のファイルツリーがあります。 Ctrl/CMD+Shift+Hを使用して、ファイルツリーを呼び出して閉じます。右側は編集領域、上部はツールバー、中央部はドキュメント領域、下部はプロンプトエリアです。
2。プロジェクトを開きます。 [ファイル]> [フォルダー]コマンドを使用して、プロジェクトフォルダーを開きます。左側のファイルツリーのプロジェクト名はプロジェクトフォルダー名に更新され、ファイルツリーは現在のプロジェクトのファイルツリーに更新されます。
プロジェクト名の左ボタンをクリックして、プロジェクト編集メニューをポップアップします。編集メニューには、履歴プロジェクトとプロジェクト編集コマンドが表示されます。
オープンフォルダーコマンド：新しいプロジェクトを開きます。
Project Settingsコマンド：現在のプロジェクトのWebアドレスを設定します。これは、ページのデバッグとプレビュー中に使用されます。
要件の設定：http：//で始まるWebアドレスである必要があります。
上の図に示すように、http：//127.0.0.1/demo/slideに設定すると、ブラウザがプレビューされると、対応するページがWebアドレスを介して開かれます。
設定されていない場合、ページはファイルのドライブ文字アドレスを介して開かれます。
2。ファイル編集
[ファイルツリーのindex.html]をクリックし、メインエリアでindex.htmlドキュメントを開きます。
1. Brackestは、ドキュメントがHTML仕様に準拠しているかどうかを確認します。下の図に示すように、ヘッドノードに配置する必要がある20行のスタイルブロックがあります。
2。クラスまたはID属性のラベル名にカーソルを配置し、Ctrl/CMD + E（編集）を押すか、編集を終了します。ブラケットはプロジェクトの下ですべてのCSSファイルを検索し、埋め込みエディターを開いてHTMLファイルに埋め込み、CSSコードをすばやく変更できます。
現在のクラス/IDタグに複数のスタイルの定義がある場合、編集ウィンドウにディスプレイスタイルを切り替えるトグルボタンがあります。または、Alt + Up/Down Arrowキーを使用して切り替えることができます。
一部のCSSファイルが現在のHTMLドキュメントで参照されていなくても、ブラケットは現在のHTMLドキュメントとプロジェクトの下のすべてのCSSファイルを検出してクラス/IDスタイルを見つけることに注意する必要があります。
3.ブラケットは、JSオブジェクト定義の迅速なプレビュー/編集もサポートしています。カーソルをJS関数名に置き、CTRL/CMD + E（編集）を押すか、編集を終了します。
4.ブラケットには組み込みのカラーピッカーがあり、RGBA、HEX、およびHSLAのカラーコーディングフォームを提供します。カラーコードにカーソルを置き、Ctrl/CMD + E（編集）を押します。 ESCキーを使用して、カラーコレクターウィンドウを終了する必要があります。
3。インスタントプレビュー
ブラケットは、Webページのインスタントプレビューを提供します。この関数を使用すると、ブラケットはChromeブラウザを呼び出して現在のページを開きます。 HTML、CSS、JavaScript、および保存を変更した後、変更されたコンテンツは、ページを手動で更新することなく、ブラウザのページにすぐに応答します。これは、ブラケットの最大のハイライトの1つです。 2つのモニターコーダーに恵まれて、スプリット画面にブラケットとクロムを表示し、エディター/ブラウザを切り替えることなくインスタントプレビューのインスタント変更を表示できます。
現在のライブプレビュー機能のいくつかの制限：
ターゲットブラウザとしてChromeブラウザでのみ動作し、Chromeをインストールする必要があります。
Chromeでのリモートデバッグに依存しており、これはコマンドラインフラグによって有効になっています。 Macでは、すでにChromeを使用している場合は、インスタントプレビューを起動している場合、ブラケットはChromeを再起動してリモートデバッグを有効にするかどうかを尋ねます。
1つのHTMLファイルのみを同時にプレビューできます。別のHTMLファイルを切り替えると、ブラケットが元のプレビューを閉じます。
4.いくつかのショートカットキー
ctrl/cmd+shift+hは、ファイルツリーを呼び出して閉じることができます
CTRL/CMD + Eクイックプレビュー/編集CSSスタイル/JavaScript関数
ctrl/cmd +/-編集領域のフォントサイズからズームインしてください
ctrl/cmd + 0編集領域のフォントサイズをリセットします
ctrl/cmd + alt + pはインスタントプレビュー関数をオンにします
ctrl / cmd + / lineコメント
ctrl / cmd + alt + / blockコメント
注：CSSコードとHTMLコードにコメントする場合、ブロックコメントショートカットキーのみを使用できます。