Atomをいれたら設定しておきたい。開発効率をあげるのに有効なパッケージ・設定を紹介します。

▼この記事をSNSでシェアする▼

スポンサーリンク

スポンサーリンク

Atomをなんとなくいれたけど、使いこなせていない・・・

なにも設定しないと、いろいろとコードが読みにくかったりで、開発効率のいいエディタとは言いにくい感じがします。

Atomはカスタマイズの柔軟さが強みです。

おすすめのテーマ

Atomの外観(文字や背景のスタイル)はSettingsから編集できます。

AtomのメニューからPreferencesを選ぶと開けます。

ThemesタブからUI ThemeとSyntax Themeを選択します。

デフォルトだとOne Darkが選ばれていますが、ぼくはAtom Darkに変えています。Atom Darkのほうが文字がやや細く主張が弱く個人的に見やすい。

Slack-uiというパッケージをいれると白地に黒字にできたりするのですが、Platform ideというターミナルの色似合わないのでAtom Darkに落ち着いています。

おすすめの設定

こちらはパッケージ入れずにすぐ設定できるのですが、インデントを可視化しておいたほうがHTMLなどなどのタブが見やすいので、設定しておきましょう。

Settingsの画面からEditorタブを選択し、Show Indent Guideのチェックボックスにチェックをつけましょう。

チェックをつけると、こんな感じでインデントが同じところが縦線で可視化されてみやすくなります。

おすすめのパッケージ

ここからは実際のプロジェクトの見た目やコードの見た目にかかわるパッケージの設定です。

color-picker

CSSの色どうしよう?って考えながらネットで色のコード検索しながら吟味するの大変じゃないですか?

Atomでは色を選択してわかりやすくコードを入力できます。

Settingsの画面からinstallのタブを選び、「color-picker」と入力し、「install」をクリックするだけで有効化されます。

有効化されたら、色のプロパティを入力してみましょう。

色の情報を書き換える場合は、カーソルをあて、右クリックから「color-picker」を選択

※shift + command + cでもいけます。

するとこんな感じで色を選ぶと、コードを簡単に入力できます。

 

file-icons

デフォルトだとファイルは一様にドキュメントのアイコンが割り振られていますが、これだとどれがどのファイルかよく見ないとわからないですよね。

Settingsの画面からinstallのタブを選び、「file-icon」と入力し、「install」をクリックするだけで有効化されます。

無効化したいときは「disable」をクリック

変わったのがわかるでしょうか?

CSSのファイルの名称の左にオレンジ色のマークとかがついてますよね?

highlighted-selected

これを入れると、カーソルの当たっている変数がほかにどこで

使われているかが明快になります。

デフォルトでも、色が変わっていたりするのですが、こちらをいれたほうが変数が囲われて強調されてわかりやすいです。

Settingsの画面からinstallのタブを選び、「highlight-selected」と入力し、「install」をクリックするだけで有効化されます。

無効化したいときは「disable」をクリック

有効化するとこんな感じでrequestというカーソルの当たっている文字が他にどこにあるのか明快にわかるようになります。

デバッグの方法も大切

エディターの便利な機能を追加するのも大切ですが、効率の良いデバッグを行うことも大切です。

開発で重要なデバッグの方法を下の記事でまとめています。

スポンサーリンク


関連記事

▼この記事をSNSでシェアする▼

フォローする

メニュー・主な記事カテゴリ

おすすめ特集!




「ゆとり鳥日記」について
ITを中心に関心の赴くままに好きなように書いていく雑記ブログ!管理人が二人います。
◆フクロウ(ITコンサル)
◆santaka(SE)

詳しいプロフィール
お仕事の依頼・ご要望

ゆとり鳥日記をBTCで応援する