「Brackets」の版間の差分
ナビゲーションに移動
検索に移動
ページの作成: <div id="manual"> Adobeが提供している開発向けテキストエディタ。<br> テキストエディタとIDE（統合開発環境）の中間あたりの印象で、IDE... |
編集の要約なし |
||
| 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=== | |||
全角英数字・記号をハイライトする。 | |||
</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:12時点における版
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
全角英数字・記号をハイライトする。
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が、属性値の記述時にコードヒントとして出てくる。