※この記事が誰かのためになれば幸いですが、あくまでも備忘録ですので、色々とおかしな部分があるかもしれませんが悪しからず…。

環境

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ファイルを作成

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

とりあえずおわり

必要あればまた追記します。