brackets拡張機能

brackets

最近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

マークダウンの記述をライブプレビューにて確認できます。

詳しくはこちらに記載ありました。
http://9-bb.com/brackets%E3%81%A7%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%80%E3%82%A6%E3%83%B3%E8%A8%98%E6%B3%95%E3%82%92%E3%83%A9%E3%82%A4%E3%83%96%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E5%87%BA%E6%9D%A5%E3%82%8B/

 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とアウトラインを表示してくれます。

参考にさせていただいたサイト

 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

コメントを残す