• isana.net

Atom使ってみました

最終更新: 2019年12月24日



はじめに

 皆さんはAtomというエディタをご存知でしょうか?

少し?前から、GitHubが提供しているフリーのエディタです。最近、はやっているようなので、流れにのってHTML5の開発や、LAMP環境での開発で使ってみましたので、今更ですが少し紹介させていただきます。

使ってみた雑感

 インストールしただけでもエディタとして必要な機能はそろっているので、普通に使うことはできます。ただ、そのままだと開発が便利になる機能は大して無いので、プラグインをインストールして機能を拡張していくことによって使いやすくなっていきます。 自分の好みに応じたプラグインを探してカスタマイズして使いやすくしていくことが、好きな人には向いていますが、そういうのが面倒くさいと思う人には。。。 プラグインはかなりの数が有りますので、いろいろ試すと使いやすくなります。 PHPStorm等の専用のIDEの方がそのまま使えて、デバッグ機能などが充実しているのでそちらの方が向いている人もいると思います。 あと、最近は安定していますが、たまに落ちたり起動しなかったり、変な動作をしたりすることがあるので注意が必要です。クラッシュして再インストールしないとダメに成ったこともあるので、どうなっても大丈夫な様にしておくと安心です。

個人的には以下の理由でしばらくは使い続けようと考えています。 ・ディレクトリをそのままプロジェクトとして使用できるので特別な設定なしでプロジェクトを作成できて便利 ・最近では当たり前ですが、エディタをタブで表示して複数同時に開くことができる ・検索結果もエディタ領域に表示されてクリックでファイル移動できるのでプロジェクト全体のGrepが簡単にできる ・いろいろプラグインを設定すると便利になるので楽しい


プラグインについて

 プラグインの検索やインストール、バージョンアップはエディタの設定画面から簡単に行えるのでどんどん試すのが良いと思います。ただ、バージョンにもよるのでしょうが使い物にならなかったり、入れることで画面が見難くなったりすることもあるので注意が必要です。そういう場合はすぐにアンインストールすればいいだけですが。

参考までに、私がインストールしているプラグインをご紹介します。 各プラグインの詳細はそれぞれのWebページがあるのでそちらで確認してください。 (Atomのプラグインインストール画面から移動できます。)

・tool-bar, flex-tool-bar エディタの左側にツールバーを追加します。(上のイメージの左側のバーです。)


 ツールバーはカスタマイズ可能でいろいろなショートカットを追加できます。 ツールバーの設定はjson形式のような書き方ですので、簡単に設定できます。下の図のような感じで記述します。

・git-control GitHubが出しているエディタですが、git関連は充実していないので別途使いやすい プラグインを入れる必要があります。このプラグインは、UI上で操作できるのでそこそこ使いやすいと思います。 他のツールの方が使いやすいので、このプラグインはAtom上で確認したい時にしかつかっていません。

・jshint

・linter, linter-php, linter-jslint コードをチェックしてエラーやワーニングを表示してくれます。 言語に応じてプラグインを追加して使います。設定内容にもよりますが、特殊な作り方をしているとエラーでは ないのにエラーばっかり表示されてしまうので、状況に応じて使うのが良いと思います。 HTML5の案件では作りが特殊になってしまったので、linter-jslintだとエラーばっかりになって見難かったので 使っていません。上に書いたプラグインのjshintを使っています。

・pigments ソース上に色(#FFFFFとか)を書くとその色を表示してくれます。下の図のような感じです。

・project-manager プロジェクトを登録しておくと、プロジェクトを簡単に切り替えれるようになので便利です。

・minimap エディタの右端にソースコードの全体を表示します。今どのへんを表示しているか見ることができます。

最後に


 プラグインを入れてカスタマイズして使いやすくはなりましたが、まだまだ使っていない機能があります。コマンド入力での操作を覚えるとさらに便利に使えるということらしいので、今後はコマンドの使い方も覚えてより便利に使えるようになると良いなぁと思っています。

ISANA.NET SOCIAL MEDIA

Copyright © 2019 isana.net

cropped-cropped-cropped-logo_s-1-1.png