atomをフロントエンド開発用に色々パッケージを入れる
備忘録。 フロントエンドを学びたいのでその第一歩として、良い感じの開発環境を作ります。 Sublime Textとかもありますが、atomが好きなので、これで行きます。
不足だと感じたら逐一追記予定。
目標
atomパッケージを色々入れて、フロントエンド開発に耐えうるようにする。 足りなくなったらたす。
パッケージ一覧
カテゴリー名は個人の感性で分けてます。 2019/05/02現在のものです。
エディタ系
pigment
ソースコード上のカラーコードの背景色がカラーコードに対応したものに変わります。 色味の参考になる。
less-than-slash
htmlの閉じタグが、</で自動挿入されるようになります。
highlight-line
現在使用している行がハイライトされます。
highlight-colmun
現在使用している列がハイライトされます。 インデントを探すのが楽になる。
indent-guide-improved
同じくインデントガイド。 役割が被りそうだけど用途が違いそうなので、両方入れてます、このみ。
highlight-selected
エディタ部分で選択したものがハイライトされます。 atomでは選択したものと同名のものが自動でハイライトされるので、同名のものがどこにどれくらいあるかわかるようになります。
emmet
htmlとcssのよくある記法のショートカットキーが追加できます 色々あるので詳細はいろんなブログを読むといいと思います。(自分も全部使いこなせていないので)
color-picker
カラーピッカー。 色をビジュアル的に確認しながら指定できます。
trailing-spaces
行末についているいらないスペースをハイライトしてくれます。 コード上問題ないですが、いらないものは消したいので。 atom.io
show-ideographic-space
全角スペースを発見するためのパッケージ。 atom.io
minimap系
minimap
エディタの端にソースコードの概要図?が出るようになります。 縦に長くなったソースコードの外観を俯瞰できるので便利。 以下のminimap系のパッケージを入れることで一層便利になってきます。
minimap-highlight-selected
エディタ部分で選択したものがハイライトされます。 atomでは選択したものと同名のものが自動でハイライトされるので、同名のものがどこにどれくらいあるかがminimapで可視化されるといった感じ。
minimap-find-and-replace
エディタ部分で、検索&置換の対象になるものがハイライトされます。
minimap-pigment
エディタ部分で、pigmrntで色がつけられたものが、minimap上でも色がつくようになます。
その他
japanese-menu
メニューの日本語化
atom-beautify
コードのインデントなどを自動で行なって綺麗にしてくれるやつ。
file-icons
左端に出てくるプロジェクトやファイル名の横に、ファイルの拡張子を示すアイコンが追加されます。
browser-plus
atom内でchoromeを開くことができます。
macであればCtrl+option+oでブラウザがタブで開きます。
右上の⚡️マークを押した状態で、元のファイルを更新すると、 そのタイミングでブラウザを読み直してくれます。
browser-refresh-on-save
同じくファイルを保存した時にブラウザを読み直してくれるやつ。 こちらはatom外のchromeやfirefoxなどを指定できます。 保存時にエラーを吐く場合、リフレッシュ対象のブラウザがないことがあるので、設定から必要なものだけをチェックしてあげると精神衛生上いいと思います。 保存時にリフレッシュするファイルの形式も指定できます。
