コーディング作業を加速するAtom活用法

  • 公開日:
  • 更新日:
atom

この記事の目次

はじめに

Atomとは、GitHubが開発したソースコードエディタです。Mac・Windows・Linuxに対応しており、無料で使うことができます。

設定画面

Macの場合は「Command + ,」ショートカット、Windowsの場合は「Ctrl + ,」ショートカットで設定画面(Settings)が表示されます。

Settings

コアパッケージとコアテーマ

Atom本体をインストールすると、77個のパッケージもインストールされます。これらのパッケージを「コアパッケージ(Core Packages)」と呼びます。同様にAtom本体とともにインストールされるテーマを「コアテーマ(Core Themes)」と呼びます。

パッケージとテーマのインストール方法

設定画面で[Install]を選択すると、次の画面が表示されます。

install

右側のボタンで、パッケージの検索とテーマの検索を切り替えることができます。

自分が使いやすい環境を作る

コーディングに適したフォントを設定する

エディタで表示するフォントは、コードの可読性を左右する重要な要素です。今回は、日本語にも対応したコーディング用フォント「Source Han Code JP」を設定してみます。

  1. 以下のURLから「Source Han Code JP」をインストールします。
    https://github.com/adobe-fonts/source-han-code-jp
  2. 設定画面の[Settings]の[Font Family]にフォント名を入力します。

font

デフォルトのフォントサイズは14pxです。フォントサイズを変更したい場合は、[Font Size]に値を入力して調整します。

インデントを設定する

インデントの設定は、設定画面の[Settings]でおこないます。

indent

インデントの幅を設定したい場合は、[Tab Length]に値を入れます。デフォルトの値は4で、半角4文字分がインデントの幅になります。また、[Tab Type]では、インデントの種類を「auto」「soft」「hard」から選択することができます。「soft」の場合はインデントに半角スペースを利用し、「hard」の場合はインデントにタブを利用します。

所属しているプロジェクトのコーディング規約にインデントのルールがある時は、そのルールに合わせてインデントを設定しておくと便利です。

自分に合ったテーマを設定する

設定画面の[Themes]からテーマを設定できます。Atomで設定できるテーマは、エディタ全体のスタイルを決める「UI Theme」とシンタックスハイライト等を決める「Syntax Theme」の2つに分けられます。

theme

デフォルトでは、4種類の「UI Theme」と8種類の「Syntax Theme」が用意されています。また、テーマをインストールして使うこともできます。

文字数の目安となる縦線を非表示にする

エディタ内に半角80文字の目安となる縦線が表示されます。

wrap1

この線はコーディング作業では必要ないので非表示にします。縦線を非表示にするには、コアパッケージの「Wrap Guide」の[Disable]ボタンをクリックします。

wrap2

最終行で改行が自動的に入らないようにする

初期設定では、ファイル保存時に最終行に改行が自動的に入ります。Gitなどのバージョン管理システムでファイルを管理している場合、編集したファイルをコミットする際に最終行に差分ができることがあります。

自らが意図しないところで差分ができてしまうのは好ましくないので、自動的に改行が入らないように設定します。

まず、コアパッケージの「whitespace」の[Settings]をクリックします。

whitespace1

次に、[Ensure Single Trailing Newline]のチェックを外します。

whitespace2

2016年5月24日追記:拡張子に対応する言語を設定する

例えば、拡張子が.incの場合、デフォルトではそのファイルの言語はPHPになります。ただし、携わっている案件によっては、拡張子.incのファイルの言語をHTMLにしたいこともあるかもしれません。

そのような場合には、file-typesパッケージを使って、拡張子に対応させたい言語を設定することができます。file-typesパッケージをインストールした後、Macの場合は[Atom]→[Config…]、Windowsの場合は[File]→[Config…]からconfig.csonを開きます。その後、config.csonに以下の記述を加えます。

"*":
  "file-types":
    inc: "text.html.basic"

コーディングを省力化する

Emmetをインストールする

Emmetは、独自の省略記法を用いてHTMLやCSSのコーディングを高速化するためのプラグインです。

Emmetのlang属性を設定する

Emmetを使ってhtml:5!を展開すると、以下のコードが記述されます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 
</body>
</html>

これだと、htmlタグのlang属性を"ja"に書き換える必要があります。この手間を省くために、設定画面の[Open Config Folder]ボタンをクリックしてTree Viewを表示し、[.atom]→[packages]→[emmet]→[node_module]→[emmet]→[lib]→[snippets.json]を開いて、以下のように修正します。

{
    "variables": {
        "lang": "ja",
        "local": "ja-JP",

autocomplete-pathsをインストールする

autocomplete-pathsは、imgタグのsrc属性などでパスを入力する際に、ディレクトリ名やファイル名を補完してくれます。

Windowsの場合、スラッシュではなくバックスラッシュが入ります。これでは具合が悪いので、パッケージを修正します。

設定画面の[Open Config Folder]ボタンをクリックしてTree Viewを表示し、[.atom]→[packages]→[autocomplete-paths]→[lib]→[paths-provider.coffee]を開きます。92行目に以下の記述があります。

result += path.sep

これを次のように変更します。

result += '/'

スニペットを設定する

よく利用するコードはスニペットとして登録しておくと便利です。Macの場合は[Atom]→[Snippets…]、Windowsの場合は[File]→[Snippets…]を選択すると、snippets.csonファイルが表示されます。このファイルにスニペットを記述していきます。

例えば、clearfixをスニペットとして登録したければ、snippets.csonファイルに以下の記述を加えます。

'.source.css':
    'clearfix':
        'prefix': 'cl'
        'body': """
.clearfix {
    content: "";
    clear: both;
    display: block;
}
            """

prefixで指定したコードを入力すると、下図のように補完候補として表示されるようになります。

snippets

スニペットの具体的な登録方法については、スニペット登録 | Smartが参考になります。