Atomのパッケージを使ってみる

Atomのパッケージで便利そうなものをいくつか試してみます。

インストール方法

Atomを開いて、ファイル > 環境設定 を選択します。

左メニューの一番下の「インストール」をクリックします。

インストールしたいパッケージ名を検索ボックスに入力して、「パッケージ」をクリックします。

検索結果に表示されるので、インストールをクリックします。

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

パッケージ一覧

共通

file-icons

ファイルの種類ごとにアイコンを表示する。

japanese-menu

メニューを日本語にする。

show-ideographic-space

全角スペースを表示する。

highlight-selected

選択した単語がファイル内にある場合にハイライトする。

Sublime-Style-Column-Selection

Altを押しながらドラッグで矩形選択ができる。

コーディング関連

emmet

Emmetの記法が使えるようになる。

autocomplete-paths

パスの自動補完。

pigments

CSSで色指定している部分の背景にその色を表示したり、色の形式の変換をしたりできる。

色を指定している場合の背景。

色の形式を変更する場合、右クリックからPigments > Convert to XXX を選択します。

rgba形式に変換できました。

docblockr

ドキュメントブロックの自動補完。
「/**」を入力してエンターを押す。

wordpress-api

WordPress 関数の入力補完。

minimap

minimap

コードの全体図を表示する。

minimap-autohide

minimapを自動で表示・非表示にする。

minimap-highlight-selected

highlight-selectedのハイライトをminimapにも表示する。

git

git-time-machine

Gitのログを表示する。
上部メニューのパッケージ > git-time-machine > Toggle for current file から表示切り替え。

blame

Gitのblameを表示する。
上部メニューのPackages > Blame > Toggle から表示切り替え。

入力補完

autocomplete-sass

Sassの入力補完。

javascript-snippets

JavaScriptの入力補完。

jquery-snippets

jQueryの入力補完。

linter

linter

linterのベース。
言語毎に別途パッケージが必要。

linter-ui-default

linterのエラーを表示する。

linter-htmlhint

HTMLの文法をチェックする。

linter-csslint

CSSの文法をチェックする。

linter-jscs

JavaScriptの文法をチェックする。

linter-eslint

ECMAScriptの文法をチェックする。

linter-sass-lint

Sassの文法をチェックする。

linter-php

PHPの文法をチェックする。

linter-phpのインストール後、PHPのパスを変更する必要があります。
ファイル > 環境設定 の画面で、左メニューにあるPackagesを選択して、linter-phpを探します。

PHP Executable PathにPHPの実行ファイルのパスを追加します。
今回はXAMPPを使用しているので、「C:\xampp\php\php.exe」としました。

PHPファイルで間違った文法を記述してみて、エラーが表示されたらOKです。
　

【参考サイト】

• 【超おすすめ！！】Atomのパッケージ、テーマ、キーバインディング、設定を紹介してみる（※随時更新） – Qiita
• 【Atom】開発が10倍捗る！おすすめ設定・パッケージ・ショートカットをご紹介 | TECH::NOTE | プログラミングをはじめる全ての人に
• Atomでhtmlとcssの間違いチェックをしてくれるパッケージlinterのインストール方法
• Atomの環境構築(随時更新予定) – Qiita
• WordPressのテーマやプラグイン開発のためにAtomに導入したパッケージ（2016年版） – OTTAN.XYZ
• 【Atom】linterの設定方法