開発環境ーATOM

【2020年版】痒い所に手が届くATOMのおすすめ5つのプラグイン

どうもsarukyoです。

以前YoutubeでATOMのおすすめプラグインの動画を出しましたが、

それが意外にも再生回数があるので

今回は記事でまとめておきます。

【開発環境】ATOMのおすすめパッケージインストール4選!

今回インストールするものをまとめたものはこちらになります

https://youtu.be/w6vryB0xOgI

なぜ動画では、「4選」にまでしぼっているのかというと・・・

10以上の物がほとんど・・・27もいれてどうするんですか・・・

なぜこのようなプラグインの数はいけないのか?

WordPressのプラグイン同様に、atomエディターも20個も30個も便利だと思って

プラグインを追加してしまうと、メンテナンス不可能、何を入れたかわからない、結局多すぎて全部使えない

プラグインを複数挿入を推進しているサイトは「とりあえず、入れておこう」とよく書いてありますが

衝動買いと同じで「とりあえず買ったもの」は使いません。必要だから入れるんです。

atomの適切プラグイン本数は

人それぞれですが、多くても「20本」は超えないようにしましょう

私の場合だと、何が入っているのかわからなくなり管理できません。

自身で管理できる範囲に収めておくことが大切です。

例えば、私が入れているプラグイン「atom-beautify」がありますが

インデントされて整列される必要がない方にとっては不要なプラグインですが、私はコードがごちゃごちゃだと

見づらくて仕方がないので「必須」です。

ただ、WordPressなどと違ってatomはローカル環境で動作させるものなので何でもかんでも入れちゃえって方も少なくないです。

ATOMに入れておくべきおすすめプラグイン5選

以下のプラグインは私が入れている物を基にしております。

atom-beautify

先ほど前述した通り「インデント」を自動で行ってくれます。

きちんと整列していないとコードが見づらくていやだ!という方には必須です。

atom-beautify

show-ideographic-space

次は、スペースが半角なのか全角なのかを判別できるプラグインです。

ついつい日本語で書いた後に、そのまま「スペース」を押すと、全角のままになっていることがあります。

ついうっかり見落としてしまう全角スペースを□で確認できるので非常に便利です。

show-ideographic-space

pigments

こちらは、入力したHTMLの色が可視化されてわかるようになっています。

rgbで数値を指定しても「ピン」とこない私みたいなのにもぴったりです。

pigments

color-picker

こちらも色関係です。

実際にその場で、カラー表を確認しながらrgbを選択することができます。

以前までは、いちいちサイトで確認しながら数値を合わせていましたがこれを知ってからは作業効率が上がりました。

color-picker

highlight-column

最後は私が一番入れて劇的に変わったな・・と思うプラグインです。

これはどの行にインデントがされているのかが一発で可視化されているのでわかるプラグインです。

入れ子要素や、複雑なコードになってくるとインデントや閉じタグをどこにおいていいのかわからなくなります。

どこに置くのか悩む時間を減らしてくれるので、「効率化」できました。

まとめ

他にもいろいろなプラグインがありますが、入れておいた方が得する必須のプラグインを「5つ」紹介しました。

人によっては他のプラグインを入れておいた方がいい場合もありますので、ご自身が必要だと思ったときに追加するのがベターです。