確実に参考になる！Atomひと通りの使い方（Windows・Mac編）

作成：2016/10/24
更新：2017/04/16
使い方 > 開発環境

プログラマーやフロントエンドがこよなく愛するエディタはいくらでもありますが、今回は「今っぽい」デスクトップアプリケーションであるAtomの素晴らしい使い方と設定方法を書いておきます。※この記事で書いたAtomの機能は2016年10月現在のものです。

エンジニア速報は Twitter の@commteで配信しています。

初期設定

Atomについて
Atomのダウンロード
Atomの日本語化

ショートカットキー

設定画面
タブ
行・カーソル

便利な機能

マークダウン
オリジナルスニペット
リアルタイムプレビュー
キーバインド
スニペットの拡張
おすすめパッケージ

Atomについて

AtomはGitHub社によって開発された無料のオープンソースエディタであり、JavaScriptやCSSなどのブラウザ上で動く技術で構築（実際の記法はCoffeeScript/LESS）されている「今っぽい」デスクトップアプリケーションです。

なぜAtomを使うのか

Chromeで使われているChromium（クロミウム）をベースとして作られているので、画面描写等のデザインもJavaScriptやCSSで実現されています。つまり、フロントエンドで学んだ技術をAtomの開発やカスタマイズに使えるお得なエディタなのです。

このようにWeb技術を使っているのでOSと依存性が少なく、今後様々なOSで使える可能性が出てきます。

もし、Atomエディタをもっと使いこなしたければこちらのAtom実践入門を読むとよいでしょう。結構コンパクトで内容もしっかりしています。

Atom実践入門──進化し続けるハッカブルなエディタ (WEB+DB PRESS plus)

SublimeTextやVimと比較すると

Atomの特徴としてGUIが多いのでSublimeTextやVimより設定が取っ付きやすく、拡張性が高く、GitHubでパッケージのソースコードを見ることもできます。

Vimよりカスタマイズが簡単で、SublimeTextと比較すると起動と動作が重い感じが否めないですが、プラグインの管理画面も全て日本語に変更できるので分かりやすいし、プロジェクト管理もしやすい。

言語切り替えもショートカットキーで簡単に出来るし、異なるデバイスでの同期が他のエディタより簡単（主観）です。

Atomのダウンロード

公式サイト：Atomの「Download Windows Installer」を押すと「AtomSetup.exe」というファイルがダウンロードされるので展開します。あっという間に使えます。

起動した直後はTelemetry Consent・Welcome・Welcome Guideというタブが開かれており、簡単な紹介が書かれています。メニューは全て英語です。

Atomの日本語化

cmd-,を押すか、Help>Welcome Guideから

Install a Package>Open Installerを選び

Install Packages>japaneseと入力しPackagesを押すとjapanese-menuが表示されるのでInstallを押す。

英語メニューが

日本語になりました。

Atomの便利なショートカットキー

sublimetextやChromeを使っていた人はATOMのショートカットキーと似ているので、覚えやすく使いやすいかと思います。

設定画面

設定画面を開く

パッケージの導入は設定画面をショートカットキーで開きます。設定画面は通常

win:ctrl-,
mac:cmd-,

で開けますが

win:ctrl-shift-p
mac:shift-cmd-p

でコマンドパレットを開き、そのまま「setting」と入力してサジェストで開いたほうが、マウスカーソル移動をしなくて済むのでスマートです。

不可視文字

設定画面のEditor画面で「不可視文字を表示」にチェックを入れておくと

以下のように

半角スペース・改行・タブなどの見えない文字を記号として表示してくれます。

ツリービューの表示は

win:ctrl-\
mac:cmd-\

で切り替え可能です。

タブ

設定画面や現在開いているタブなどを閉じたいときは

win:ctrl-w
mac:cmd-w

で閉じます。

現在開いているタブを全て閉じる場合は

win:ctrl-k w
mac:cmd-k w

で全て閉じます。kを押したあとにwを連続で押す感じです。

閉じたタブを再度開く場合は

win:ctrl-shift-t

tを押したぶんだけタブが復活します。

win:ctrl-shift-w
mac:shift-cmd-w

でエディタを閉じますが、次にエディタを開いたときは未保存状態で復活します。

再起動（リロード）は

win:ctrl-alt-r
mac:ctrl-alt-cmd-l

でOKです。

行の複製（クローン作成）

行の複製（コピーとペースト）も簡単です。複製したい行にカーソルを置き

win:ctrl-shift-d
mac:shift-cmd-d

dを押すごとに行が複製されます。

行の入れ替え

行の入れ替えは、入れ替えしたい行にカーソルを合わせ

win:ctrl-↑ or ↓
mac:ctrl-cmd-↑ or ↓

で行の入れ替えが行えます。

マルチカーソル

複数行選択

sublimetextのように複数行選択（短形選択）する場合、パッケージの「sublime-style-column-selection」をインストールするとマウスで複数行選択ができます。

複数選択と一括編集

win:ctrl-d
mac:cmd-d

sublimetextと同じですが、選択した文字と同じもの複数にフォーカスを合わせ、一括編集を行います。選択解除はctrl-uで、ジャンプはctrl-kです。

任意の文字を全選択

選択した文字を全部選択する場合は

win:alt-F3
mac:ctrl-cmd-g

で全て選択されるので、そのまま置換できます。

マークダウン

最初からマークダウン機能とマークダウンスニペットがついているのがATOMのメリットでもあります。

既存スニペット呼び出し

imgや面倒なテーブルのスニペットが登録されているので、例えば「table」と打つと

ダミー系のスニペットが表示されます。これはいいですね。他にimg/b/todo/lorem/codeなどがあります。コマンドパレットに呼び出すなら以下を実行。

win:shift-alt-s
mac:shift-alt-s

オリジナルスニペット作成

マークダウンに登録されていないスニペットを作りたいときに便利。自分だけの入力補助スニペットを作ってみましょう。スニペットを登録する時はctrl-shift-pから

Application: Open Your Snippetsを選択してsnippets.csonを開き、その中に記述していきます。記述例はこちら。

CUL - Code Ur Life: AtomエディタでのMarkdownのSnippet追加について

追加例は最初に.source.gfmを記述して、スニペット名、トリガーとなる記号、展開する内容を記述していきます。２・３・４行目を繰り返していく感じですね。CSON（CoffeeScriptのデータ記述形式）はカンマ不要です。

'セレクタの名前':
  'スニペットの名前（任意）':
  'prefix': 'きっかけとなる文字'
  'body': '展開したい内容'

プレーンテキストや他の言語など全てのファイルで展開したい場合は「.source.gfm」を「*」に変更します。一例だと以下のような言語にも対応しています。

言語	セレクタ
*	すべてのファイル
CoffeeScript	.source.coffee
TypeScript	.source.ts
JSON	.source.json
CSS	.source.css
GitHub Markdown	.source.gfm
HTML	.text.html.basic
JavaScript	.source.js

セレクタ名はAutocomplete Providers · atom/autocomplete-plus Wiki · GitHubに一覧があります。

２つのセレクタを指定する場合

htmlとマークダウンだけスニペットを適用したい場合、以下のセレクターのように「.text.html.basic,.source.gfm」とカンマ（,）区切りで記述するとよいです。

'.text.html.basic,.source.gfm':
    'h1':
        'prefix': 'h1'
        'body': '# '

マークダウン用リスト出力の例

以下は「list」と入力するとリストの「アスタリスク」を改行込みで指定回数分展開します。ATOMのマークダウンファイルでemmetが使えればよいのですが…。

'.text.html.basic,.source.gfm':
    'list':
        'prefix': 'list'
        'body': '* \n* \n* \n* \n* \n* \n'

WordPressのmoreタグ

WordPressの記事をマークダウンで書いている人は地味に面倒なmoreタグ挿入。「more」と打ち込めば続きを読むのタグが入力されます。moreをnextpageに変更すれば、ベージ分割タグになります。

'.text.html.basic,.source.gfm':
    'more':
        'prefix': 'more'
        'body': '<!--more-->'

target=”_blank”を展開

マークダウンの記述にtarget=”_blank”がないので追加してみました。「target」と打ち込むとtarget=”_blank”（ダミーの外部リンクタグ）が挿入されます。

'.text.html.basic,.source.gfm':
    'target':
        'prefix': 'target'
        'body': '<a href="#" target="_blank">title</a>'

ダミー画像

仮でダミー画像を入れたいときは「img dummy」で。

'.text.html.basic,.source.gfm':
  'img dummy':
      'prefix': 'img dummy'
      'body': '![](http://placehold.it/600x350)'

リアルタイムプレビュー

マークダウンのリアルタイムプレビュー

マークダウンのプレビューは

win:ctrl-shift-m
mac:ctrl-shift-m

でリアルタイムプレビューできます。さらにスクロールをシンクさせるために、パッケージの「markdown-scroll-sync」を入れます。

これを入れるとエディタをプレビュー画面のスクロールが連動します。

マークダウンプレビューのスタイルを変更する

マークダウンプレビューが味気ない感じなので、スタイルを変更します。コマンドパレット（shift-cmd-p）を押し、styleと入力するとApplication: Open Your Stylesheetとサジェストが出てくるのでクリックします。

styles.lessというファイルが開くので、スタイルを追記します。

ATOMはChromiumベースで作られているので

win:ctrl-alt-i
mac:alt-cmd-i

を押すことでデベロッパーツールを開くことができるので微調整しましょう。

Markdown記法チートシート - Qiita

ダミーテキスト

「lorem」と入力するとダミーテキストが入ります。最初から搭載されているのが嬉しいですね。

選択したテキストをハイライトする「highlight-selected」をインストールします。

キーバインド

キーバインドの変更（emmetのキーバインドを優先）

プラグイン「emmet」を入れるとマークダウンプレビューのショートカットキーshift + cmd + mが効かなくなるのでキーバインドを変更します。

コマンドパレットから keymap.csonを呼び出し、以下を追記します。マークダウンとemmetを使う人は必須。

'.editor:not(.mini)':
  'ctrl-shift-M': 'markdown-preview:toggle'

Keyboard Shortcut overriding (Emmet and Markdown Preview) - support - Atom Discussion

キーバインドの追加（リンクをクリックで開く）

Ctrl+Shift+Oを使うとMacではエディタに存在するURLをデフォルトブラウザで開くことができますが、Windowsではフォルダを開くキーバインドに設定されているので作動しません。リンクを開くコマンドは「link:open」なので以下のようにキーバインドを変更することでWindowsでもURLを開くことができます。

'atom-text-editor':
  'ctrl-shift-O': 'link:open'

キーバインドがどのような動きをしているか確認するにはCtrl+. で、エディタの下部にリゾルバーが表示されるので、これを参考にキーバインドを編集します。

キーバインドについてはBasic Customizationを参考に。

スニペット

スニペット拡張

Emmetでエクスクラメーションマーク（!）を展開するとhtmlの雛形が展開されますが、言語が英語になっているので日本語に変更しましょう。

設定画面>emmetの設定を開きます。

Windowsであれば、C:\Users\Owner.atom\packages\emmetと「Extensions Path」に記入します。

以下のフォルダ内に「snippets.json」というファイルを新規作成します。ここに新規作成することで、パッケージのアップデートがあっても上書きされることがなくなります。

{
        "variables": {
        "lang": "ja",
        "locale": "ja-JP"
    }
}

上記を追加します。保存すれば、htmlファイルで「!」を展開すると

言語指定が日本語に変更されます。

言語変更

言語を変更したい場合

右下の文字をクリックするか、ショートカットキーの

win:ctrl-shift-L
mac:ctrl-shift-L

を使い、言語を入力し変更します。