ViteでMarkuplintとPrettierを使える環境を構築する
前回記事「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を使える環境を構築する
今回はHTMLマークアップのリンターとコードフォーマッターの導入についてまとめてみました。リンターやコードフォーマッターを使うことで複数人のプロジェクトでもコードの品質を保つことができますし、一人での開発でも効率よくコーディングを進めることができますので、ぜひ揃えておきたいですね。
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マークアップのリンターとコードフォーマッターの導入についてまとめてみました。リンターやコードフォーマッターを使うことで複数人のプロジェクトでもコードの品質を保つことができますし、一人での開発でも効率よくコーディングを進めることができますので、ぜひ揃えておきたいですね。
sponserd
keyword search
recent posts
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
- ViteでHandlebarsを使った複数ページの作成に使える外部JSONファイルのデータを読み込む
ViteでHandlebarsを使った複数ページの作成に使える外部JSONファイルのデータを読み込む
- ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング
ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング
- ViteでPostCSS周りの設定やSassを使う
ViteでPostCSS周りの設定やSassを使う
- フロントエンドの開発環境にVite + TypeScriptを導入する
フロントエンドの開発環境にVite + TypeScriptを導入する
categories