macoblog

「ゲーム × プログラミング」で生きていく

アプリ検索ツール(β版)を公開

Atomのおすすめプラグイン10選+α、WEB制作やるなら入れておこう。

TOOL

Atomユーザー

Atomユーザー
「HTML/CSS、JavascriptやPHP、WEBプログラミングをする上でこれだけは入れておけってプラグインがあれば教えてほしいな。」

こんなニーズに答える記事になります。
本記事では、テキストエディタ「Atom」でおすすめしたいプラグインについて解説しています。

この記事を書いている私は現役のWEBエンジニアです、仕事でもテキストエディタは「Atom」を愛用しているので、これから紹介するプラグインの質は間違いないかと。

おすすめの基準 = 実務で役に立つか(効率化を図れるかどうか)

目次【本記事の内容】

繰り返します、これから紹介するプラグインは全て実務で役立ちます、入れない方が損なレベルかもしれません、WEB制作をするなら入れておきましょう。

最初に:プラグインの入れ方について【初心者向け】

最初に:プラグインの入れ方について【初心者向け】

Atomを入れたばかりの方や使い慣れていない方のために、プラグイン(パッケージ)について簡単に説明しておきます。

本記事では「プラグイン」と呼んでいるものはAtomでいう「パッケージ」です、同じ意味なので気にしないでください。

プラグインを実際にインストールする方法についても解説しておきます。

  1. Atom起動
  2. 画面上部にあるメニューの一番左「File(ファイル)」をクリック
  3. 「setting(環境設定)」をクリック
  4. 「Install(インストール)」をクリック
  5. 検索窓からプラグインを検索
  6. インストールボタンを押す

デフォルトで英語表記だと思うので、まず日本語化プラグインをインストールしておきましょう、これについても紹介しています。

※インストールしたプラグインは「setting(環境設定)」から「package(パッケージ)」で確認することができます(状態もここから切り替える事ができます)

Atomのおすすめプラグイン10選

japanese-menu【日本語化】

screenshot

japanese-menu

内容 メニューやオプションを日本語表記に変更する
コメント 英語の方が使いやすい!なんて変わった方以外はとりあえず入れておきましょう。

file-icons

Icon previews

file-icons

file-icons

内容 ファイルの種類に応じてアイコンを付与する
コメント ファイルの種類をアイコンで可視化できるのでかなり便利、必ず入れておこう。

color-picker

Color Picker in action

color-picker

内容 エディタ内でカラーピッカーを使えるようになる
コメント 色は分かるけど色コードが分からない、その際に調べる手間を省けます。

pigments

Screenshot

pigments

内容 色コードを可視化する
コメント 色コードだけじゃ分かりづらい、そんなあなたにオススメしたい「pigments」

minimap

Minimap Screenshot

minimap

内容 ミニマップを設置する
コメント デフォルトで入れとくレベル、何も考えず入れておきましょう。

minimap-autohide

Minimap autohide animated image

minimap-autohide

内容 ミニマップの表示・非表示の自動化
コメント あると便利だけど使わない時は邪魔(ミニマップ)、こんな悩みを解決します

minimap-highlight-selected

Screenshot

minimap-highlight-selected

内容 ハイライトをミニマップにも反映させる
コメント ミニマップを入れたらとりあえず入れておきましょう、ミニマップ仕事しすぎ。

minimap-pigments

Screenshot

minimap-pigments

内容 「pigments」をミニマップにも反映させる
コメント またミニマップ関連か、まぁそんなこと言わずに入れましょうよ。

show-ideographic-space

show-ideographic-space

内容 全角スペースの可視化
コメント 「全角スペースの可視化だと!?なんて便利なんだ」この気持ちが分かる人はプログラミング初心者じゃない事実、まじ便利

highlight-selected

実際のGIF

highlight-selected

内容 同一名称をハイライト表示させる
コメント 「minimap-highlight-selected」より先に紹介すべきだった、申し訳

とりあえず全部入れておきましょう、以上。

必須ではないけど便利なプラグインの紹介

Atomには先ほど紹介したプラグイン以外にも便利なものはたくさんあります。

これから紹介するプラグインに関してはとりあえず入れてみて、いらないようであればアンインストールするスタンスでお願いします。

atom-beautify

atom-beautify

内容 インデントの自動化
コメント インデントがなっていないコードは見たくない、整える気にもならない、そんなあなたに朗報です。

split-diff

スプリット・デフ・アクション

split-diff

内容 ファイルの差分を比較する
コメント ぶっちゃけ必須プラグイン、「このファイルとあのファイル何が違うんだろ」こんな時に最適、仕事でもよく使います

tag

行動中のタグ

tag

内容 タグ打ちをサポートする
コメント 閉じタグ打ちをサポートしてくれます、使い方によっては閉じミスを確認することにも使えたり、結構便利です。

autocomplete-paths

オートコンプリートパス

autocomplete-paths

内容 パスの自動補完
コメント ファイルパスを予測し自動で保管してくれるので便利、プロジェクトファイルを開きすぎると動作しないのでそこは注意、あるあるです。

auto-encoding

こんな文字化けを自動修正

auto-encoding

内容 文字化けを自動修正
コメント 文字化けはショートカットボタンで対応できるんですが、そんな機会も少ないので忘れがち、いちいち調べるのもダルイので自動化が便利です

tabs-to-spaces

tabs-to-spaces

内容 先頭の空白をタブへ(タブを空白へ)
コメント 「インデントは空白派?タブ派?」この論争に終止符を打ちます、ちなみに私はタブ派です。

smart-tab-name

smart-tab-name

内容 開いているファイルのタブを詳細化
コメント 「今開いているindex.phpはどのやつだ?」こんな悩みを解消するお手伝いをしてくれます。

opened-files

opened-files

内容 現在開いているファイルをツリービューに表示する
コメント 作業中のファイルをまとめて表示してくれるので分かりやすい、テキストエディタによってはデフォルト機能としてある。

以上、Atomのおすすめプラグインでした。