スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

「Atom」のインストールと便利なパッケージ(プラグイン)一覧

統合開発環境「Atom」のインストール方法と、私が使用している便利なプラグイン一覧です。
Atomは2014年にGithubから公開された次世代のテキストエディタです。
Atom

個人的にはHTML、CSS、JavaScript、PHPなどの統合開発環境として、2015年ごろまではeclipseを使用していましたが、現在はAtomを重宝しています。

さすがはGithubから出てるだけあって、最小限必要なベースの部分はしっかりしており、特に不便を感じずにコーディングやプログラミングができます。
さらに、多くのプラグインが日々アップデートされており、機能が改善され、より便利になっていくようすも楽しいです。

2018年にMicrosoftによるGit買収の報道がありましたが、このまま使いやすいAtomであり続けてほしいと願っています。

Atomをインストール

インストールは簡単です。
上記の公式サイトから最新のインストーラをダウンロードして実行するだけです。

OSもWindows、Mac、Linuxに対応しているので、環境を選びません。
私はWindows 7、8.1、10で使用していますが、問題なく動作しています。

便利なパッケージ(プラグイン)一覧

Atomは単体では最小限の機能しか用意されていないので、より便利に活用するためにはプラグインのインストールが必須です。
パッケージはAtomのメニュー「Settings」⇒「Packages」から簡単に検索、インストールすることができます。

日々多くのプラグインの開発が進んでいますが、その中でも私が必須として利用しているプラグインをまとめておきます。

A Color Picker for Atom 色指定してあるコードをカラーピッカーで編集できるようにしてくれます。RGBとHEXの変換などで便利です。
atom beauty コマンドを入力するとコードに自動でインデントを入れて、見やすく整形してくれます。
atom-minify JavaScriptやCSSファイルを圧縮します。例えば「ctrl + shift + m」を押すと「script.js」を圧縮して「script.min.js」で保存してくれます。
atom-w3c-validation HTMLコーディングに対して、ファイル保存時に自動でW3Cに準拠したValidationチェックをしてくれます。
autocomplete+ paths suggestions コード内での外部ファイルへのパスを補完してくれます
auto-encoding ファイルの内容を解析して日本語文字コード(UTF-8, shift-jis, EUC-JP)を含む文字コードを自動判定してファイルをオープンしてくれます。
Emmet plugin Atom editor Atom上でemmetを利用することができます
file-icons ファイル毎にそれを意味するアイコンを表示することで、ソースを扱いやすくしてくれます。
Japanese Wrap Package 日本語を含むファイルを編集するのをアシストしてくれます。
デフォルトのままだと改行位置、インデント、半角スペース、タブスペースの間隔などがおかしくなるので、このパッケージは必須です。
linter コードをチェックして、エラー内容をリアルタイムで表示してくれます。
各言語に応じてサブパッケージをインストールする必要があります。
私はお仕事にあわせて以下のパッケージをインストールしています。
linter-html, linter-csslint, linter-jshint, linter-php, linter-tidy, linter-xmllint
Pigments ソースに記述したカラーコードのバックグラウンドに、そのカラーをプレビュ表示します。
その場で視覚的にカラーの確認ができるので便利です。
Project Manager プロジェクト毎にソースのパスを保存、管理することができます。

※常時更新

パッケージの一括インストール

多くのパッケージを、1つ1つインストールするのは面倒です。
Atomには複数のパッケージを一括インストールするコマンドが用意されています。

例えば、今回紹介したパッケージを一度にインストールする場合、以下の内容のテキストファイル「packages.txt」を用意します。

atom-beautify
atom-minify
auto-encoding
autocomplete-paths
color-picker
emmet
file-icons
japanese-wrap
pigments
project-manager
sass-autocompile
w3c-validation

コマンドラインより、以下を実行すると、テキストに記述したパッケージを一度にインストールしてくれます。

C:\> apm install --packages-file packages.txt

※インストールにはそこそこ時間がかなります

インストール済みのパッケージを保存

また、インストール済みのパッケージをテキストファイルに保存することができます。

C:\> apm list --installed --bare > packages.txt

「packages.txt」への保存内容は以下の通りです。

atom-beautify@0.32.5
atom-minify@0.8.0
auto-encoding@0.7.0
autocomplete-paths@2.12.2
color-picker@2.3.0
emmet@2.4.3
file-icons@2.1.21
japanese-wrap@0.2.7
pigments@0.40.2
project-manager@3.3.6
sass-autocompile@0.13.5
w3c-validation@0.4.0

これを保存しておけば環境のバックアップも可能ですし、一括インストールすれば実装環境の移行も楽ですね。

あと、プラグインは個人でも比較的容易に開発可能みたいです。
いつか自分が足りない、不満に感じる部分は、自分で作ってしまうという時代が来るのでしょうか。

B!

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives