Atomエディターのオススメプラグイン5選

Atom初心者「Atomには色々便利なパッケージがあるけど、沢山ありすぎて、何を入れたら良いか分からないにゃー。初心者🔰にオススメな設定があったら教えてほしいにゃ。」

今日は、そんな質問にお答えします。

オススメプラグイン5選

まずは、以下の5つを入れておけば大丈夫です。

インストールの仕方を確認しておきましょう。

1.Atom > Preference（環境設定）を選択します

2.+Install（インストール）を選ぶとパッケージの検索画面となります。検索ボックスに任意の文字を入力して検索します

3.インストールしたいパッケージのInstallボタンを押します

簡単ですね。

Emmnet

Emmetは主にWebサイトの開発において、HTMLやCSSファイルの記述・編集をサポートします。

例えば、

#page>div.logo+ul#navigation>li*5>a{Item $}

と入力してTabキーを押すと、

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

と表示されます。え、何を入力しているかサッパリだって？

大丈夫です、実際に手を動かして開発していく内にすぐに慣れます。色々と便利なショートカットがありますので詳細は公式ページをご覧ください。

atom-live-server

atom-live-serverを導入すると、HTMLファイルやCSSファイルの結果をリアルタイムに確認する事が出来ます。

ファイルを変更する度にリロードして結果を表示する必要がなくなるので、作業が格段に早くなります。

autocomplete-(使用言語)

autocomplete-（利用言語）は、途中までキーを入力すると、残りの文字を推測して入力を補助してくれます。メールを送る時に、アドレスを全部打ち込まなくても表示されますよね？

あなたが使用するプログラム言語のautocompleteを入れておけば良いです。

pigments

pigmentsはカラーコードを色付けしてハイライトしてくれます。

新しいものを作り上げようとすると、

bracket-matcher

bracket-matcherは対応するカッコ（⇦ここを ハイライト⇨）を表示したり、ジャンプする事が出来ます。