Atom 全ジャンル共通でおすすめのパッケージをご紹介

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
en_US en_US
atom image
イラストACの画像をもとに加工しています。

テキストエディタのAtomでおすすめのパッケージをご紹介します。ここでは、ジャンルを問わず共通で使えるパッケージを紹介します。

Atomエディタの全ジャンル共通でおすすめするパッケージ

Atomエディタのパッケージは、各プログラム言語や用途によって便利なパッケージが用意されています。

atomでは大きく分けて2つの方法があります。

  • IDE(統合開発環境)を使う
  • linterを使う

ほかにも方法はあるのかもしれませんが、情報が多くて開発環境が作りやすく一般的なものはこの2つです。

ここでもこの2つを中心に話を進めていきます。また、全ジャンル共通で使えるパッケージがほかにもたくさんあり、プログラム言語のタイプに限らず使えるものもたくさんあります。

それらを用途別にまとめましたのでいくつかご紹介します。

IDE(開発統合環境)

まずはじめにおすすめするのは、atomの開発統合環境(IDE, Integrated Development Environment)です。

もともとFacebook社が開発していた高機能IDEのなかから最低限の機能を取り出してまとめたものです。

atomの公式プラグインでもあります。

atom-ide-ui(https://atom.io/packages/atom-ide-ui)

メリット

  • プログラム開発に必要な機能がパッケージ化されているので、ひとつひとつパッケージをインストールする必要がない(パッケージを探さなくていい)。
  • どのプログラム言語でもパッケージのインストール作業はほぼ同じ。
  • プログラム開発をすぐにはじめることができる。
  • 初心者・開発環境にこだわりがない人向け。

デメリット

  • 内部のlinterがWordPressに対応していない。
  • それぞれの機能でもっと便利なパッケージがあることもある。
  • 同じような機能のパッケージは共存できないことがある。linterと共存できない(有名なパッケージです)。
  • もっといい環境を求めると不満になる。
  • 自分に合う開発環境を作りたい人向け。

atom-ide-uiは、それだけではIDEとして不完全です。それぞれのプログラム言語専用のプラグインをインストールする必要があります。

atom-IDEの基本機能は豊富で、これに加えてデバッガ、コンパイラもあるので、正直ほかに必要なものはないくらいです。atom-IDEについては前にくわしく書いているのでそちらを参照して下さい。

だから最初におすすめします。

これからatom-IDE以外のいろいろなパッケージを紹介しますが、atom-ide-uiの基本機能と被ることが多いです。紹介しながら被っていることを言っていきます。

no image person
いやいや。オレはオレの環境を作るんだ!

という人は参考にしてください。また、IDEの補完機能として使えることもあるのでそのあたりを参考にしてください。

ぼくは、以前は自分でプラグインを集めて使っていましたが、IDEに変えました。

『基本はIDE + 不足分をほかのプラグイン』という使い方をしています。

atom-IDEはWordPressに対応していません。ぼくはWordPressのPHP開発のときだけはlinter+αの環境に切り替えています。

  • IDEを使うなら、とりあえずatom-ide-uiとide-***をインストールするだけで開発がはじめられる。
  • のこりの機能は必要になったときに入れていく。

プログラミング

ここ10年くらいでしょうか? プログラムの開発では自動化が急激に進みました。

  • コードの自動チェック
  • ツールを使ったテストの自動化
  • 開発統合環境(Eclipseなど)の充実
  • etc…

まだこのような環境が整備されていないころ、単純なテキストエディタでひたすらプログラミングしていたころを懐かしく思います。その反面、二度とあの環境では作業したくないとも思います。

個人的な感想はさておき、これらの便利な機能は、Atomエディタでもパッケージとして用意されています。

ここでは5つご紹介します。

linter

https://atom.io/packages/linter

プログラムの静的コードチェックを行うツールです。静的コードチェックは、プログラムがルールに従って書かれているかをチェックします。

ほんの10数年前までは、コンパイルしたり、実際にプログラムを実行してみないと間違いはわかりませんでした。

そのため当時のプログラマは、コーディングミスをせずに正確に速く書く能力が必要でした。もちろん、プログラムのルールのほとんどは頭に入っています。

静的コードチェックは、その間違いをコーディングの段階で自動で指摘してくれる、登場したときは感動すらしたツールです。今ではなれてしまってその感動は忘れてしまいましたが...

おかげでプログラマは、プログラムのルールを完璧に覚える必要はなく、うろ覚えで書き始めることもできるようになりました。

脱線しましたね?話を戻します。

linterはこれだけで使えるものではなく、各プログラム言語専用のlinterパッケージを別にインストールする必要があります。

linter-php, linter-pythonなどのプラグインがあります。

linterはインストールしてパッケージの設定を行うだけで、ツールの実行作業は必要ありません。

プログラムのコードチェックでNGになる部分は、目に見える形で自動的に表示されます。

プログラムのコーディングに間違いがあれば、その個所に赤い下線で表示されます。また、エラーの内容が、エディタの下の方に用意されるウィンドウにリストで表示されます。

これでコーディングミスを気にせずにプログラミング作業に集中できます。

静的コードチェックツールというよりも、静的コードチェック”デバッガ”といった方がいいかもしれません。

WordPress環境構築の記事で、linterの動作のキャプチャがあります。ぜひ見てみてください。

IDEと共存できません。どちらかを使うことになります。IDEのCode Actions、Diagnosticsと同じ機能です。

linter-ui-default

https://atom.io/packages/linter-ui-default

linterの補完パッケージで、静的コードチェックの結果を下の方にリストで表示します。

補完パッケージなのでlinterが必要です。もちろんatom-IDEとは共存できません。

atom-beautify

https://atom.io/packages/atom-beautify

プログラムコードを整形するパッケージです。

プログラムコードの整形は、読みやすい書きやすいプログラムを作成するときに必ず必要な作業です。

縮小化されたHTML, CSS, JavaScriptのプログラムコードを復元するのに使うこともできます。

このように、プログラムコードの整形作業はとても重要です。しかし、手作業で行うのはとても面倒で、サボってしまったり、後回しにして結局しない人も多いのではないでしょうか?

このパッケージは、プログラムコードの整形作業を自動で実行してくれます。メニューから選択するだけで実行できます。また、主要なプログラム言語に対応しています。

プログラミングのエディタとして使う場合はインストールすることをおすすめします。

atom-beautifyの紹介ページの一文を抜粋します。

Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom

IDEを使う人は不要です。Code Formatで十分です。

symbols-tree-view

https://atom.io/packages/symbols-tree-view

開いているファイル内の関数、変数などのツリービューを右側に表示します。宣言先へジャンプすることもできます。プログラミングをする人には必須パッケージでしょう。

IDEのOutlineと同じ機能で不要なのですが、PHPの場合、IDEのOutlineが正常に動作しません。IDEの補完機能として使っています。

goto-definition

https://atom.io/packages/goto-definition

開いているファイル以外に定義されている関数や定数などにジャンプします。じっさいは、開いているファイルも含めてプロジェクト内のファイルすべてにジャンプできます。

IDEを使う人は不要です。Definitions (plus Hyperclick)と同じです。

tag

https://atom.io/packages/tag

htmlやxmlなどのマークアップ言語のタグの終端を自動入力するパッケージです。

IDEにはないので補完機能として使っています。

入力補完

プログラミングを行う場合、入力補完は作業効率上、外せない機能です。

何かの文字を1つ入力するごとに、メソッドやクラス名、タグなど、使うであろう入力候補がリストで表示され、選択することができます。

『俺にはそんなものは必要ない !』という強者の方もいるかもしれませんが、ほとんどの方はあったら使いたくなる機能でしょう。ここでは2つご紹介します。

autocomplete-paths

https://atom.io/packages/autocomplete-paths

皆さんは、プログラムのコーディングで相対パスを指定するときに、"../" 入力を繰り返していてどの階層にいるのか分からなくなることはありませんか?

autocomplete-pathsは相対パスの入力補完をしてくれるパッケージです。相対パスを記述しているときに入力候補を自動的に表示してくれます。

必須でインストールすることをおすすめします。

IDEにはautocomplete機能があるので、もしかするとあるのかもしれませんが動いているような気がしません。とりあえず補完機能として使っています。

color-picker

https://atom.io/packages/color-picker

rgbなど色指定を行うときに直感的に色を選択するピッカーを表示します。

IDEにはありません。補完機能として使っています。

ターミナルエディタ

vim-mode-plus

https://atom.io/packages/vim-mode-plus

テキスト編集をvimコマンドで操作するパッケージです。頻繁にサーバーで作業を行う人にとっては便利なパッケージです。

vim-mode-plus-ex-mode

https://atom.io/packages/vim-mode-plus-ex-mode

vim-mode-plusの拡張機能パッケージです。:w, :qなど、vimのコマンドモードが使用できます。一括置換もできます。

IDEにはvimコマンドはありません。補完機能として使っています。

UI(見える化で分かりやすくする)

これから紹介するパッケージは、プログラミングを行う上で絶対に必要なものではありません。

Atomエディタのビューツリーを見やすくしたり、カーソルをハイライト表示するなど、視覚的に作業しやすくするパッケージです。

5つご紹介します。

file-icons

https://atom.io/packages/file-icons

ビューツリーやタブに、ファイルの拡張子の違いをアイコンで表現します。

一見デザインとしての見栄えの良さのためのパッケージに思います。しかし、開発作業をする場合、アイコンを見ただけでファイルの種類が判断できることは作業効率が上がります。

必ずインストールすべきとは言いませんが僕は使っています。

IDEにはありません。補完機能として使っています。

highlight-line

https://atom.io/packages/highlight-line

いまカーソルがある行をハイライト表示する(目立つように表示する)パッケージです。地味ですが便利なプラグインです。集中してプログラミングをする人にはおすすめです。

IDEを使う人は不要です。同じ機能があります。

highlight-selected

https://atom.io/packages/highlight-selected

選択したテキスト文字列と同じ文字列をハイライト表示するパッケージです。これも地味ですが、プログラミングでは変数を使うので、スペル間違いを一目で確認できます。

IDEを使う人は不要です。Code Highlightと同じ機能です。

minimap

https://atom.io/packages/minimap

テキストエリアの右端にミニマップを表示します。カーソル移動では大きすぎる移動に便利です。

minimap-autohide

https://atom.io/packages/minimap-autohide

ミニマップは移動先の選択時以外はあまり使い道がありません。そのためにミニマップを自動的に非表示にするパッケージです。

このパッケージはマウスのスクロールが止まると非表示になります。そして、スクロールされているときは表示されます。

IDEにはないものなので補完機能として使っています。

まとめ

今回はあくまで最低限必要なパッケージだけを紹介させていただきました。大きく分けると2つのパターンに分かれることもご紹介しました。

  • IDEを使う
  • IDE以外の個々のパッケージを集める(linterを中心とした)

今回ご紹介したパッケージでいえば、

のどちらかを選び、IDEとそれ以外どちらを選んでも使うパッケージは

になります。あとはお好みで、

になります。

Atomはパッケージをインストールしすぎると動作が重くなり使い勝手が悪くなります。

便利なパッケージはたくさんありますので、同じような機能のプラグインは1つに絞るべきです。

インストールのし過ぎには気を付けましょう。

ご紹介したもののほかに、Atom上でプログラムを実行する環境が必要な方もいると思います。

しかしこれは個人の好みですが、Windowsならコマンドプロンプト(もしくはPower Shell)、Macならターミナルを1つ起動するだけで済むことなのであえて紹介から外しました。

また本格的な実行環境が必要なら、バーチャル環境(Virtual Boxなど)を別に用意する方が断然良いです。

あくまで個人の意見ですが、これらより優秀なatomのパッケージは今のところ見つかっていません。

迷うぐらいならとりあえずIDEを使いましょう。IDE以外の機能が必要になるのはそれなりに分かっている人なので、気にすることはありません。

最低限の設定として環境変数のPATHは設定しておきましょう。

java, php, pythonでは必要です。node.jsを使うときはnpmコマンドなどの設定が必要になります。

-> Windows, Mac, Linux, UnixのPATHの通し方

ide-phpやlinter-phpなどのパッケージではsettingsでパスの設定ができます。ほかのコマンドを使うパッケージも同じです。でもいちいち設定するのもめんどうなのでPATHに追加したほうがいいです。

(これらのパスのデフォルト設定はPATHの値を使います。)

最近Webカテゴリでよく読まれている記事です。
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!