26
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-03-05

#はじめに
今回は初心者が感動した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
オートコンプリートにプロジェクト内のファイルパスを追加してくれるパッケージです。
autocomplete-paths

###atom-html-preview
リアルタイムでブラウザプレビュー機能を追加するパッケージです。ソースを変更するとリアルタイムで反映されるので、Atomとブラウザの更新・確認を行ったり来たりせずに済みます。
ただしブラウザに左右される属性などは表示されなかったりするので注意してください。
atom-html-preview
###color-picker
カラーピッカー機能を追加するパッケージです。
色コードの直感的な選択が出来ます。現在のカラーと選択中カラープレビューが違うので、とても分かりやすいです。
出力形式も選択出来るので、形式変換したい時にも便利です。
color-picker
解像度が低くなっています。ご了承ください。

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

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

###pigments
色情報に関して様々な機能を提供してくれるパッケージ。
色コードをキャッチして、バックグラウンドにその色を付けてくれる機能です。
コードがどんな色なのかを見て、理解することが出来るので、とても便利です。
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の機能ではないでしょうか?
作っていただいた人に感謝ですね〜☺️

26
27
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?