【初級エンジニア向け】Atomの便利機能&パッケージご紹介

  • このエントリーをはてなブックマークに追加

テキストエディタでAtomを使っている人は多いですが、

最初のうちは「使いづらいない〜」と感じることも多いと思います。

しかしAtomには意外と知られていない便利機能や、

便利なパッケージがたくさんあります。

今回は私が個人的に重宝している、Atomの便利機能&パッケージを紹介します。

 

とりあえずやっとけ!日本語化

初めてAtomをインストールすると、英語だらけでげんなりしますね。

ということでまずは日本語化をしましょう。

 

パッケージ:japanese-menu

左上から「Atom」→「Preferences」を選択

 

左下の「Install」を選択

検索ウインドウに「japanese-menu」と入力

一番上に出てきたものの「Install」をクリック

 

これで終了です。

全てではないですが、メニュー部分が日本語化されました。

これでだいぶ取り付きやすくなりましたね。

 

全角スペースを見落とすな!

ソース内に全角スペースが入力されていると、エラーになることがありますね。

しかしAtomはデフォルトだと全角スペースが入っていても見えません

(半角スペース2字と見分けがつきません)

 

そこで全角スペースを可視化するパッケージを入れましょう。

パッケージ:show-ideographic-space

前述したものと同じ手順ですが、すでに日本語化されていたら

「Atom」→「環境設定」→「インストール」の順で進みましょう。

 

検索ウインドウに「show-ideographic-space」と入力して、

インストールすれば完了です!

全角スペースが「□」で表示されるようになりました。

 

インデントなんかに時間を取られるな!

ソースコードが長くなればなるほど、インデント(字下げ)

グチャグチャになって見辛くなってしまいますね。

そんな時に便利なパッケージと、機能を紹介します。

 

パッケージ:language-html

インデントされている部分に線(ガイドライン)を表示して、

見やすくしてくれます。

設定方法は

「環境設定」→「パッケージ」と進んで、

「インストール済みのパッケージ」に「language-html」と入力します。

「コアパッケージ」の所に表示された「language-html」の「設定」をクリック。

下の方に「インデントガイドを表示」という項目があるので、これをチェック

 

ガイドラインが表示されて見やすくなりました。

 

便利機能:Auto Indent

ガイドラインが表示されるようになっても、やはりインデントを整えるのは大変ですね。

そんな時は自動でインデントを整えてくれるAuto Indent」という機能を使いましょう。

まずはインデントを整えたい箇所を選択します。

全て整える場合は「Control + A」(Macの場合は「⌘ + A」)で全選択します。

続いて「Control + Shift + P」(Macの場合は「⌘ + shift + P」)を押すと

検索ウインドウが開きます。

そこで「Auto」と入力すると「Auto Indent」という項目が出てくるので、これをクリック。

これでインデントが自動で整えられます。

 

この機能を使う時は注意点があります

それは、「インデントの入力規則が決まっているのか確認する」ということです。

プロジェクトによっては、「コーディング規約」といったもので、

「インデントは半角スペース4字」

もしくは

「インデントはtabスペース1字」

と言った感じで決められている場合があります(※)。

 

Atomの「Auto Indent」を使うと「tabスペース1字」でインデントが入力されます。

もしコーディング規約でインデントの入力が「tabスペース1字」以外で定められていたら、

次に紹介する「検索機能」と「置換機能」を使って、まとめて置換してしまいましょう。

 

 

(※コーディング規約がなくても、見やすさを考えて、

同一プロジェクト内では統一しておいた方がいいですね。)

 

探す手間を省け!検索機能

「この変数どこで宣言されているの?」

「この関数はどこで使われているの?」

というように、特定のキーワードを探す時は地道に目視で探すのではなく

検索機能」を使いましょう。

 

便利機能:ページ内の文字列検索

Control + F」(Macの場合は「⌘ + F」)で、

ページ内を検索するエリアが出てきます。

「検索文字列」の所に検索したい文字列を入力して、「検索」ボタンを押すと、

ページ内にあるその文字列が強調表示されます。

また、続けて「検索」ボタンを押すと(もしくは「Enter」を押すと)

ページ内にある次の検索結果にジャンプしてくれます。

 

便利機能:プロジェクト内の文字列検索

現在開いているページ内だけでなく、

開いているプロジェクトフォルダ内の全てを検索することも出来ます。

Control+ Shift+ F」(Macの場合は「⌘+ Shift + F」)で、

先ほどと同じような検索エリアが出てきます。

この状態で検索すると、別タブが開いて現在開いているプロジェクトフォルダ内、

全てを検索してくれます。

「ページ内検索」と「プロジェクト内検索」では、

下に表示されている「置換文字列」の所に別の文字列を入力すれば、

一気に置換することも出来ます。

これを使って先ほど書いたように「tabスペース1字」を「半角スペース4字」に

置換することも出来ます。

 

しかし、置換をする時には十分注意が必要です。

本来は置換してはいけないような文字列まで置換してしまい、

思わぬエラーが起こる可能性があるからです。

便利な機能に頼りすぎて確認を怠らないようにしましょう。

 

これ動いてるの?スクリプトで確認!

最後はAtom内だけで処理の実行結果を確認できるscriptの紹介です。

これを使うと、画面で確認しなくても、Atom内で処理の実行結果やエラーの確認が出来ます。

パッケージ:script

パッケージのインストール画面で「script」と入力すると出てくるので、インストールしてください。

あとは処理を確認したい部分を選択して、

Control+ I」(Macの場合は「⌘+ I」)で、実行結果を確認出来ます。

エラーがある場合はこのようにエラーメッセージが表示されます。

(画像はセミコロンが抜けているためsyntax error)

また、特定の箇所を選択しない状態で実行すると、

ページ内全ての処理を確認することが出来ます。

 

まとめ

いかがだったでしょうか。

Atomには他にも便利な機能やパッケージ、

また便利なショートカットキーなども色々あります。

「Atom 便利機能」とかで検索すると、色々出てくるので、

ぜひ探して見てください。

 

Atomに限らず、このようなツール全般に言えることですが、

このようなものには自分が知らない隠された便利機能といったものが無数に存在します

PCやスマホなどにも言えますね。

 

どんなものでも、少しでも不便に感じたり「使いづらいな」と感じた時は、

そのままにするのではなく、便利に使える方法がないか調べてみるのが良いと思います。

 

それではまた!