「Brackets」の版間の差分
ページの作成: <div id="manual"> Adobeが提供している開発向けテキストエディタ。<br> テキストエディタとIDE（統合開発環境）の中間あたりの印象で、IDE... |
編集の要約なし |
||
| (同じ利用者による、間の1版が非表示) | |||
| 5行目: | 5行目: | ||
==Bracketsのインストール== | ==Bracketsのインストール== | ||
<div class="section"> | <div class="section"> | ||
[http://brackets.io/ Brackets]<br> | [http://brackets.io/ Brackets]<br> | ||
| 12行目: | 11行目: | ||
==必須エクステンション== | ==必須エクステンション== | ||
<div class="section"> | <div class="section"> | ||
===Shizimily Multiencoding for Brackets=== | ===Shizimily Multiencoding for Brackets=== | ||
Shift_JIS、EUC-JPを始めとするUTF-8以外の様々なエンコーディングのファイルに対応させてくれる。 | Shift_JIS、EUC-JPを始めとするUTF-8以外の様々なエンコーディングのファイルに対応させてくれる。 | ||
</div> | |||
<div class="section"> | |||
===Emmet=== | |||
Emmetとは、主にHTMLやCSSの記述・編集を強力にサポートする。Emmetの主な特徴は、独自の省略記法によるコーディングの高速化。 | |||
</div> | </div> | ||
==おすすめエクステンション== | |||
<div class="section"> | |||
===Beautify=== | |||
JavaScript、HTML、CSSを見やすいよう整形してくれる。minファイル等を復元・解析する際に重宝する。 | |||
</div> | |||
<div class="section"> | |||
===Brackets Tools=== | |||
これ1つでコーディングやプログラミングが便利になる様々な機能を追加することができる。 | |||
<ul> | |||
<li>・空白行の削除</li> | |||
<li>・改行の削除</li> | |||
<li>・行頭の連番を削除</li> | |||
<li>・重複行の削除</li> | |||
<li>・単語リストを配列に変換</li> | |||
<li>・単語リストをulリストに変換</li> | |||
<li>・HTMLタグの消去</li> | |||
<li>・先頭からX文字削除</li> | |||
<li>・末尾からX文字削除</li> | |||
<li>・単語を小文字化、ハイフン区切りに</li> | |||
<li>・大文字に変換</li> | |||
<li>・小文字に変換</li> | |||
<li>・単語の1文字目を大文字に変換</li> | |||
<li>・HTMLエンコード</li> | |||
<li>・HTMLデコード</li> | |||
<li>・URLエンコード</li> | |||
<li>・URLデコード</li> | |||
<li>・新規HTML5ファイルを開く</li> | |||
<li>・同じ単語をハイライト</li> | |||
</ul> | |||
</div> | |||
<div class="section"> | |||
===Extensions Rating=== | |||
拡張機能一覧画面において、ソート可能にしたり各エクステンションの作者のアイコン・DL数・スター数等の情報を表示してくれる。 | |||
</div> | |||
<div class="section"> | |||
===Highlight Multibyte Symbols=== | |||
全角英数字・記号をハイライトする。<br> | |||
Show Whitespaceを基に機能追加をしているため、半角スペースもSublime Text風に表示される。 | |||
</div> | |||
<div class="section"> | |||
===Custom Work=== | |||
開いているファイルを上部にタブ表示してくれる。<br> | |||
ドラッグ&ドロップでタブを移動、左右のサイドバー開閉、分割表示設定、タブのソート、タブの一覧表示などもできる。 | |||
</div> | |||
<div class="section"> | |||
===Brackets Outline List=== | |||
ファイルの構造をアウトライン表示してくれる。<br> | |||
対応ファイルもJavaScript、CoffeeScript、CSS、SCSS、LESS、XML、HTML、SVG、Markdown、PHPと多様。 | |||
</div> | |||
<div class="section"> | |||
===Brackets File Icons=== | |||
ファイルツリーや他エクステンションで拡張したタブに拡張子ごとのアイコンを表示してくれる。 | |||
</div> | |||
<div class="section"> | |||
===Brackets CSS Class Code hint=== | |||
編集中のHTMLが読み込んでいるCSSのセレクタに書かれているclassとIDが、属性値の記述時にコードヒントとして出てくる。 | |||
</div> | |||
</div> | </div> | ||
2016年10月5日 (水) 21:19時点における最新版
Adobeが提供している開発向けテキストエディタ。
テキストエディタとIDE（統合開発環境）の中間あたりの印象で、IDEほど高機能ではないがバランス良く高機能で軽快に動作します。
またエクステンション（拡張機能）により様々な機能追加も可能。
Bracketsのインストール[編集]
Brackets
Bracketsサイトから最新版をインストール
必須エクステンション[編集]
Shizimily Multiencoding for Brackets[編集]
Shift_JIS、EUC-JPを始めとするUTF-8以外の様々なエンコーディングのファイルに対応させてくれる。
Emmet[編集]
Emmetとは、主にHTMLやCSSの記述・編集を強力にサポートする。Emmetの主な特徴は、独自の省略記法によるコーディングの高速化。
おすすめエクステンション[編集]
Beautify[編集]
JavaScript、HTML、CSSを見やすいよう整形してくれる。minファイル等を復元・解析する際に重宝する。
Brackets Tools[編集]
これ1つでコーディングやプログラミングが便利になる様々な機能を追加することができる。
- ・空白行の削除
- ・改行の削除
- ・行頭の連番を削除
- ・重複行の削除
- ・単語リストを配列に変換
- ・単語リストをulリストに変換
- ・HTMLタグの消去
- ・先頭からX文字削除
- ・末尾からX文字削除
- ・単語を小文字化、ハイフン区切りに
- ・大文字に変換
- ・小文字に変換
- ・単語の1文字目を大文字に変換
- ・HTMLエンコード
- ・HTMLデコード
- ・URLエンコード
- ・URLデコード
- ・新規HTML5ファイルを開く
- ・同じ単語をハイライト
Extensions Rating[編集]
拡張機能一覧画面において、ソート可能にしたり各エクステンションの作者のアイコン・DL数・スター数等の情報を表示してくれる。
Highlight Multibyte Symbols[編集]
全角英数字・記号をハイライトする。
Show Whitespaceを基に機能追加をしているため、半角スペースもSublime Text風に表示される。
Custom Work[編集]
開いているファイルを上部にタブ表示してくれる。
ドラッグ&ドロップでタブを移動、左右のサイドバー開閉、分割表示設定、タブのソート、タブの一覧表示などもできる。
Brackets Outline List[編集]
ファイルの構造をアウトライン表示してくれる。
対応ファイルもJavaScript、CoffeeScript、CSS、SCSS、LESS、XML、HTML、SVG、Markdown、PHPと多様。
Brackets File Icons[編集]
ファイルツリーや他エクステンションで拡張したタブに拡張子ごとのアイコンを表示してくれる。
Brackets CSS Class Code hint[編集]
編集中のHTMLが読み込んでいるCSSのセレクタに書かれているclassとIDが、属性値の記述時にコードヒントとして出てくる。