現役Web開発者がおすすめするAtom拡張パッケージ17選

WEB

皆さん、こんにちは!

この記事から少し投稿が空いてしまいました、すみません。。。

 

早速ですがWebコーダーの皆さんはどんなテキストエディタを使用していますか?

私は「Atom」と使用しています。数ある中のテキストエディタからこれを選んだ理由っていうのは特にないのですが、とりあえず有名所をすべて使ってみて拡張性と使用感で「Atom」になりました。

こういったオープンソースのエディタを使っていて一番のメリットは間違いなくカスタマイズできるところにあると思います。

自分の開発物に合わせて拡張機能を追加していく楽しみを実感している人も多いと思うので、今回は私が使っている便利なAtomのパッケージを紹介します!

おすすめのAtomパッケージ17選

基本的にはWebサイト制作において私が「捗るわ〜」となったものを抜粋して紹介します。

記事の最後に一括でインストールできるようにコードも載せておきますのでご活用ください!

Atomパッケージ1:atom-beautify

言わずとしれたAtomのパッケージ。コードの自動整形をしてくれる便利なヤツ。

主要な言語やモダンな言語をほぼ網羅してくれているのでWeb開発者に限らず、Atom使用者なら取り敢えず入れるべき便利パッケージです!

atom-beautifyのインストール

apm install atom-beautify

 

Atomパッケージ2:project-manager

プロジェクトフォルダーを予め登録しておいて、いつでも画面に呼び出すことができるパッケージです。

これによってフォルダからAtomを開く手間が省けます!

project-managerのインストール

apm install project-manager

 

Atomパッケージ3:autocomplete-paths

ファイルのURIをいちいちファイルの場所を確認して記入する手間を省けるパッケージ。

これによってファイルのパス入力ミスが減りました。

autocomplete-pathsのインストール

apm install autocomplete-paths

 

Atomパッケージ4:file-icons

個人的にはモチベ上げるようパッケージです。

ソースツリー上に表示されるファイルの識別アイコンが見やすく可愛くなります!

file-iconsのインストール

apm install file-icons

 

Atomパッケージ5:highlight-selected

選択状態になっているテキストと同じテキストがあればハイライト表示してくれるパッケージ。

そんなに使い道は思いつかないが以外と知らず知らずのうちにお世話になっている隠れ便利パッケージです。

highlight-selectedのインストール

apm install highlight-selected

Atomパッケージ6:codic

codic」という日本語英訳し変数名っぽく変換してくれるサービスと連携できるパッケージです。

変数名をつけるのが苦手な方、英語が苦手な方には重宝される素晴らしいサービス!

codicのインストール

apm install codic

 

Atomパッケージ7:pigments

cssなどで記述されたカラーコードを色付きでハイライトしてくれるパッケージ。

カラーコードを見ただけで色がわかる人には必要ないですが、そんな人はいませんよね…?

pigmentsのインストール

apm install pigments

 

Atomパッケージ8:remote-ftp

SFTP・FTPアップロードをソフトを使用せずに直接編集できるようにするパッケージ。

接続状態になるとAtomのソースツリーにサーバー内のフォルダが並びローカルと同じように作業が可能になります。

デメリットはご操作でもアップロードにより更新がかかってしまうので、編集にはくれぐれもご注意を。

remote-ftpのインストール

apm install remote-ftp

 

Atomパッケージ9:show-ideographic-space

全角スペースわかりやすく可視化してくれるパッケージ。

”なんのバグかな?と思ったら全角スペースが原因だった”をなくしてくれるすぐれもの。

show-ideographic-spaceのインストール

apm install show-ideographic-space

 

Atomパッケージ10:trailing-spaces

こちらもスペース可視化パッケージです。

文末にある半角スペースをハイライトしてくれるので無駄なスペースを見つけやすくなります。

trailing-spacesのインストール

apm install trailing-spaces

 

Atomパッケージ11:tag

HTMLタグを自動で閉じてくれるパッケージ。

HTMLタグは基本的に入力補完で書く人が多いと思いますが、手入力するタイミングもあると思います。

そんなときに「</」まで打つと閉じていないタグを自動的に補完してくれるので、痒いところに手が届いた感じ。

tagのインストール

apm install tag

 

Atomパッケージ12:color-picker

CSSでカラーコードをエディタ上のGUIで選択できるようになるパッケージ。

「cmd+shfit+C」で開き選択できます。

color-pickerのインストール

apm install color-picker

 

Atomパッケージ13:atom-csscomb

このパッケージはCSSのプロパティを自動で並べ替えてくれる。超便利。

上記で紹介した「atom-beautify」と同じようにインデントも揃えてくれる。

atom-csscombのインストール

apm install atom-csscomb

 

Atomパッケージ14:atom-minify

jsとCSSをminファイルのように1行に圧縮してくれるパッケージ。

jsにいたっては変数名も圧縮してくれます。(アルファベット小文字昇順)

atom-minifyのインストール

apm install atom-minify

 

Atomパッケージ15:atom-ternjs

jsのコード自動補完パッケージ。

Ternというjsの静的解析エンジンプロジェクトを元に作成されています。

atom-ternjsのインストール

apm install atom-ternjs

 

Atomパッケージ16:autocomplete-php

PHPの自動補完を強化するパッケージ。

PHPerな人は取り敢えず入れておけばいいと思う。

autocomplete-phpのインストール

apm install autocomplete-php

 

Atomパッケージ17:wordpress-api

WordPressの関数やテンプレートを呼び出すパッケージ。

WordPressのお決まり文句を毎回調べる・書く手間を省きまくり。

wordpress-apiのインストール

apm install wordpress-api

まとめ

紹介したパッケージをすべてインストールしたい人向けにコマンドを残しておきますので、ご自由にお使いください!

apm install atom-beautify project-manager autocomplete-paths file-icons highlight-selected codic pigments remote-ftp show-ideographic-space trailing-spaces tag color-picker linter atom-csscomb atom-minify atom-ternjs autocomplete-php wordpress-api