前回記事「ViteでStylelintとESlintを使える環境を構築する」では、Viteのプロジェクトでスタイルシートとスクリプトのリンターを導入するところについてまとめていましたが、今回はHTMLマークアップのリンター「Markuplint」とコードフォーマッターである「Prettier」を導入する方法についてみていきます。これでリンターとフォーマッター周りは揃うようになりますね。   今回の内容は、下記の記事でViteの基本的な開発環境ができているという前提になります。詳しくは各記事でまとめていますので合わせてご参照ください。 （参考記事） フロントエンドの開発環境にVite ＋ TypeScriptを導入する ViteでPostCSS周りの設定やSassを使う ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング ViteでVue.jsとVuex（Pinia）とVue Routerを使ってみる ViteでStylelintとESlintを使える環境を構築する    

Markuplintの導入

最初はマークアップのリンターであるMarkuplintを使えるようにしていきます。これまで同様にモジュールをインストールしていき、同時にリンターの設定ファイルを作成します。

$ npm install --save-dev markuplint
$ touch .markuplintrc.json

  設定ファイルには必要に応じてオプションを指定していきます。なお、設定ファイルはJSON形式の他にもJavaScriptやYAMLが利用できます。 【.marklintntrc.json】

{
  "extends": [
    "markuplint:recommended"
  ]
}

  設定ファイルの次はリンター実行用のコマンドを追加します。他のリンターにあわせて用意しますが、マークアップの対象となるファイルの拡張子をまとめて指定しておきます。 【package.json】※一部抜粋

{
  ....
  "scripts": {
    .....
    "lint:html": "markuplint src/**/*.{html,hbs,vue}"
  },
  ....
}

  コマンドを実行してみます。リンターが機能しているのが確認できますね。特にコードに問題がなくエラーが出る場合には、パーサーやルールの追加で対応していきます。

$ npm run lint:html
<markuplint> error: 不正な文字は文字参照でエスケープするべきです (character-reference) 
<markuplint> error: 要素が必要です。(「title」が必要です) (permitted-contents)
<markuplint> error: 要素「meta[charset="UTF-8" i]」が必要です (required-element)
....

  今回はHandlebarsをつかっていたため、その影響でエラーがでているようでした。対応するパーサーをインストールしていきます。このようにMarkuplintを導入する場合には扱っている言語やフレームワークによって適切なパーサーを挟む必要があります。

$ npm install --save-dev @markuplint/mustache-parser

  インストールしたパーサーは設定ファイルで指定していきます。また必要に応じてルールなども記述します。 【.marklintntrc.json】

{
  "extends": [
    "markuplint:recommended"
  ],
  "parser": {
    ".mustache$|.hbs$": "@markuplint/mustache-parser"
  },
  "rules": {
    "character-reference": false,
    "permitted-contents": false,
    "required-h1": false
  },
  "nodeRules": [
    {
      "selector": "head",
      "rules": {
        "required-element": {
          "options": {
            "ignoreHasMutableContents": true
          }
        }
      }
    }
  ]
}

  これで改めてリンターのコマンドを実行すると問題なくパスできたことが確認できました。

$ npm run lint:html
<markuplint> passed /Users/USER_NAME/PROJECT/src/index.html
<markuplint> passed /Users/USER_NAME/PROJECT/src/index.hbs

  ちなみにMarkuplintではこのようなパーサーも用意されているので、プロジェクトにあわせてインストールしていきます。VueやReactの場合には独自構文もあるため、追加のモジュールも必要になります。

// Vue
$ npm install --save-dev @markuplint/vue-parser @markuplint/vue-spec

// React、JSX
$ npm install --save-dev @markuplint/jsx-parser @markuplint/react-spec

// Pug
$ npm install --save-dev @markuplint/pug-parser

// EJS
$ npm install --save-dev @markuplint/ejs-parser

// Liquid
$ npm install --save-dev @markuplint/liquid-parser

  パーサーを複数使う場合には下記のように設定ファイルに指定しておきます。 【.marklintntrc.json】※一部抜粋

{
  "extends": [
    "markuplint:recommended"
  ],
  "parser": {
    ".mustache$|.hbs$": "@markuplint/mustache-parser",
    ".vue$": "@markuplint/vue-parser",
    .....
  },
  "specs": {
    ".vue$": "@markuplint/vue-spec",
    .....
  },
  .....
}

   

Prettierの導入

つづいてコードフォーマッターのPrettierを導入していきます。これまでと同じようにモジュールをインストールしていきます。今回は後述するESLintとの連携のため追加のモジュールもあわせてインストールしています。そして設定ファイルも作成します。あわせて、ignoreファイルを作成しておくとプロジェクト内でフォーマット対象外のファイルやディレクトリが指定できるようになります。

$ npm install --save-dev prettier eslint-config-prettier
$ touch .prettierrc.json .prettierignore

  その後は設定ファイルとignoreファイルを用意していきます。設定ファイルの方には、フォーマットのルールを記述していきます。ignoreファイルには対象外のファイルやディレクトリのリストを記述します。 【.prettierrc.json】

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": true,
  "arrowParens": "always",
  "parser": "none"
}

  【.prettierignore】

node_modules
package.json
package-lock.json
.git
.vscode/*
!.vscode/extensions.json

  また、PrettierとESLintを併用する場合には、ESLintの設定ファイルに指定が必要になります。こうすることでPrettier側のルールとESLint側のルールの競合を防ぐことができます。ただこの時にextendsのオプションに追加するのですが、prettierの記述は最後に追加する必要があるので注意です。 【.eslintrc.json】※一部抜粋

{
  .....
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    .....
    "prettier"
  ],
  .....
}

  ここまでできたら後はフォーマット用にコマンドを用意します。対象となるファイル拡張子やディレクトリを指定します。 【package.json】※一部抜粋

{
  ....
  "scripts": {
    .....
    "format": "prettier --write 'src/**/*.{ts,js,json,md,html,vue,hbs}' 'dist/**/*.html'" 
  },
  ....
}

  これでコマンドを実行するとコードが整形されているのが確認できます。本番用ビルドと合わせておくと良いですね。

$ npm run format

 

---

  今回はHTMLマークアップのリンターとコードフォーマッターの導入についてまとめてみました。リンターやコードフォーマッターを使うことで複数人のプロジェクトでもコードの品質を保つことができますし、一人での開発でも効率よくコーディングを進めることができますので、ぜひ揃えておきたいですね。