※この記事が誰かのためになれば幸いですが、あくまでも備忘録ですので、色々とおかしな部分があるかもしれませんが悪しからず…。
環境
MacOS Catalina バージョン 10.15.7
Atom バージョン 1.52.0
（ダウンロード https://atom.io/）
やったこと
【1】 node.js のダウンロード・インストール
ダウンロードURL
https://nodejs.org/ja/
DL後は言われるがままにインストールを進める
ターミナルで下記２つのコマンドを実行して
node -v
npm -v
バージョンらしき表示が出ればOK（下記のような感じ）
node -v
v12.19.0
【2】 まずはpugの準備
① pugのインストール
下記のコマンドを実行
npm install pug
これだけじゃ上手くいかなかったので下記参考にコマンド実行（「Pugのインストール（全ての悪の根源）」以下）（本当に神）
https://qiita.com/ksyunnnn/items/0c18008b564ef8e1cdd8
② Atomにパッケージをインストール
atom-pug
Atomでpugを使うためのパッケージ
https://atom.io/packages/atom-pug
save-commands
コマンドを保存して実行できるパッケージ
pugファイル保存時にhtmlファイルに自動コンパイルするために使う
https://atom.io/packages/save-commands
③ pugファイル保存時にhtmlファイルに自動コンパイルする設定
下記（本当に神）およびsave-commandsの公式ページ参考に
https://qiita.com/easai/items/da0c13c639326a762ef2
プロジェクトのルートディレクトリにsave-commands.jsonファイルを作成
{
"commands": [
"template/pug/*.pug: pug {relPath}index.pug --pretty --out template"
]
}
これでpugファイル保存時に下記のコマンドが自動で実行される
pug template/pug/index.pug --pretty --out template
ファイル構成こんなかんじになる↓
- /save-commands.json
- /template/pug/index.pug
- /template/index.html
これでpugの準備は終わりー！！！
【3】 Sass（Scss）の準備していく〜
① node-sassのインストール
まずは上手くいかなかったパターン
下記コマンド実行
npm install -g node-sass
めちゃくちゃエラー出てきてインストールできなかった、もう嫌
いろいろ調べたら解決方法を発見、下記参考に進める（本当に神）
https://qiita.com/akane8747/items/f72cf307354ffe10b91d
（npm config get prefixのところ以降試していく）
最後に下記コマンド実行して、バージョンらしき表示が出ればインストール成功
node-sass -v
② Atomにパッケージをインストール
sass-autocompile
Sass（Scss）ファイル保存時に自動でコンパイルしてくれるパッケージ
https://atom.io/packages/sass-autocompile
どんな形式でコンパイルするか、またコンパイル後のファイル名など設定が可能
下記参考に
https://into-the-program.com/sass-autocompile-indent/
【おまけ】 Atom おすすめパッケージ
browser-plus
Atomにブラウザの機能を追加できるパッケージ
雷のアイコンをオンにしておけば、リアルタイムプレビューが可能になる
pugを編集→保存してhtmlにコンパイル→ディスプレイ右側にプレビューを開いてリアルタイムプレビューが可能
https://atom.io/packages/browser-plus
とりあえずおわり
必要あればまた追記します。