Atom初心者が感動して泣いた超オススメな機能

6673 ワード
ATOM ATOM テキストリンク

はじめに

今回は初心者が感動したAtomの超便利機能をいくつか紹介したいと思います。
と、言ってもこの記事は完全に個人的な目的で書こうと思ったものなので、参考になるかわかりませんが、興味のある方は是非ご覧ください。

この記事を書きたいがために、最初に書いてみた記事はこちら。
初心者の初心者による初心者のためのAtom

一括でパッケージをインストールする方法

これから必要なパッケージをインストールする際に、パッケージ毎にインストールするのは大変ですよね...
そこでオススメするのは、コマンドラインで使える apm を使う事です！

順番が前後しますが、以下に紹介するパッケージはこちらに全てまとめてあります。

packages.txt
autocomplete-paths
atom-html-preview
color-picker
emmet
maximize-panes
pigments

使い方

  1. 自分の欲しいパッケージを「packages.txt」として、適当な所に保存して下さい。 紹介する全てのパッケージをインストールされる方は、上に記載してあるpackages.txtを使用してください。
  2. 保存が出来たら、コマンドラインを扱うソフトを起動します。
  3. 起動したら「packages.txt」を保存したディレクトリに移動して以下のコマンドを実行して下さい。
apm install --packages-file packages.txt

これで「packages.txt」に書かれたパッケージを一括でインストールする事が出来ます。

超オススメなパッケージ

autocomplete-paths

オートコンプリートにプロジェクト内のファイルパスを追加してくれるパッケージです。

atom-html-preview

リアルタイムでブラウザプレビュー機能を追加するパッケージです。ソースを変更するとリアルタイムで反映されるので、Atomとブラウザの更新・確認を行ったり来たりせずに済みます。
ただしブラウザに左右される属性などは表示されなかったりするので注意してください。

color-picker

カラーピッカー機能を追加するパッケージです。
色コードの直感的な選択が出来ます。現在のカラーと選択中カラープレビューが違うので、とても分かりやすいです。
出力形式も選択出来るので、形式変換したい時にも便利です。

解像度が低くなっています。ご了承ください。

emmet

HTMLやCSSのコーディングの簡略化入力が可能になるEmmetがAtomでも使うことができます。

maximize-panes

ペインを分けて編集している時に、「このペインをちょっと大きくしたい」なんて時はありませんか？
そんな時は大抵、境界をドラッグして、ペイン大きさを変えますが、少し面倒ですよね...
このパッケージを使えばその面倒な作業がなくなります。
ショートカットを押す事で現在作業しているペインを最大化する事が出来ます。

pigments

色情報に関して様々な機能を提供してくれるパッケージ。
色コードをキャッチして、バックグラウンドにその色を付けてくれる機能です。
コードがどんな色なのかを見て、理解することが出来るので、とても便利です。

open-on-github

AtomはGitHub社が開発したテキストエディタです。
このパッケージはデフォルトでインストールされているコアパッケージです。

open-on-githubのコマンド一覧

コマンド 操作
Open on GitHub: Repository github.com上のリポジトリを開く
Open on GitHub: File github.com上のファイルを開く
Open on GitHub: Blame github.com上のファイルのBlame Viewを開く
Open on GitHub: History github.com上のファイルのHistory Viewを開く
Open on GitHub: Branch Compare github.com上の現在のブランチの比較ページを開く
Open on GitHub: Copy Url 現在選択している行番号を含んだgithub.comのURLをコピーする

超オススメなショートカット

複数カーソル

文章内の任意の複数行に、1回で入力することができます。

Mac Windows
⌘+複数クリック ^ +複数クリック

行の複製

選択中の行を複製します。

Mac Windows
⌘⇧D ^⇧D

上で紹介した複数カーソルを利用すると、複数の行を一度に複製することもできます。

選択中の行を上または下へ移動

選択中の行を行の上または下に移動できます。

Mac Windows
⌘^↑または↓ ^ ↑または↓

候補となる全ての文字を選択

このショートカットは、選択した文字の候補になる文字すべてを選択します。

Mac Windows
⌘^G Alt+F3

最後に

ここまで読んでいただきありがとうございました。
わたしは今、Webサイトを制作しているのですが、そういった人には、特に感動するようなAtomの機能ではないでしょうか？
作っていただいた人に感謝ですね〜☺️