Atomのおすすめパッケージをインストールして拡張してみる

AtomをインストールしてからAtomの拡張をするためにパッケージを初見でインストールしてみました。

Atomのパッケージのおすすめを調べて使えそうなパッケージをインストールしてみたので、もしAtomで使ってみたいパッケージがあったら拡張してみてください。

Atomのパッケージインストール方法

Atomのパッケージをインストールする方法を先に説明します。

Atomを開いたら、Macの場合は画面左上のリンゴマークの横「Atom」から「環境設定」を選びます。まだAtomを日本語化してない場合は「環境設定」ではなく「performance」を選択します。

windowsの場合は、Atomを開いてAtomの画面左上にある「file」を選択。そして「setting」を選ぶとAtomパッケージのインストール画面にいけます。

そうするとパッケージインストールできる画面が表示できます。

それぞれ開いた画面に「＋インストール」英語なら「＋install」があるのでクリック。

そしてパッケージを検索できるボックスがあります。

このsearchboxにAtomで使いたいパッケージ名を入力してパッケージのインストールをします。

Atomでおすすめのパッケージ

Atomにパッケージをインストールする方法が分かったので、実際にAtomエディタにパッケージをインストールします。

Atom初見なので、まずはおすすめのAtomのパッケージを調べたのですが、おすすめのパッケージが多くて迷いました。

それなので平均しておすすめに多かったAtomのパッケージをインストールしました。

パッケージをインストールしてからAtomを使ってみると、さすがおすすめだけあって便利にAtomが使えます。

そしてAtomの拡張は使いやすい。

HTMLプレビューがエディタ上で出来る

インストールパッケージ名　「atom-html-preview」

Atomのパッケージ「atom-html-preview」はAtomのエディタ上でhtmlファイルのプレビューを見ることができます。

atom-html-previewをインストールしてからのプレビューの見方

パッケージから「preview-html」をえらんで「enable preview」で見ることができます。

パッケージのインストールは「＋インストール」または「＋install」からatom-html-previewを検索してインストールするだけです。

atom-html-previewは、今回のおすすめパッケージで紹介するAtomにツールバーを設置するパッケージをインストールすると、htmlのプレビューがAtomのエディタ上でさらに簡単にできるようになります。

ファイルにアイコンをつける

次のAtomのパッケージ名　「file-icon」です。

ツリーに表示されるファイルのアイコン「htmlファイル」「cssファイル」「画像ファイル」などのAtomで開いたファイルの拡張子ごとにアイコンをつけてファイルが見やすくなります。

file-iconパッケージのインストールも同じく、「＋インストール」または「＋install」からパッケージ名を検索してインストールです。

インストールすると自動でファイルにアイコンが表示されます。

コードをハイライトする

インストールパッケージ名　「highlight-selected」

開いたAtomエディタ内で選択した範囲のコードをハイライト表示してくれます。

確認したい複数の単語をハイライトできるのでhtmlならdivとかクラス名とか要素を絞り込むとき、cssならセレクタやプロパティ、値もハイライトできるので便利なパッケージです。

Atomエディタにパッケージをインストールしてからの使い方は、ダブルクリックするとハイライトできます。

それから、すべてのマーカーを選択する場合はコマンドパレットに「highlight-selected:select-all」を選択すると、ずらっと選択した単語がハイライトできます。

全角スペースの表示ができる

インストールパッケージ名　「show-ideographic-space」

show-ideographic-spaceは全角スペースを□で表示してくれるパッケージです。

うっかり日本語入力がONのままでスペースを叩いてしまうと、全角スペースになってしまってスペースが表示されないので半角スペースとの区別がつきにくいです。

そのためインストールするとAtomのエディタ上でスペースの間違いを気づけるようになります。

ちなみに上記のcssをstyle.lessに書いて「バツ」の部分を変更したらスペース部分は四角から変更も可能でした。

カラーピッカーが使える

インストールパッケージ名　「Color-picker」

Color-pickerは色の指定が楽になります。

パッケージをインストール後の使い方は、エディタ画面で右クリックで「Color-picker」メニューがあるのでクリック。

もしくは「command＋shift＋c」でカラーピッカーが表示できます。

そして表示したカラーコードをクリックするとカラーコードの変更が簡単にできます。

CSSにカラーコードをつける

インストールパッケージ名　「pigments」

pigmentsをインストールするとCSSの文字にカラーコードがつきます。

それから「pigments: Find Colors」をコマンドパレットに入力すると、プロジェクト内のすべての色を検索できます。

コマンドパレットを使った場合はCSSファイル内で何個のカラーを使ってるかが分かるし、使用してるカラーが何行目で使われてるかも分かります。

さらに何行目か分かるだけでなくて、そのカラーをクリックすると該当のCSSの行まで飛ぶことができます。

Atomにツールバーを設置する

Atomにツールバーを設置するときは、パッケージを2個インストールします。

インストールパッケージ名

「tool-bar」

「tool-bar-atom」

tool-barをインストールでツールバーの使用を有効にする。

tool-bar-atomでtool-barのメニュー項目をインストールする。のようなインストール仕様です。

インストールしたツールバーで出来ること。

• 設定画面表示
• ファイルを開く
• 現在の使用フォルダ場所の表示
• 画面の分割
• プレビューの表示と非表示
• 全画面切り替え
• Toggle Menu表示

Atomのツールバーは他にも探すと組み合わせやカスタム次第で、さらに拡張追加できるようです。

個人的にはtool-bar-atomが便利でした。

コードを自動インデントしてくれる

インストールパッケージ名　「atom-beauty」

atom-beautyのパッケージはインストールすると、Atomで書いたコードを自動でインデントしてくれて綺麗(beauty)に行をそろえてくれます。

だいぶたくさんの言語がbeautyにできるようです。

Atomでテーマもインストールしたい場合

Atomの設定画面で、これまでの説明ではパッケージのほうでSearchしてパッケージインストールしてましたが、テーマも変えたい場合にはパッケージ横の「テーマ」に切り替えてください。

そうするとAtomのテーマ候補が下に表示されるので、好きなテーマをAtomにインストールできます。

最近はかっこいいテーマよりも目に優しいテーマを個人的にはインストールしてます。

参考になるか分かりませんが現在使用してるテーマ

• テーマ「nova atom」
• シンタックス「chester atom」

もしくは

• テーマ「nova atom」
• シンタックス「nova atom syntax」

インストールすると黒板みたいになって、目に優しそうなので最近のおすすめテーマです。

テーマについては目に優しいを追求したいならコメント行のカラーも変更できます。

style.lessから以下を追加してコメント行に好きなカラーを指定できます。

atom-text-editor::shadow {
  .comment {
    font-style: normal;
    color: rgb(14, 182, 96);
  }
}