⇩応援の１クリックお願いします！⇩
Contents
【Atom】ガチでオススメする！開発が５倍捗る拡張パッケージ【エディタ】
おはこんばんにちわ。
みなさんは開発をする際にどんなエディタを使っているでしょうか？
ちなみに私は開発する際は「Atom」を使っており、デバックやコピーソースなどにはサクラエディタを使っています。
なぜAtomかと言うと、自分で有名なエディタを一通り触ってみて一番しっくりきたからですね。
やはりAtomなどのオープンソースエディタを使っていて一番メリットを感じるのは
自分でやりやすいようにカスタマイズできる点が大きいと思います。
そこで今回は元エンジニアがオススメするAtomの拡張パッケージをご紹介していきます！
https://okanenoki.net/2020/03/19/kizi19/
通常Atomのメニュー欄は英語になっています。
慣れているや、英語が得意な人であれば特に問題ありませんが、そうでない方はメニューをパッと見たときになにが表示されているかわからないので、いちいち作業が止まったりしてしまいます。（私も英語が苦手何度か戸惑いました）
それを解決してくれるのがjapanese-menu
パッケージを入れて再起動するだけで日本語化してくれる優れものです。
file-icons
このパッケージはフォルダにあるファイルアイコンがわかいりやすく表示してくれるようになるものです。
例えばツリービューでは、次のように表示されます。
ソースツリー上に表示されるファイルの識別アイコンが見やすく可愛くなり、一目でどんなファイルなのかわかりやすいのがいいですね！
minimap
開発が進んでいくと、ソース行数が多くなり、「あのコードの場所ってどのへんだっけな・・・。」とファイル全体の位置が分からなくなる時ってありませんか？
それを解決してくれるのがminimapです。
インストールしておくだけで、右側にソース全体が表示されるようになり、一目でどの辺を開発しているのかがわかります。
atom-beautify
こちらのパッケージはインデント（字下げ）を自動で整形してくれるツールです。
HTMLなどでタグを打つ際にいちいちスペースキーやTABキーでインデントをする際めんどくさいなって思ったことはないでしょうか？
このパッケージを入れておくだけで自動でインデントを綺麗にしてくれるので主要な言語やモダンな言語をほぼ網羅してくれているのでWeb開発者に限らず、Atom使用者なら取り敢えず入れるべき便利パッケージです！
pigments
HTMLやCSSでカラーコードを入力している際にカラーコードの色が何色ってわかる人ならいらないかもしれないですが、そんな人はいないですよね？
一目でどんな色が使われているのかわかるので、フロントエンドの方やWEBデザイナー、コーディングをする人には必須ではないでしょうか。
highlight-selected
こちらのパッケージは洗濯した同一名称のタグやソースをハイライト表示してくれるものです。
こちらのGIFでは「editorView」を選択した時に他の「editorView」も強調表示されていいるものになります。
別タブに表示しているテキストもデフォルトで選択されるようになるので、同じ単語を探す際には簡単に見つけれるようになります。
color-picker
AtomでCSSを書くとき、色の指定をよくすると思いますが…
白だとwhiteとか#fff、黒だとblackとか#000、赤だとredとか#f00
こんな簡単な色はカラーピッカーなんか無くても指定出来ますが、微妙な色合いにはやっぱりカラーピッカーが欲しくなりますよね。
こちらのパッケージはカラーピッカーを入れることができます。
このパッケージを利用すれば…色相、明度と彩度、透明度３つのパラメータを動かして微妙な色合いをrgbaで指定出来ます。起動方法はMacだとCmd + Shift + C もしくは右クリックから｢Color Picker｣を選んでもOKです！
web-search
こちらのパッケージはAtom上で選択した単語をWeb検索できるようになるものです。
コピペしてきたソースを張り付けたり、わからなくなったコードをブラウザを開いていちいち検索する手間がなくなります。
画面を切り替えずに見ることができるので、意味を調べながらエディタを触れるのも利点ですね！
git-plus
ATOM上でatomとgitを連携させることができるパッケージです。
ターミナルを開いてgitを叩く時間をハブくことができます。
ATOMはGitHub製のエディタでもあるので、gitを扱う人には必須のパッケージでもあります。
まとめ
いかがでしたか？
様々なパッケージをご紹介してきましたが、他にも多くの便利なパッケージがあります。
自分でカスタマイズすることができるので、自分にあったパッケージを探してみてください。
プログラミングの独学に限界を感じたら・・・
会社をやめずにプログラミングを身に着けたい、独学に限界うぃお
プログラミングスクール「DIVE INTO CODE」では、これまでに多くのエンジニアを生み出してきた、本気の人のためのエンジニアスクールです。
その経験を通して、プログラミング学習に成功する人は、「覚えるのではなく、考える」「枝葉ではなく根幹を」「とにかくやり続ける」この3つが根付いている傾向を発見しました。
プロのエンジニアに必要なのは、あるべき状態と現状のギャップを見つけ、どうすればできるかを考え、決断し、実行する力。
実践的な課題を突破することで、イチから身につけることができます。
同期とのペアプロ、ディスカッションを通して、自分にない観点に気づき、学習スピードと効果を最大限に高めることで、切磋琢磨した間柄では、開発の委託や共同開発、採用内定などの実践機会が生まれています。
DIVE INTO CODEは上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。
DIVE INTO CODEでは、プログラミングを学びスキルアップ・転職を検討している方に向けて、体験会クラス・説明会を開催しております。 体験会クラスでは実際に手を動かしプログラミングを行います。
現在、来校せずにPCやスマートフォンからご参加いただけるオンラインでの説明会を開催しております。
