最近bracketsをメインエディタとして使用しています。
拡張機能をたくさんいれているのですが、良さそうなものをどんどん追加しただけで
いまいち拡張機能がどれがどんなふうに動いているのか、あまり理解していなかったので
まとめようと思います。
拡張機能
Extensions Rating
拡張機能画面に対して、各拡張機能のアイコンやダウンロード数などの情報が見れるようになります。
情報が少ない拡張機能でもダウンロード数が多ければ、
良いかもと試しにダウンロードしてみるのも◎かと。。。
Brackets Icons
サイドバーに表示されるindex.htmlやtest.txtなどのファイルにカラーのアイコンが着くため視認性がよくなります。
Emmet
emmetがつかえるようになります。
Indent Guides
デフォルトではなにも表示されないインデントを縦棒で表示してくれます。
Show Whitespace
半角スペースを可視化してくれます。
Brackets CSS Class Code hint
読み込んでいるCSSのclass id などのコードヒントをだしてくれます。
Paste and Indent
ペーストしたコードに自動でインデントをつけてくれます。
※インデントが必要ない場合は注意
Adobe Edge Web Fonts
Edge Web Fontsが簡単簡単使えるようになります。
詳しい使い方はこちらで紹介されていました。
http://9-bb.com/blackets%E3%81%A7%E7%84%A1%E6%96%99%E3%81%AEweb%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%83%84%E3%83%BC%E3%83%AB-edge-web-fonts-%E3%81%8C%E7%B0%A1%E5%8D%98%E3%81%AB%E4%BD%BF%E3%81%88%E3%82%8B%E6%8B%A1/
Autoprefixer
保存時に自動でベンダープレフィックス
詳しいことは下記のサイトに記載がありました。
http://kojika17.com/2014/01/autoprefixer.html
Beautify
コードをきれいにしてくれます。
minファイルを見やすいように展開してくれます。
また、自分で書いたコードの不要な改行だったりを整えるの使えます。
実行方法はこちら
対象範囲を選択し、ショートカット（Mac:Cmd+Shift+L, Win:Ctrl+Shift+L）または編集→Beautify
Brackets Tools
改行削除だったりいろいろできるます
詳しくはこちらに記載がありました。
http://qiita.com/assialiholic/items/7ee66c7097abae3c32ad
CSSFier
書いたHTMLをCSSにコピーすると自動で、idやclassセレクタを自動で記述してくれます
JavaScript & CSS CDN Suggestions
有名なCDNにあるjavascriptやcssのタグを簡単にかけるように
補完してくれます。
Overscroll
最終行より下にスクロールできます。
Markdown Preview
マークダウンの記述をライブプレビューにて確認できます。
Ruby/Rails BuilderとSimple Ruby Extension
HAMLを書くときにいれましたハイライトしてくれたりします。
この二つは解説されているのが少なく、HAMLで検索してでてきたので、いれてみました。
検証していきたいですし、くわしく分かる方おりましたら教えていただけたらうれしいです。
Display Shortcuts
現在のショートカットキーを確認できます。
ctrl+alt+/で表示できます
Shizimily Multi-Encoding for Brackets
基本的にbracketsはUTF-8のみしかしようできませんが
他の文字コードもつかえるようになります。
LiveReload
ブラウザでライブプレビューができます。
W3CValidation
w3cの構文チェックができます。
EditorConfig
エディタを変えても共通書式設定をすることができる
こちらに詳しく「EditorConfig」について書いてあります。
http://ginpen.com/2014/12/14/editorconfig/
To do
プロジェクト・ファイル単位でtodoとしてメモをつけることができます。
JSHint Configurator
JavaScriptのコードヒントを表示してくれます。
BluePrint Beta
minimaapとアウトラインを表示してくれます。
参考にさせていただいたサイト
- TOP-100 extensions
- NEVERまとめ
- WEBCRE
- 《Qitta》Brackets おすすめエクステンション集・解説
- Developers.IO
Display Shortcutsで書き出したショートカット
| Base Key | Key Binding | Command ID | Command Name | Origin |
|---|---|---|---|---|
| Up | ⌃⌥Up | view.scrollLineUp | 1 行上にスクロール | Brackets |
| Down | ⌃⌥Down | view.scrollLineDown | 1 行下にスクロール | Brackets |
| B | ⌥⇧⌘B | io.emmet.balance_inward | Balance (inward) | Extension (Emmet) |
| B | ⌥⌘B | io.emmet.balance_outward | Balance (outward) | Extension (Emmet) |
| L | ⇧⌘L | me.drewh.jsbeautify | Beautify | Extension (Drewh) |
| F1 | F1 | help.support | Brackets サポート | Brackets |
| Down | ⌥⇧⌘Down | io.emmet.decrement_number_by_01 | Decrement number by 0.1 | Extension (Emmet) |
| Down | ⇧⌘Down | io.emmet.decrement_number_by_1 | Decrement number by 1 | Extension (Emmet) |
| Down | ⌥⌘Down | io.emmet.decrement_number_by_10 | Decrement number by 10 | Extension (Emmet) |
| Y | ⇧⌘Y | io.emmet.evaluate_math_expression | Evaluate Math Expression | Extension (Emmet) |
| Enter | ⌥⌘Enter | io.emmet.expand_abbreviation | Expand Abbreviation | Extension (Emmet) |
| Enter | ⌥⇧⌘Enter | io.emmet.interactive_expand_abbreviation | Expand Abbreviation (interactive) | Extension (Emmet) |
| Tab | Tab | io.emmet.expand_abbreviation_with_tab | Expand Abbreviation With Tab | Extension (Emmet) |
| X | ⌃⌥X | e4b.TOGGLE_PANEL | Extract for Brackets (Preview) を表示 | Extension |
| C | ⌥⌘C | e4b.RESET_ALL | Extract for Brackets を起動前の状態にリセット | Extension |
| T | ⇧⌘T | htmlblockselector.select | HTML block select | Extension |
| Up | ⌥⇧⌘Up | io.emmet.increment_number_by_01 | Increment number by 0.1 | Extension (Emmet) |
| Up | ⇧⌘Up | io.emmet.increment_number_by_1 | Increment number by 1 | Extension (Emmet) |
| Up | ⌥⌘Up | io.emmet.increment_number_by_10 | Increment number by 10 | Extension (Emmet) |
| Enter | Enter | io.emmet.insert_formatted_line_break | Insert Formatted Line Break | Extension (Emmet) |
| M | ⇧⌘M | io.emmet.merge_lines | Merge Lines | Extension (Emmet) |
| Right | ⌥⌘Right | io.emmet.next_edit_point | Next Edit Point | Extension (Emmet) |
| Left | ⌥⌘Left | io.emmet.prev_edit_point | Previous Edit Point | Extension (Emmet) |
| R | ⌥⇧⌘R | io.emmet.reflect_css_value | Reflect Value | Extension (Emmet) |
| K | ⇧⌘K | io.emmet.remove_tag | Remove Tag | Extension (Emmet) |
| . | ⇧⌘. | io.emmet.select_next_item | Select Next Item | Extension (Emmet) |
| , | ⇧⌘, | io.emmet.select_previous_item | Select Previous Item | Extension (Emmet) |
| / | ⌃⌥/ | redmunds.show-shortcuts.view.shortcuts | Show Shortcuts | Extension (Show-shortcuts) |
| W | ⌥⌘W | denniskehrig.ShowWhitespace.toggle | Show Whitespace | Extension (Show Whitespace) |
| J | ⇧⌘J | io.emmet.split_join_tag | Split/Join Tag Declaration | Extension (Emmet) |
| \ | ⌘\ | io.emmet.toggle_comment | Toggle Comment | Extension (Emmet) |
| I | ⇧⌘I | io.emmet.update_tag | Update Tag | Extension (Emmet) |
| F9 | F9 | w3cvalidator_refresh | W3C 検証の更新 | Extension |
| A | ⇧⌘A | io.emmet.wrap_with_abbreviation | Wrap With Abbreviation | Extension (Emmet) |
| Delete | ⌥Delete | delGroupAfter | delGroupAfter | CodeMirror |
| Backspace | ⌃⌥Backspace | delGroupAfter | delGroupAfter | CodeMirror |
| Backspace | ⌥Backspace | delGroupBefore | delGroupBefore | CodeMirror |
| Backspace | ⌘Backspace | delWrappedLineLeft | delWrappedLineLeft | CodeMirror |
| Delete | ⌘Delete | delWrappedLineRight | delWrappedLineRight | CodeMirror |
| End | ⌘End | goDocEnd | goDocEnd | CodeMirror |
| Down | ⌃Down | goDocEnd | goDocEnd | CodeMirror |
| Down | ⌘Down | goDocEnd | goDocEnd | CodeMirror |
| Up | ⌃Up | goDocStart | goDocStart | CodeMirror |
| Home | ⌘Home | goDocStart | goDocStart | CodeMirror |
| Up | ⌘Up | goDocStart | goDocStart | CodeMirror |
| Left | ⌥Left | goGroupLeft | goGroupLeft | CodeMirror |
| Right | ⌥Right | goGroupRight | goGroupRight | CodeMirror |
| Left | ⌘Left | goLineLeft | goLineLeft | CodeMirror |
| Right | ⌘Right | goLineRight | goLineRight | CodeMirror |
| Y | ⌘Y | redo | redo | CodeMirror |
| U | ⇧⌘U | redoSelection | redoSelection | CodeMirror |
| F | ⌘⌥F | replace | replace | CodeMirror |
| F | ⇧⌘⌥F | replaceAll | replaceAll | CodeMirror |
| U | ⌘U | undoSelection | undoSelection | CodeMirror |
| S | ⌥⌘S | file.saveAll | すべて保存 | Brackets |
| 1 | ⌥⇧1 | codefolding.expand.all | すべて展開 | Extension (Expand) |
| 1 | ⌥1 | codefolding.collapse.all | すべて折りたたむ | Extension (Collapse) |
| G | ⌃⌘G | cmd.findAllAndSelect | すべて検索して選択 | Extension |
| A | ⌘A | edit.selectAll | すべて選択 | Brackets |
| W | ⇧⌘W | file.close_all | すべて閉じる | Brackets |
| Z | ⇧⌘Z | edit.redo | やり直し | Brackets |
| ] | ⌘] | edit.indent | インデント | Brackets |
| [ | ⌘[ | edit.unindent | インデント解除 | Brackets |
| X | ⌘X | edit.cut | カット | Brackets |
| O | ⇧⌘O | navigate.quickOpen | クイックオープン | Brackets |
| K | ⌘K | navigate.toggleQuickDocs | クイックドキュメント | Brackets |
| E | ⌘E | navigate.toggleQuickEdit | クイック編集 | Brackets |
| C | ⌘C | edit.copy | コピー | Brackets |
| Space | ⌃Space | edit.showCodeHints | コードヒントを表示 | Brackets |
| H | ⇧⌘H | view.hideSidebar | サイドバーを隠す | Brackets |
| B | ⇧⌘B | cmd.skipCurrentMatch | スキップして次の候補を追加 | Extension |
| Space | ⌃⇧Space | showParameterHint | パラメーターヒントを表示 | Extension |
| F | ⇧⌘F | cmd.findInFiles | ファイルを横断して検索 | Extension |
| F | ⌥⇧⌘F | cmd.replaceInFiles | ファイルを横断して置換 | Extension |
| F2 | F2 | file.rename | ファイル名変更 | Brackets |
| O | ⌥⌘O | file.openFolder | フォルダーを開く… | Brackets |
| 0 | ⌘0 | view.restoreFontSize | フォントサイズを元に戻す | Brackets |
| + | ⌘+ | view.increaseFontSize | フォントサイズを大きく | Brackets |
| = | ⌘= | view.increaseFontSize | フォントサイズを大きく | Brackets |
| – | ⌘- | view.decreaseFontSize | フォントサイズを小さく | Brackets |
| / | ⌥⌘/ | edit.blockComment | ブロックコメントの切り替え | Brackets |
| V | ⌘V | edit.paste | ペースト | Brackets |
| P | ⌥⌘P | file.liveFilePreview | ライブプレビュー | Brackets |
| R | ⇧⌘R | file.reloadLivePreview | ライブプレビューを強制的に再読込み | Brackets |
| C | ⇧⌘C | file.previewHighlight | ライブプレビューハイライト | Brackets |
| Enter | ⇧⌘Enter | edit.openLineAbove | 上の行を開く | Brackets |
| Enter | ⌘Enter | edit.openLineBelow | 下の行を開く | Brackets |
| S | ⌘S | file.save | 保存 | Brackets |
| Up | ⌥Up | navigate.previousMatch | 前の候補に移動 | Brackets |
| [ | ⇧⌘[ | navigate.prevDoc | 前の文書 | Brackets |
| Tab | ⌃⇧Tab | navigate.prevDoc | 前の文書 | Brackets |
| Up | ⌥⇧Up | edit.addCursorToPrevLine | 前の行にカーソルを追加 | Brackets |
| G | ⇧⌘G | cmd.findPrevious | 前を検索 | Extension |
| Z | ⌘Z | edit.undo | 取り消し | Brackets |
| S | ⇧⌘S | file.saveAs | 名前を付けて保存… | Brackets |
| J | ⌘J | navigate.jumptoDefinition | 定義にジャンプ | Brackets |
| T | ⌘T | navigate.gotoDefinition | 定義をクイック検索 | Brackets |
| R | ⌃⌘R | debug.reloadWithoutUserExts | 拡張機能なしでリロード | Brackets |
| R | ⌘R | debug.refreshWindow | 拡張機能付きでリロード | Brackets |
| N | ⌥⌘N | navigate.newRule | 新規ルール | Brackets |
| N | ⌘N | file.newDoc | 新規作成 | Brackets |
| ' | ⌘' | navigate.gotoFirstProblem | 最初の問題に移動 | Brackets |
| R | ⌥⌘R | recentProjects.toggle | 最近使用したプロジェクト | Extension |
| F | ⌘F | cmd.find | 検索 | Extension |
| Down | ⌥Down | navigate.nextMatch | 次の候補に移動 | Brackets |
| Tab | ⌃Tab | navigate.nextDoc | 次の文書 | Brackets |
| ] | ⇧⌘] | navigate.nextDoc | 次の文書 | Brackets |
| Down | ⌥⇧Down | edit.addCursorToNextLine | 次の行にカーソルを追加 | Brackets |
| G | ⌘G | cmd.findNext | 次を検索 | Extension |
| [ | ⌥⌘[ | codefolding.collapse | 現在のコードをたたむ | Extension |
| ] | ⌥⌘] | codefolding.expand | 現在のコードを展開 | Extension |
| Q | ⌘Q | file.quit | 終了する | Brackets |
| F | ⌥⌘F | cmd.replace | 置換 | Extension |
| L | ⌘L | navigate.gotoLine | 行に移動 | Brackets |
| L | ⌃L | edit.selectLine | 行の選択Brackets | |
| Up | ⌃⌘Up | edit.lineUp | 行を上に移動 | Brackets |
| Down | ⌃⌘Down | edit.lineDown | 行を下に移動 | Brackets |
| D | ⇧⌘D | edit.deletelines | 行を削除 | Brackets |
| D | ⌘D | edit.duplicate | 行を複製 | Brackets |
| / | ⌘/ | edit.lineComment | 行コメントの切り替え | Brackets |
| B | ⌘B | cmd.addNextMatch | 選択範囲に次の候補を追加 | Extension |
| L | ⌥⌘L | edit.splitSelIntoLines | 選択範囲を行に分ける | Brackets |
| W | ⌘W | file.close | 閉じる | Brackets |
| O | ⌘O | file.open | 開く… | Brackets |
| I | ⌥⌘I | debug.showDeveloperTools | 開発者ツールを表示 | Brackets |