Atomの導入とパッケージの紹介

当ブログは勉強がてらWordPressテーマを真っ新な状態から作ったものです。WordPressテーマ開発において学んだことを忘れないように記事として残しておこうと思います。一応自分の開発の流れを思い出しながらTips的な記事にしていきたいと思います。当記事では初めに行った開発環境構築で導入したAtomとテーマ開発に有用だと感じたAtomパッケージについてご紹介します。

 

Atomとは

Atomは高性能なテキストエディタです。プログラムはテキストを延々と書く作業になるので、テキストエディタで作業効率が変わってきます。中でもこのAtomは有志の方々が様々なパッケージ(=拡張機能)を配布しており、パッケージをインストールすることで自分にとって心地よい環境を構築することができます。エンジニアから大きな支持を受けているテキストエディタの一つです。

 

Atomのインストール方法

Atomのインストールは簡単です。以下ホームページの「Download」からzipファイルをダウンロードします。

Atom公式ページ

ダウンロード完了したらzipファイルを解凍します。Windowsはインストーラーを起動して放置しているとAtomが起動します。Macの場合Atom.appをアプリケーションフォルダにドラッグ&ドロップするだけです。

 

Atomカスタマイズ

パッケージインストールは以下のような設定画面から行います。Macの場合だとメニューの「Atom」→「Preferences」またはCommand+”,”で開いた画面で「Install」を選択することで開くことができます。この画面よりパッケージ名を検索してパッケージインストールを行います。

多くのパッケージがありますが、実際にテーマ開発に使って便利さを実感したものを紹介します。インストールしたいものがあれば以下の名前で上記画面から検索してみてください。

 

japanese-menu

英語バリバリ出来ます!という人にはあまり必要ありませんが、メニューの日本語化です。環境設定画面なども日本語化されます。

 

Sublime Style Column Selection

矩形選択を出来るようにしたくて入れています。Macだとoption+ドラッグ、WindowsだとAlt+ドラッグで矩形選択を行うことが出来ます。

 

file-icons

ファイルのアイコンをファイル名の左に表示してくれます。ファイルの種類がアイコンで視認できるようになりますし、何より画面が華やかになるので気に入っています。

 

mini-map

ファイルの現在のスクロール位置が把握しやすくなります。画面右にソースを縮小したような表示が追加されます。ソースが長くなればなるほど有効な機能です。

 

saas-autocompile

変数を扱えるようになったりなどcssをより柔軟に扱うためのメタ言語sass(scss)というものがありますが、そのsaas(scss)ファイルを自動コンパイルしてくれるパッケージです。保存時に自動でコンパイルされます。自分の中では必須のパッケージです。使用するにはパッケージのインストールだけでなくnode.jsとnode-saasのインストールが必要です。以下のページなどを参考にインストールしてください。

 

emmet

/* 展開前 */
div.classname>ul>li*3

/* tabキー展開後 */
<div class="classname">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

html、cssを省略記法で書いてtabキーで展開できる優れものです。慣れが必要ですが、一度慣れてしまうと手放せない存在になります。初めはemmetチートシートを見ながら省略記法に慣れるとよいかもしれません。

インストール直後はWordPressのテーマ作成でよく触るphpファイルでは展開されないので以下のページを参考にphpでも展開されるようにした方がよいです。

 

pigments

カラーコードに反応して色付けしてくれます。まだカラーコードを見て色をイメージできる域にいないのでこのパッケージの存在は有り難いです。

 

browser-plus

atomでブラウザを開くことができます。ソースを保存したら更新されるライブプレビュー機能もあって、エディタと画面を行き来するのが面倒と感じる人には オススメできるパッケージです。

 

まとめ

今回はAtomのインストール、Atomパッケージについて書きました。有名なものばかりを取り上げてしまったので目新しいものは見当たらなかった方もいるかもしれません。自分がまだ出会っていない便利なAtomパッケージはまだまだたくさんありそうなので、見つけたら随時追加するか記事を書こうと思います。

開発環境構築についての記事で、WordPressのローカル環境構築についての記事も書きました。

return-top