Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have 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;
}
4cres
せっせと駄文を量産してます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away