adobeが提供しているコードエディタ「Brackets」を使ってみます。
インストール
公式サイトからダウンロードします。
ダウンロードしたファイルを実行してインストールします。
今回は特に設定を変更せずにインストールしました。
Braketsを起動すると、スタートガイドが表示されます。
ライブプレビュー
右上の雷マークをクリックするとライブプレビューが開始します。
ブラウザで開かれました。
エディタに戻ってコードを追加してみます。
エディタの保存・ブラウザのリロードをしないでブラウザに反映されました。
青く囲まれている部分は現在エディタでフォーカスのあたっているタグになります。
HTMLとCSSは変更後に保存せずにブラウザに反映、JavaScriptは保存後に反映が確認できるようです。
クイックエディット
開いているファイルや選択している内容によって、いくつかのクイックエディットが用意されているので試してみます。
testという名前のディレクトリを作成して、下記ファイルを追加します。
- index.html
- style.css
- script.js
ファイル > フォルダを開く からtestディレクトリを選択します。
左に選択したディレクトリが表示されます。
HTMLのクイックエディット
HTMLファイルを開き、classやidにフォーカスを当ててctrl + Eを押すと、そのclass/idに対してcssで設定がある場合は該当のCSSコードが表示され、その場で編集・保存できます。
CSSのクイックエディット
CSSファイルを開いて、カラーコード部分にフォーカスを当ててctrl + Eを押すと、カラーピッカーが表示されます。
CSSファイルのクイックエディットは他にも、CSSアニメーションの編集なども行えるようです。
JavaScriptのクイックエディット
JavaScriptのファイルを開いて、関数名にフォーカスを当ててctrl + E を押すと、関数の内容を表示して編集・保存できます。
ホバービュー
imgタグの画像ファイル名にオンマウスすると、その画像が確認できます。
画像だけでなくwidthやheightも表示されるので、コーディング時に便利そうです。
他にも色々と便利な機能があるようなので、また色々試してみたいと思います。
【参考サイト】
- 無料エディター「Brackets」にも恋に落ちた
- デザイナーでも超簡単！Bracketsで楽々コーディング 第1回 デザイナーにも優しいエディタ、Bracketsの基本を知っておく | Adobe Creative Station
- Bracketsの機能紹介、使い方解説 – Qiita
コメントが承認されるまで時間がかかります。