今回はGridsomeでPugを設定する方法を紹介します。

必要なライブラリのインストール

PugはStylusの導入やTypeScriptの導入より簡単です。

$ yarn add -D pug gridsome-plugin-pug vue-pug-lint-loader

ついでにPugのリンターもインストールしておきます。

gridsome.config.jsの設定

Pugを使うだけであれば下記を追加するだけです。

module.exports = {
  // 中略
  { use: 'gridsome-plugin-pug' }
}

Pug Lintの設定

Pugも無法地帯にならないようにリンターを設定します。
.pug-lintrc.jsonなどで設定します。

リンターに関する詳しいことはPug Lintの公式サイトを参照してください。

Gridsomeでおすすめする設定は下記です。

{
  "validateIndentation": 2,
  "requireClassLiteralsBeforeAttributes": true,
  "requireIdLiteralsBeforeAttributes": true,
  "requireLowerCaseAttributes": true,
  "requireLowerCaseTags": true,
  "requireSpaceAfterCodeOperator": true,
  "requireSpecificAttributes": [
  ],
  "requireStrictEqualityOperators": true
}

普通のPugであればrequireSpecificAttributesで"img": ["alt"]を入れるのですが、Vueの場合はaltだけでなく:altと動的にすることもあって動的にしたときにエラーになるのであえて外しています。
なにかいい方法があればTwitterかFacebookでこっそり教えてください。

Pug Lintを実行するためのファイルを作成

ビルド時にリンターを実行するためにTypeScript Linterの設定で紹介したように読み込むためのファイルをplugin/pug-lint/index.jsを作成します。

// pug-lint/index.js
const { resolve } = require('path')
const lint = require('../../.pug-lintrc')

function PugLinterPlugin(api) {
  api.chainWebpack((config) => {
    config.module
      .rule('pug-lint')
      .test(/\.vue$/)
      .pre()
      .use()
      .loader('vue-pug-lint-loader')
      .options({
        emitter: true,
        ...lint
      })
  })
}

module.exports = PugLinterPlugin

gridsome.config.jsに追加

上記で作成したファイルを読み込ませます。

module.exports = {
  // 中略
  { use: '~/plugins/puglint' }
}

これでビルド時にリンターも動作するようになります。