Bracketsを使ってみる

adobeが提供しているコードエディタ「Brackets」を使ってみます。

インストール

公式サイトからダウンロードします。

try-the-brackets01

ダウンロードしたファイルを実行してインストールします。
今回は特に設定を変更せずにインストールしました。

Braketsを起動すると、スタートガイドが表示されます。

try-the-brackets02

 

ライブプレビュー

右上の雷マークをクリックするとライブプレビューが開始します。

try-the-brackets03

ブラウザで開かれました。

try-the-brackets04

エディタに戻ってコードを追加してみます。

try-the-brackets05

エディタの保存・ブラウザのリロードをしないでブラウザに反映されました。
青く囲まれている部分は現在エディタでフォーカスのあたっているタグになります。

try-the-brackets06

HTMLとCSSは変更後に保存せずにブラウザに反映、JavaScriptは保存後に反映が確認できるようです。
 

クイックエディット

開いているファイルや選択している内容によって、いくつかのクイックエディットが用意されているので試してみます。

testという名前のディレクトリを作成して、下記ファイルを追加します。

  • index.html
  • style.css
  • script.js

ファイル > フォルダを開く からtestディレクトリを選択します。

try-the-brackets07

左に選択したディレクトリが表示されます。

try-the-brackets08

HTMLのクイックエディット

HTMLファイルを開き、classやidにフォーカスを当ててctrl + Eを押すと、そのclass/idに対してcssで設定がある場合は該当のCSSコードが表示され、その場で編集・保存できます。

try-the-brackets09

CSSのクイックエディット

CSSファイルを開いて、カラーコード部分にフォーカスを当ててctrl + Eを押すと、カラーピッカーが表示されます。

try-the-brackets10

CSSファイルのクイックエディットは他にも、CSSアニメーションの編集なども行えるようです。

JavaScriptのクイックエディット

JavaScriptのファイルを開いて、関数名にフォーカスを当ててctrl + E を押すと、関数の内容を表示して編集・保存できます。

try-the-brackets11

 

ホバービュー

imgタグの画像ファイル名にオンマウスすると、その画像が確認できます。

try-the-brackets12

画像だけでなくwidthやheightも表示されるので、コーディング時に便利そうです。

他にも色々と便利な機能があるようなので、また色々試してみたいと思います。
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年5月
1234567
891011121314
15161718192021
22232425262728
293031