꽤 전에, 【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>
<% } %>

공식은 여기 htps : // 에 js. 코/

Lodash의 _.template 과 비슷한 구문이지만,
HTML 이스케이프( EJS 는 <%= ), 안 함( EJS 은 <%- ), 의 의미가 반대이거나,<%_ ... _%> 와 같은 쓸데없는 공백을 제거하는 태그 기법이 있거나,<%# ... %> 라는 코멘트 태그 기법이 있거나,<%% 라는 리터럴을 표현하는 기법이 있거나 합니다.

EJS를 부분적으로 지원했습니다.

이전부터, 받아들이는 태그 구문 사용자 정의 하는 기능( parserOptions 을 이용)이 있었습니다만,
이것을 확장해 EJS 의 기법을 설정할 수 있게 했습니다.
(확장자 .ejs에 자동으로 적용되는 공유 설정도 제공합니다.)

EJS 태그를 처리할 수 있도록 변경했습니다.

EJS 는 태그 기법은 Lodash의 _.template 에 비해 태그의 기법이 풍부합니다.
시작 태그·종료 태그에는 다양한 종류가 있어 조합할 수 있습니다.
이전까지는, 개시 태그·종료 태그를 1종류씩 밖에 받아들일 수 없었습니다만,
EJS 를 지원하기 위해서, 개시 태그·종료 태그의 종류를 배열로 받아들여, 구문 분석할 수 있도록(듯이) 했습니다.

// script部分
evaluate:    [ ["<%", "<%_"] /*開始タグ２種類*/, ["%>", "-%>", "_%>"] /*終了タグ3種類*/ ],
// 補完部分（HTMLエスケープなし）
interpolate: [  "<%-"        /*開始タグ*/    , ["%>", "-%>", "_%>"] /*終了タグ3種類*/ ],
// 補完部分（HTMLエスケープあり）
escape:      [  "<%="        /*開始タグ*/    , ["%>", "-%>", "_%>"] /*終了タグ3種類*/ ],

또, 이전까지는, 코멘트나 리터럴을 처리하는 기능은 없었습니다만, ( Lodash의 _.template 에는 코멘트나 리터럴이라고 하는 개념은 없었기 때문에.)
코멘트 태그 기법, 리터럴 태그 기법도 받아들여 구문 분석할 수 있도록 했습니다.

// コメント部分
comment:    [ "<%#" /*開始タグ*/, ["%>", "-%>", "_%>"] /*終了タグ3種類*/ ],
// リテラル
literal:    [ "<%%" /*タグ （リテラルには終了タグの概念はない様子）*/ ],

공유 설정에서 .ejs에 대한 설정 적용

eslint-plugin-lodash-template 에서 제공하는 공유 설정에서 overrides 를(를) 사용하여 EJS
이렇게 하면 .ejs 파일에서 자동으로 EJS 태그로 구문 분석됩니다.

module.exports = {
    // ...
    overrides: [
        {
            files: ["*.ejs"], // `.ejs`に適用
            parserOptions: {
                // eslint-plugin-lodash-template用の設定
                templateSettings: {
                    // 上記で書いたやつ
                    evaluate: [["<%", "<%_"], ["%>", "-%>", "_%>"]],
                    interpolate: ["<%-", ["%>", "-%>", "_%>"]],
                    escape: ["<%=", ["%>", "-%>", "_%>"]],
                    comment: ["<%#", ["%>", "-%>", "_%>"]],
                    literal: ["<%%"],
                },
            },
        },
    ],
}

결과

이러한 변경으로 EJS 구문에서도 ESLint 에서 에러 검출을 할 수 있게 되었습니다! (재게재)

왜 (부분적)이라고 말하는가?

EJS 에는 낡은 구문으로 parserOptions 와 같은 include 지시어라고 하는 것이 아직 숨쉬고 있는 것 같고, eslint-plugin-lodash-template 는 이것을 해석할 수 없습니다. 그래서 (부분적) 지원이라고 하기로 하고 있습니다.