トップ > npm > 【pug】【npm】インデントが原因のビルドエラーでにっちもさっちもいかない時の対処方法

【pug】【npm】インデントが原因のビルドエラーでにっちもさっちもいかない時の対処方法

npm pug html

HTMLのテンプレートエンジンにpugを使用したのですが、初歩的な事でどハマりしました…。 github.com

私の場合、Laravelで作成したプロジェクトにデフォルト設定される、webpackにpugライブラリを追加していました。

症状

ソース

block content
    block nav
        include ./_nav.pug

エラー内容

今回追加した箇所の先頭がエラーが原因でした。

block content
  > 15|     block nav
--------^
    16|                 include ./nav.pug

エラー内容は次の通りです。

Invalid indentation, you can use tabs or spaces but not both

やって見た事

インデントを変えてみる

作業 ビルド結果
tabでインデントする ×
space4つでインデントする ×

既存のincludeを使ってみる

作業 ビルド結果
処理を単純に模写 ×
処理をコピペ ×

原因

エディタ用に用意していた.editconfigファイルの設定が原因でした。
editorconfig.org

プロジェクトの内部的な事ななのですが、フロントエンドとバックエンドで同時並行するプロジェクトでした。
フロント担当は取り急ぎgulpで実装、後追いで私が組み込むという算段でした。

しかし、.editconfigはバックエンドを準備する段階で追加したもので、共有が遅れてしまったのが原因でした。

対処方法

今回は、フロントを実装された人に合わせて.editconfigを変えました。
どうやら、今回フロントを実装された人の環境では、tabはspaceではなく、tabだったようです。

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = tab  #ここをspaceからtabに変更
indent_size = 4
trim_trailing_whitespace = true

以上です。
エディタの設定は軽視しがちでしたが、共同で作業される場合は注意した方が良さそうです。

©︎2017-2018 WebSandBag