ATOMで使える最初に入れるべきマストパッケージまとめ13選

2017.1.8 - Sun
2000 Like

こんにちは。
デザイナーのはなち○こです。

 

以前ATOMの導入についてご紹介したのですが、

 

atom_ss3
今更ながらATOMを導入して、DWやSublime Textのように使ってみた。
https://2l-cave.com/307

 
今回はATOMを導入した際に、まず最初に入れるべきマストパッケージをまとめてみました。
いろいろ試してみた中で、オススメしたいパッケージベスト13をご紹介します!!
 

入力・コーディングが快適になるパッケージ

01

 

入力補完の決定版「autocomplete-plus」

https://atom.io/packages/autocomplete-plus
予測補完・変換を自動でしてくれるパッケージ。
これでコマンドを実行しなくても自動補完できます!
※最新版のATOMにはデフォルトでインストールされているようです。

 

ディレクトリの入力補完ができる「autocomplete-paths」

https://atom.io/packages/autocomplete-paths
画像やファイルなどを指定したい場合に相対パスの入力補完をしてくれるパッケージ。
1から画像のディレクトリを手入力するのはしんどいですよね。。
このプラグインならフォルダごとATOMで展開していれば勝手にディレクトリを補完します!

 

自動でインデントをキレイに!「atom-beautify」

https://atom.io/packages/atom-beautify
インデントを自動で整理してくれるパッケージ。言語ごとに設定可能。
バックエンドにインデントのことで良く怒られる僕には必須。

 
 

02
 

カラー入力パレットを表示する「color-picker」

https://atom.io/packages/color-picker
カラーパレットを表示・入力してくれるプラグイン。
デフォルトでは「command」「shift」「c」でパレットを起動。
CSSの入力時など色の指定が簡単に!

 

色を一発で認識できる「pigments」

https://atom.io/packages/pigments
カラーコードを入力すると、コードを指定色のハイライトで表示してくれるプラグイン。
ひと目で色を判別できるため、後からソースを確認した時でも瞬時に何色か判断が可能。

 

Emmetが使えるプラグイン「emmet」

https://atom.io/packages/emmet
「Sublime Text」でもおなじみのEemmetがATOMでも使えます!
EmmetとはHTMLやCSSのコーディングを簡略化入力が可能になるプラグインのことです。

 
 

表示を拡張するパッケージ

03
 

リアルタイムでブラウザでの表示を確認できる「browser-plus」

https://atom.io/packages/browser-plus
「browser-plus」はブラウザプレビュー機能を追加するプラグインです。
ライブプレビューが可能なので、ソースを変更するとリアルタイムで反映されます!
エディタとブラウザの更新を行ったり来たりの作業はこれで卒業。

 

ソースの全体図を表示「minimap」

https://atom.io/packages/minimap
「Sublime Text」と同じように右端にソース全体図が表示されるパッケージ。

 

同じ文字列をハイライトで表示「highlight-selected」

https://atom.io/packages/highlight-selected
文字列にカーソルを当てると、ファイル内の同じ文字列がハイライトで表示することができます。同じクラスや、変数などを確認する際に便利です。

 

表示アイコンをわかりやすくカッコよくする「file-icons」

04

https://atom.io/packages/file-icons
ファイルリストのアイコンを拡張子ごとに分かりやすく且つオシャレに表示してくれます。
何でもかんでも見た目から入る僕のためにあるようなパッケージ。

 
 

ツール系パッケージ

 

ATOM内でターミナルが使える「term3」

https://atom.io/packages/term3
Atom内でターミナルを使えるようにするプラグインです。
いろいろ調べると「term2」をおすすめする情報が多いのですが、更新が止まっているようなので、こちらをインストールすることにしました。画面分割でターミナルを表示することが可能で、gitコマンドの実行などもATOMだけで完結できるように!

 

プロジェクトの管理・登録ができる「Project Manager」

05

https://atom.io/packages/project-manager
ATOM上でプロジェクトの登録が可能になるプラグインです。
・プロジェクトファイルを開いた状態で「パッケージ」「Project Manager」から
 「Save Project」選択でプロジェクトの登録・保存が可能に。
・プロジェクト一覧を確認する場合は「command」「shift」「P」で呼び出せます。

 
 

いかがでしたでしょうか。
どれもこれも有名なパッケージだと思いますが、コーディングする上で必須のパッケージだと思いますので、是非試してみて下さい。git連動関連のパッケージは必須ではない気がするのでまた別の機会に紹介しまーす。

梁瀬隆行
2L CEO - Lead Designer
他の書いた記事
  • FaceBookでシェアする
  • Twitterでシェアする
MENU
  • 新しい記事

  • 人気の記事

  • ピックアップ

関連するオススメ記事

  • 2016.11.04 - Fri
    今更ながらATOMを導入して、DWやSublime Textのように使ってみた。

SHARE

SNS Share

CONTACT

Contact Us