【ESLint】eslint-plugin-lodash-templateがEJSを(部分的に)サポートしたよ
かなり前に、【ESLint】eslint-plugin-lodash-template作ってみたよ という記事を書き、ちょっと前に 【ESLint】eslint-plugin-lodash-templateがJavaScriptテンプレートをサポートしたよ という記事を書きましたが、eslint-plugin-lodash-templateをJavaScriptテンプレートサポートさせたときついでに、部分的にEJSをサポートをしたのでその思い出を残します。
eslint-plugin-lodash-templateを基本的な使い方で使えば、EJSでESLintが動くはずなので、
EJSでの使い方の説明は無いです。仕組みをどう変えたかの思い出の話がメインです。
eslint-plugin-lodash-templateとは
Lodashの_.template
に渡して使えるテンプレートタグ内のJavaScriptに対してESLintで検証できるようにするESLintのプラグインです。
今回の変更でEJS構文でもESLintでエラー検出ができるようになりました!
EJSとは
JavaScriptを使ったテンプレート構文です。
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
公式はこちら https://ejs.co/
Lodashの_.template
に似た構文ですが、
HTMLエスケープする(EJSは<%=
)、しない(EJSは<%-
)、の意味が逆だったり、
<%_ ... _%>
のような無駄な空白を除去するタグ記法があったり、
<%# ... %>
というコメントタグ記法があったり、
<%%
というリテラルを表現する記法があったりします。
EJSを部分的にサポートしました
以前から、受け入れるタグ構文をカスタマイズする機能(parserOptions
を利用)がありましたが、
これを拡張してEJSの記法を設定できるようにしました。
(拡張子.ejs
に自動的に適用する共有設定も提供するようにしました。)
EJSのタグを処理できるように変更しました。
EJSはタグ記法はLodashの_.template
に比べてタグの記法が豊富です。
開始タグ・終了タグに様々な種類があり、組み合わせることができます。
以前までは、開始タグ・終了タグを1種類ずつしか受け入れられなかったのですが、
EJSをサポートするために、開始タグ・終了タグの種類を配列で受け入れ、構文解析できるようにしました。
// script部分
evaluate: [ ["<%", "<%_"] /*開始タグ2種類*/, ["%>", "-%>", "_%>"] /*終了タグ3種類*/ ],
// 補完部分(HTMLエスケープなし)
interpolate: [ "<%-" /*開始タグ*/ , ["%>", "-%>", "_%>"] /*終了タグ3種類*/ ],
// 補完部分(HTMLエスケープあり)
escape: [ "<%=" /*開始タグ*/ , ["%>", "-%>", "_%>"] /*終了タグ3種類*/ ],
また、以前までは、コメントやリテラルを処理する機能はなかったのですが、(Lodashの_.template
にはコメントやリテラルという概念はなかったので。)
コメントタグ記法、リテラルタグ記法も受け入れ、構文解析できるようにしました。
// コメント部分
comment: [ "<%#" /*開始タグ*/, ["%>", "-%>", "_%>"] /*終了タグ3種類*/ ],
// リテラル
literal: [ "<%%" /*タグ (リテラルには終了タグの概念はない様子)*/ ],
共有設定で.ejs
用の設定を適用
eslint-plugin-lodash-templateの提供する共有設定で、以下ようにoverrides
を利用して、拡張子.ejs
のファイルにEJSで動作する用のparserOptions
を設定しています。
これによって.ejs
のファイルでは自動的にEJSのタグで構文解析するようになりました。
module.exports = {
// ...
overrides: [
{
files: ["*.ejs"], // `.ejs`に適用
parserOptions: {
// eslint-plugin-lodash-template用の設定
templateSettings: {
// 上記で書いたやつ
evaluate: [["<%", "<%_"], ["%>", "-%>", "_%>"]],
interpolate: ["<%-", ["%>", "-%>", "_%>"]],
escape: ["<%=", ["%>", "-%>", "_%>"]],
comment: ["<%#", ["%>", "-%>", "_%>"]],
literal: ["<%%"],
},
},
},
],
}
結果
これらの変更でEJS構文でもESLintでエラー検出ができるようになりました!(再掲)
なぜ(部分的)と言っているのか?
EJSには古い構文で<% include _header %>
というようなincludeディレクティブというのがまだ息してるらしく、eslint-plugin-lodash-templateはこれを解析できません。なので(部分的)サポートということにしています。
Author And Source
この問題について(【ESLint】eslint-plugin-lodash-templateがEJSを(部分的に)サポートしたよ), 我々は、より多くの情報をここで見つけました https://qiita.com/ota-meshi/items/2cb35d079bfe6e8adbd7著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .