はじめに
こんにちは、がんがんです。
以前vue-i18nのカスタムブロックに関する記事を執筆しました。
vue-i18n カスタムブロックのESLintプラグインを調べているとeslint-plugin-vue-i18nドキュメント内で以下のような記述を見つけました。
More lint on JSON and YAML in <i18n> block
You can install eslint-plugin-jsonc and eslint-plugin-yml. These 2 plugins support Vue custom blocks.You can also use jsonc/vue-custom-block/no-parsing-error and yml/vue-custom-block/no-parsing-error rules to find JSON and YAML parsing errors.
そこで本記事では実際にeslint-plugin-ymlを適用し静的解析を実施していきます。
インストール
terminal
pnpm add -D eslint-plugin-yml
# use antfu/ni
ni -D eslint-plugin-yml
わざとエラーを発生させる
実際に以下のようなエラーを意図的に作ってみます。vue-i18nの内容は前回記事と同じです。
pages/test.vue
<i18n lang="yaml">
+{ja:
-ja:
button: ダイアログを開く
modal:
title: テスト用モーダル😄
table:
name: 名前
email: メールアドレス
phone: 電話番号
dummy:
name: テストユーザー{target}
email: example{'@'}example.com
phone: 090-1234-56{target}
</i18n>
lintコマンドを実際に実行してみます。無事にエラー摘出できていますね。
terminal
$ pnpm lint
... 中略 ...
/{directory name}/src/app/pages/test.vue
error Nested mappings are not allowed in compact mappings yml/vue-custom-block/no-parsing-error
... 中略 ...
おわりに
今回は eslint-plugin-yml プラグインを利用して vue-i18n カスタムブロックの静的解析を実施しました。
本プラグインはyamlファイルの解析が目的ですので helmfile.yaml や openapi.yaml など様々なyamlファイルで利用できそうです。他にも使える箇所を探してみたいと思います。
Discussion