webサイト制作の勉強|2017月7月クラスブログ

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.



nelog.jp


adobe bracketsの特徴

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

授業では

  • Brackets File Icons
  • Highlight Multibyte Symbols


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



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

qiita.com


デフォルトではインデントの設定がonになっているので、インデントの機能を一旦offにします。

"smartIndent": false,