Adobe Bracketsのショートカットでコーダー乗り換えに慣れる

Adobe Brakets

コーダーアプリ「Sublime Text」から「Adobe Brackets」に乗り換えるための基本的なショートカットを図表にしました。後半にEMMETショートカットがあり、非常に強力なキーが集中している。これを覚えて操作を早くなるとキー入力もサクサク楽しくなる。(※特に便利なものは⭐でマークした)

スポンサードリンク

基本

コマンド名ショーットカット
取り消し+z
やり直し(Brackets)+y

アプリ

コマンド名ショーットカット
サイドバーを表示する + alt + h
Cmd + shift + h(Mac)
サイドバー・ツールバー表示切替 + shift + 2
拡張機能付きでリロードF5
Cmd + r(Mac)
拡張機能なしでリロードShift + F5
Cmd + + r(Mac)
開発者ツールを表示F12
Cmd + alt + r(Mac)

表示

コマンド名ショーットカット
フォントサイズを大きく + +
Cmd + shift + +(Mac)
フォントサイズを小さく +
フォントサイズを元に戻す + 0

ライブプレビュー

コマンド名ショーットカット
ライブプレビュー + alt + p
ライブプレビューを強制的に再読込み + shift + r
ライブプレビューハイライト + shift + c

選択

コマンド名ショーットカット
すべて選択 + a
行の選択 + L
※Macは初期状態で割り当てなしCmd + Lは「行に移動」に使用)
複数選択 ⭐ + b または -左ドラッグ
複数選択を取り消し + u
選択範囲をスキップ + shift + b
全てを複数選択 ⭐Alt + F3
+ control + g(Mac)
次の行にカーソルを追加Alt + shift +
前の行にカーソルを追加Alt + shift +
矩形選択
不明
Alt-左ドラッグ
選択範囲を行に分ける + alt + L

コーディング

コマンド名ショーットカット
コードヒントを表示 + Space
パラメーターヒントを表示 + shift + Space
クイック編集 + e
新規ルール + alt + n
※HTMLのクイック編集時の「新規ルール」のショートカットです
クイックドキュメント + k
行コメントの切り替え + /
ブロックコメントの切り替え + shift + /
Cmd + alt + /(Mac)
インデント⭐ + ]
インデント解除 ⭐ + [
行を複製 + d
行を削除 + shift + d
行を上に移動 + shift +
Cmd + (Mac)
行を下に移動 + shift +
Cmd + (Mac)
上の行を開く + shift + Enter
下の行を開く + Enter
前の区切りまで削除 + Backspace
Alt + delete(Mac)
次の区切りまで削除 + delete
Alt+ fn + delete(Mac)
すべて折りたたむAlt + 1
+ 1(Mac)
すべて展開Alt + shift + 1
+ shift + 1(Mac)
現在のコードをたたむ + alt + [
現在のコードを展開 + alt + ]

キャレット移動

コマンド名ショーットカット
1 行上にスクロール +
Cmd + alt + (Mac)
1 行下にスクロール +
Cmd + alt + Mac)
文書の先頭へ + home
+ (Mac)
文書の末尾へ +
+ (Mac)
行に移動 + end
Cmd + L(Mac)
前の区切りへ +
Alt + (Mac)
※公式に記載あり動作するが、コマンドIDはエラー有
次の区切りへ +
Alt + (Mac)※公式に記載あり動作するが、コマンドIDはエラー有
行の先頭へAlt +
Cmd + (Mac)※公式に記載あり動作するが、コマンドIDはエラー有
行の末尾へAlt +
Cmd(Mac)※公式に記載あり動作するが、コマンドIDはエラー有
最初のエラーまたは警告に移動F8
Cmd + (Mac)

検索・置換

コマンド名ショーットカット
検索 + f
ファイルを横断して検索 + shift + f
次を検索F3
Cmd + g(Mac)
前を検索Shift + F3
Cmd + shift + g(Mac)
定義をクイック検索 + t
置換 + h
Cmd + alt + f(Mac)
ファイルを横断して置換 + shift + H
Cmd + alt + shift + f(Mac)
次の候補に移動Alt +
前の候補に移動Alt +
定義にジャンプ + j
※JavaScript内で使用します

ファイル操作

コマンド名ショーットカット
新規作成 + n
開く… + o
フォルダーを開く… + alt + o
最近使用したファイルを開く…Alt + o
最近使用したプロジェクトを表示 + alt + r
閉じる + w
すべて閉じる + shift + w
保存 + s
すべて保存 + alt + s
名前を付けて保存… + shift + n
ファイル名変更F2
前の文書(使用順) + shift + Tab
Cmd + shift + [(Mac)
次の文書(使用順)+ Tab
Cmd + shift + ](Mac)
前の文書(並び順) + PageUp
Cmd + fn + (Mac)
次の文書(並び順) + PageDown
Cmd + fn + (Mac)
クイックオープン + shift + 0

スポンサードリンク

EMMETショートカット

コマンド名ショートカット
HTML雛形セット! + tab
100+50(計算=150)⭐ + shift + y
タグ境界選択内側から: + opt + b
外側から: + opt + sift + b
開始、終了タグ間移動 + shift + t
1行化 + shift + m
類似プロパティ一括変更 + opt + r
開始・終了タグ一括削除⭐ + shift + k
開始・終了タグ同時編集⭐⭐ + shift + i
空タグ⇄有タグ + shift + j
任意タグで囲む⭐ + shift + a
この操作はリアルタイムEmmet入力になっていて完了後のtabキー不要
数値増減⭐ + shift + (x1)
+ opt + (x10)
+ shiftopt  + (x0.1)

EMMETの基本

EMMETを覚えるととても少ないキーでタグ構文入力を完了できる。EMMETプラグインはBrancketのアドオンで簡単にインストールできる。

EMMETテキストtab入力後
h1.logo<h1 class=”logo”></h1>
a[href=”/”].link<a href=”/” class=”link”></a>
.header>h1>a{ロゴ}<div class=”header”>
<h1><a href=””>ロゴ</a></h1>
</div>
img[src=”img_$$.png”]*3<img src=”img_01.png” alt=””>
<img src=”img_02.png” alt=””>
<img src=”img_03.png” alt=””>

EMMET書き方のルール

概要書き方サンプル
要素Earticle
IDの指定E#id#header
classの指定E.classa.link
属性の指定E[attr]a[href=”/”]
階層を下げるE>eh1>a
階層を上げるE>e^ph1>a^p
隣接する要素E+E.header>h1+p
子要素E+dl+
要素の複製E*nul>li*3
連番$*nul>.menu$*3>a
テキスト挿入{text}p{text}

応用

ショートカットtab入力後
.comment>h1|c<div class=”comment“>
<h1></h1>
</div>
<!– /.comment –>
.entyty>h1|e&lt;div class=”entyty”&gt;
&lt;h1&gt;&lt;/h1&gt;
&lt;/div&gt;
.1line>h1|s<div class=”1line“><h1></h1></div>

この記事を書いた人

mojigumi

「もじぐみ」の代表、コウです。
専門は企画・出版・編集・印刷、Webデザインと管理。最近はブログ、動画、3DCG、AR、LINEスタンプ等のコンテンツ配信にも力をいれ、自分自身もランニングアートでコンテンツ化に努めています。