WordPress編集用にWEB開発エディター「Atom」の初期設定をしてみました

僕は、Wordpressテーマなどのファイルを編集するには、Sublime Textなどを使用したりしてきました。

Sublime Textは、「恋に落ちるエディター」といわれるほどとても使い勝手の良いエディターです。

ただ最近、ネットなどを見ていると、AtomというWEB開発用エディターにも、ものすごいポテンシャルを感じました。なんといっても、こちらは無料です。

ということで、僕は今、Wordpressテーマを編集するくらいしかコード編集をすることはないので、Wordpress用にAtomを初期設定してみました。

今回は、僕がやってみた初期設定をメモがてら紹介です。

スポンサーリンク
レクタングル(大)広告

Atomとは

Atom

Atomとは、GitHub社が開発したWEBプログラマ向けのエディターです。

オープンソースで開発され、Windows、Mac、Linux環境で利用可能。しかも無料で利用することができます。

拡張性が高いのも大きな特徴で、テーマやパッケージをインストールすることで、自分好みの環境にカスタマイズすることができます。

かなり、Sublime Textを意識した作りで、操作性はかなり似ており、見た目や機能などもテーマとパッケージをインストールすることで、かなり近づけることができます。

いろいろな言語に利用できるエディターですけど、僕は現在、Wordpress関係の編集をする時しかコード編集をすることはないので、以下でWordpressをいじる用に初期設定してみたいと思います。

ダウンロード・インストール

ダウンロードは、atom.ioの「Download Windows Installer」から行います。

Download Windows Installer

僕の環境はWindowsなのでWindowsインストーラーのダウンロードボタンが表示されましたが、それぞれの環境に合ったインストーラーがダウンロードできます。(以下はWindows環境での説明です。)

AtomSetup.exeというファイルがダウンロードされるので、起動してインストールします。インストールは特に難しいこともないと思います。

Atomの基本操作

インストール後、起動すると、以下のような画面が表示されます。

Atom最初に起動

ファイルを開く

エディター画面にWordpressテーマのフォルダなどをドラッグ&ドロップすると、以下のようにツリー表示されます。

テーマフォルダを開く

このように、編集対象ファイルを一覧で見ることができるので、ファイルへのアクセスも容易です。ツリー表示は、「Crrl+\」で切り替えることができます。

コマンド操作

Atomの基本機能となるコマンドは、通常のメニューからアクセスすることができます。

Atomメインメニュー

ただ、メニューの「View→Toggle Command Pallet」もしくはショートカットキーの「Ctrl+Shift+P」から、欲しいコマンドを、ファジー検索することもできます。

コマンドパレット

ファイルの検索

フォルダをドラッグ&ドロップして開けば、一覧になるので、ファイルの場所はそれだけでかなりわかりやすくなるのですが、それでも見つけづらいという場合は、「開いているフォルダの中からファイルを探してくれる機能」もあります。

メインメニューの「Find→Find File(Ctrl+P)」をすることで、ファイルをいち早く発見できます。

ファイルの曖昧検索

この検索は、曖昧な検索も得意なので、何となく文字列を入力しても、結構見つけることができます。

「Find→Find File(Ctrl+P)」では、フォルダ内のファイルを検索できましたが、「Find→Find Buffer(Ctrl+B)」だと、開いているタブの中から検索してくれます。

基本設定

基本設定は、「File→Settings」もしくはショートカットキーの「Ctrl+,(カンマ)」から行うことができます。

基本の設定

ここでは、フォント、フォントサイズ、インデント幅などを手軽に編集することができます。

Sublime Textと違って、GUIで設定ができるので、ここらへんは、初心者にも優しく抵抗なく使えます。

僕は、デフォルトから以下の設定をオンにしました。

  • Show Indent Guide(インデントガイドの表示)
  • Show Invisible(タブ、半角スペースなどの表示)

表示設定

インデントガイドと、半角スペースがわかりやすく表示されます。

スペースなどの表示

言語別の設定を行う方法

例えば、「PHPのインデント幅は2がいいけど、Rubyのインデント幅は4がいい」なんて場合は、言語別の設定を行うことができます。

設は、先程の設定画面のメニュー下にある入力ボックスに設定したい言語を入力すると、設定項目がインクリメンタル検索され表示されます。

言語別の設定

言語別の設定項目は「Language 言語名」というような名前になっています。

あとは、通常の設定と同様に設定を行います。

スニペットの設定

その他に、この言語別設定からコードの入力の助けになるスニペットの設定も行うことができます。

スニペットの設定

スニペットの書式に関しては、それぞれ好みの書き方があると思うので、この設定は結構行うことがあるかと思います。

スニペットの設定は、それぞれの言語設定の「Open in Atom」ボタンから行います。Open in Atom

ボタンをクリックすると、言語の設定フォルダが開かれるので、スニペットのJSONファイルをテキストで編集します。(PHPの場合だとファイルは「language-php/snipetts/language-php.json」になります。)

PHPのスニペット設定

「functionのスニペットのカッコの位置が気に入らない」といった場合はここで修正します。

キーバインドの設定

キーバインドの設定は、「File→Settings(Ctrl+Comma)」の「Keybindings」からショートカットキーの一覧を見ることができます。

キーバインドの設定

「あれ?あのショートカットなんだったっけ?」なんて時も、検索すればインクリメンタル表示されるのですぐに見つかります。

キーバインドの検索

キーバインドの設定を変更するには、「your keymap file」をクリックします。

キーマップファイル

キーバインドの設定手順などは以下を参照してください。

参考 Atomで新しくキーバインドを定義する方法 – Qiita

テーマの変更

テーマを変更は、「File→Settings(Ctrl+Comma)」の「Themes」から行うことができます。

テーマの設定

Atom公式のThemesなどで外観を見る事ができるので、気に入ったテーマを適用することが簡単にできます。

「Install Themes」の入力ボックスからワード検索すると以下のような結果が表示されます。

テーマの検索

あとは、インストールボタンを押せばインストールされます。

Seti Monokaiのインストール

僕は、Sublime TextのMonokaiカラースキーマを利用していたので、それに似ているMonokai-setiを利用しています。

利用中のテーマ

Seti Monokai

パッケージの設定

パッケージの設定は、「File→Settings(Ctrl+Comma)」の「Packages」から行うことができます。

パッケージの設定

これも、テーマの設定と同様Install packagesの入力ボックスから検索することで、手軽に探すことができます。

Atom公式のPackagesから、スクリーンショットと説明付きで探すこともできます。

僕がインストールしたパッケージは以下です。

Autocomplete package

Autocomplete package

Autocomplete package

確かデフォルトで入っていたと思うけど、一応。少ない文字入力でコードを補完して入力してくれます。やたら長いWordpressの関数名などは、これに頼るしかない。

Emmet plugin Atom editor

Cheat Sheet

Emmet plugin Atom editor

こちらも少ないコード記述で、HTMLや、CSSコードを気持ちよく生み出してくれます。最初は難しいかもしれないけど、Cheat Sheetを見ながら打てば、特に悩むこともないと思います。慣れると、これがないとWordpressのスタイルコードを書く気になりません。

Minimap package

screenshot

Minimap package

Sublime Textのようにスクロールバーの部分にミニマップを表示させることができます。

A Color Picker for Atom

カラーピッカー

A Color Picker for Atom

エディター上の色などをカラーピッカーで選択することができます。

css-color-highlight package

highlight-css-color package

css-color-highlight package

CSSの色指定部分の背景色をその色で表示してくれます。

まとめ

Atomは基本設定ならGUIで利用できるので、初めて利用する場合でも、結構取っつきやすいと思います。

ただ、Atomの場合.Sublime Textと比較して起動が遅いという一面もあります。

もし.こういったエディターを初めて利用する場合で、「Sublime Textお金がかかるからなぁ」と利用を控えている場合は、Atomから入っておけば間違いないと思います。

しばらく利用してみて、特に問題なければ、そのまま使い続けると、慣れる頃には大きな武器となると思います。