【Pug】Atom と Prepros を見方につけて爆速コーディングがしたい【Sass・Scss】

こんにちは、牧野です。
今回は、今更ながら Pug と Scss を本格的に使い始めたので、私の環境のご紹介をしたいと思います。（誰得？）

エディターは Atom

私は Adobe 信者ではないのですが、イラレ・フォトショの流れで学生の時からエディターは Dreamweaver をメインで使用していました。
変更したらFTPで速攻アップできるのが好きで使ってましたが、すぐ落ちるのが難点。
よくよく考えれば、そんなことができるエディター、他にもあるんでしょうね笑

先日 Scss を本格的に使い始めようかなと考える機会があって、その時に思い出したんですよね… Pug の存在を…。
というか子要素はネストして書いていくところとか全く一緒で、思い出さざるを得ませんでした。

Dreamweaver では Pug はサポートされていなくて、以前インストールしていた Atom だったらサポートしてるかなとふと思って使い始めてから、もう Dreamweaver じゃなくていいやってなってしまいました。
デフォルトでは Atom でも Pug はサポートされていないのですが、そこはさすが Atom 先生。パッケージインストールで Atom もしっかりサポートしてくれました。
インストールしたパッケージはこちら　→　atom-pug

【おまけ】他にインストールしたオススメのパッケージ file-icons

その名の通りなんですが、左のプロジェクト部分に表示されるファイルや、今開いているファイルのアイコンを表示します。
Pug のアイコンが愛おしくてたまらないので、是非お試し下さい。
file-icons

コンパイラは Prepros

これめちゃくちゃ便利です！！
Prepros 上でプロジェクトを作成し、その中のコンパイル前のファイルをコンパイル後にどこに書き出すか指定すれば、コンパイル前のファイルが更新されるたびに自動でコンパイルしてくれます。
しかもローカルサーバーが内蔵されていて、ブラウザで状況確認ができます。

コンパイル前のファイルを Atom で好き放題書いて上書き保存
　→　自動コンパイル
　→　ローカルサーバーでブラウザでの様子をリアルタイムに確認できる

今まで Dreamweaver でファイル更新→上書き→テストサーバーにアップ→ブラウザで確認 という作業をしていたのですが、途中工程をすっ飛ばしてブラウザで確認できるのはめちゃくちゃ嬉しいです…！！

まだまだこれから…

まずは使ってみると言うところに重点を置きすぎていて、両方ともまだまだ使いこなせていない感が否めません…。
近いうちに WordPress が動かせるような環境にして、もっと速く、もっと楽しくコーディングができるよう努めたいと思います！