ATOM

【Atom】ショートカット(Win・Mac)とおすすめパッケージ

More than 1 year has passed since last update.


Atomのショートカット一覧

WindowsとMacの両方で使用しているとショートカットを忘れるのでチートシートを作成しました。

他にも便利なショートカットがあるので、暇なときに追加します。


文字・行関連の操作

操作
Windows
Mac

単語を選択 ※1
Ctrl + D
command + D

単語の末尾に移動
Alt + F
option + F

単語の先頭に移動
Alt + B
option + B

行の末尾に移動
End
control + E

矩形選択 ※2
Ctrl + Alt + 上矢印キー or 下矢印キー

複数箇所選択
Ctrl + クリック
command + クリック

インデントを一つ追加 ※3
Ctrl + ]
command + ]

インデントを一つ削除 ※3
Ctrl + [
command + [

行の選択
Ctrl + L
command + L

行の削除
Ctrl + Shift + K
control + shift + K

行ごと移動
Ctrl + 上矢印キー or 下矢印キー
control + command + 上矢印キー or 下矢印キー

行ごと下の行へコピー
Ctrl + Shift + D
command + shift + D

行の下に空行を挿入
Ctrl + Enter
command + return

行の上に空行を挿入
Ctrl + Shift + Enter
command + shift + return

※1 Ctrl or command を押した状態で D キーを押すたびに同じ単語を複数選択

※2 古いAtomだとできないかも

※3 複数行もOK


画面の操作

操作
Windows
Mac

画面を右に分割
(Ctrl + K) + 右矢印キー
(command + K) + 右矢印キー

画面を下に分割
(Ctrl + K) + 下矢印キー
(command + K) + 下矢印キー

画面を閉じる
Ctrl + W
command + W


その他

操作
Windows
Mac

Markdownのプレービュー表示/非表示
Ctrl + Shift + M
control + shift + M

セッティング画面表示
Ctrl + ,
command + ,

コメントアウト
Ctrl + /
command + /

ツリービュー(フォルダ・ファイル一覧)の表示/非表示
Ctrl + ¥
command + ¥


おすすめパッケージ

HTML/CSSのコーディングのときに役立つパッケージを紹介します。

昔はいろいろパッケージを入れないとコーディングできませんでしたが、今は必要最低限のパッケージだけで問題ないです。

パッケージのインストールは簡単です。


  • セッティング画面(※ショートカットは上述)を開く

  • Install(インストール)を選択

  • 「Search packages」の入力欄にインストールしたいパッケージ名を入力して検索

  • 下にパッケージの一覧が表示されるので「Install」のボタンを選択すれば完了


2016/1/26に新たに投稿

Atom1.4.0に入れたパッケージ

パッケージ名
補足

japanese-menu
画面を日本語化

expand-selection-to-quotes
シングルクオートまたはダブルクォート内を選択するキーバインドを追加 ※1

pigments
cssの色コードの背景に指定したコードの色を表示

tag

</ まで入力すると自動で閉じタグを挿入。 ※sublimetextと同じ

autoclose-html

</ を入力するのも面倒な方はこのパッケージ。開始タグを入力すると自動で閉じタグも入力。

highlight-selected
選択した単語と同じ単語をハイライト表示

※1

「command+'」または「control+'」または「command+shift+'」または「control+shift+'」で選択できると思います。

Macは「command+shift+'」で可能でした。

Windowsでは選択できなかったので、キーバインドを変更しました。

キーバインドの変更方法は、設定>キーバインドの一覧に「ctrl-' expand-selection-to-quotes:toggle」と記載があるかと思います。

左のファイルのアイコンをクリックして、コピーしてキーマップファイルに貼り付けて保存すれば変更できます。

私はキーマップファイルに下記のように追記して「Ctrl + Shift + q」のキーバインドに変更しました。

'atom-text-editor.editor.editor':

'ctrl-shift-q': 'expand-selection-to-quotes:toggle'


過去(2015/2/17)に紹介したおすすめパッケージ

パッケージ名
補足

tag
"</"入力時に自動で閉じタグを挿入してくれます。

autoclose-html
開始タグの">"を入力すると自動で閉じタグを挿入してくれます。タグによっては改行も自動で入り、入力状態にしてくれます。個人的には、そこまで求めていないのでtagの方が使いやすいです。

html-img
img要素を選択して Ctrl + I を入力すると縦横のサイズを挿入してくれます。Ctrl + I + / を入力すると半分のサイズを挿入してくれます。Retina対応の画像を使うときに重宝するかと思います。他にも機能がありますので、配布サイトをご覧ください。

autocomplete-plus
入力時に補完候補を表示してくれます。

autocomplete-paths
入力時の補完候補にファイルやディレクトリも表示してくれます。

atom-color-highlight
CSSなどに入力したカラーコードをハイライト表示(カラードコードと同じ色)してくれます。

file-icons
ツリービューに表示されるファイル名の左側にアイコンがあります。そのアイコンをいい感じにしてくれます。


TIPS


複数画面のときに文字を折り返して表示


  • セッティング画面表示(※ショートカットは上述)を開く

  • Editor の項目の中にある「Soft Wrap」をチェックすると表示されます。


インデントの縦線を表示


  • セッティング画面表示(※ショートカットは上述)を開く

  • Editor の項目の中にある「Show Indent Guide」をチェックすると表示されます。


タブを表すスペースの数を変更


  • セッティング画面表示(※ショートカットは上述)を開く

  • Editor の項目の中にある「Tab Length」のプルダウンを選択し、数を変更する


デフォルトで表示される縦線を消す方法


  • セッティング画面表示(※ショートカットは上述)を開く

  • 「Packages」を選択して「Wrap Guide」と検索します。

  • 「Wrap Guide」のパッケージが表示されますので、「Disable」を選択すると縦線を消えます。


フォント設定

「File」から「Open Your Stylesheet」を選びます。

styles.lessのファイルが開くので、下記のようにfont-familyを指定します。

font-familyを指定するとQiitaと似たようなフォントで表示されるはずです。

.tree-view {

font-family:Menlo,Monaco,Consolas,"Courier New",monospace,"Helvetica Neue",Helvetica,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}

atom-text-editor {

font-family:Menlo,Monaco,Consolas,"Courier New",monospace,"Helvetica Neue",Helvetica,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}