• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

Atomのおすすめパッケージ20選!

投稿者アイコン
2017/04/10
書いた人:
rurippa!
カテゴリ:
Web制作
13,461 views

Atomには豊富なパッケージが用意されていますので、便利なものはどんどん使っちゃいましょう!より快適なコーディング生活を目指して、ぜひご自身にあったパッケージを使ってみてください〜。

Atomのおすすめパッケージ20選!

Atomには豊富なパッケージが用意されていますので、
便利なものは使っていきましょー!

ぜひご自身にあったパッケージを見つけて使ってみてください〜。

Atomのおすすめパッケージ20選!

日本語化

パッケージ名 説明
japanese-menu メニューなどを日本語化でき ます。
英語が得意じゃない方は必須!

入力関連

パッケージ名 説明
autocomplete-paths 画像などのパスを補完してくれます。
パスを書くときに便利です。
tag HTMLの閉じタグを自動で挿入してくれます。
emmet emmetが使えるようになります。
show-ideographic-space 全角スペースが□で表示され、可視化できるようになります。
全角スペースが残ってしまうミスを未然に防げます。
linter 構文チェックをするためのパッケージ、これだけでは動作しません。
必要な言語のlinterプラグインをインストールすることで使えるようになります。
linter-scss-lint 上で紹介したlinterのscss版。scssの構文チェックをしてくれます。
他にもcss、js、phpなど各種用意されています。

表示関連

パッケージ名 説明
minimap 画面右側にミニマップを表示します。
ソースコード全体が表示され、現在地の把握もできます。
SublimeTextでおなじみのやつです。
minimap-autohide スクロール時はミニマップを表示し、それ以外の時は隠れた状態になります。
highlight-selected ダブルクリックで選択したワードと同じものをハイライトしてくれます。
こちらも、SublimeTextでおなじみのやつです。
pigments 色コード部分に実際の色も表示されるようになり、視覚的にわかるようになります。
このコードって何色だっけ…?とならなくなるので、オススメです!

その他

パッケージ名 説明
file-icons 左側のツリービューのファイル名の横に、アイコンが出るようになります。
ファイル形式が一目でわかりやすいのと、可愛いのでオススメです。笑
Jumpy キーボード操作だけで、画面上(パネル超えも可能)の好きな場所にカーソル移動できます。
atom-beautify ソースコードを整形してくれます。
インデントの幅が広いと感じる場合は、変更もできます。
(私もデフォルトは広く感じたので、一部変更して使っています)
Project Manager よく使うプロジェクトを登録できます。
保存方法は、Packages > Project Manager > Save Project
プロジェクトを開くときは、⌘ + control + P
sync-settings 複数のPCでATOMの設定を引き継ぐためのパッケージ。
別のPCで新たに設定し直すのは手間がかかるので、こういうのを使うと便利です。
※ GitHubのアカウントが必要です。
platformio-ide-terminal Atom上でターミナルが使えるようになります。
同じようなパッケージで「terminal-plus」というがあるのですが、
Atomを最新にすると動かなかったりするので、こちらの方がオススメです。
split-diff ペインを左右分割して、一時ファイルとの差分を表示をしてくれます。

Git

パッケージ名 説明
git-plus Atom上でGitのコマンドが使用できるようになります。
merge-conflicts コンフリクトが発生した箇所を、わかりやすく表示してくれます。

まとめ

どうでしたか?
パッケージを入れすぎると重くなると思いますので、自分にあうものをカスタマイズして、効率アップしていきましょー♪


この記事を読んだ人はこんな記事も読んでいます