javascript - 将 eslint 与模板语言一起使用

Question

我们有一个 javascript 文件，可以包含基于用户配置的各种功能组合。我想使用模板语言(可能是 jinja2)来管理内容。

但是，我们使用 eslint 来检查我们的格式/样式，显然 jinja2 标签会打破这一点。

我看到两个选项:

• 忽略 {{ ... }} 和 {% ... %} 之间的部分(不确定这是可能的)
• 使用 eslint 具有配置的模板语言(是否存在？)

我找不到关于这两个选项的信息。有没有一种方法可以执行上述任一操作，或者我是否需要一起尝试不同的路线？

Answer 1

ESLint plugins可以包含一个 preprocess 方法。此方法将脚本的内容和文件名作为参数，并将代码块数组返回给 lint。因此，一种选择是编写一个插件，使用 preprocess 方法将脚本读入字符串，然后对与 Jinja2 语法匹配的模式执行字符串替换。

例如，我们从Jinja2 documentation知道默认分隔符是:

• 语句:{% ... %}
• 表达式:{{ ... }}
• 注释:{# ... #}
• 行语句:# ... ##

我们可以创建匹配这些定界符的正则表达式模式:

• 语句:\{%(.*?)%\} Regex Example
• 表达式:\{[{%]([\s\S]*?)[}%]\} Regex Example
• 评论:\{#([\s\S]*?)#\} Regex Example
• 行语句:\#([\s\S]*?)## Regex Example

因此，在 preprocess 方法中，我们可以将这些模式与 replace 结合使用，以将脚本的 Jinja2 部分替换为有效的 JavaScript。这实际上会导致 ESLint “跳过”Jinja2 部分。

简而言之，eslint-plugin-jinja 是什么？插件执行@Goran.it 在他上面的评论中建议的。这个插件的唯一问题是模式可能匹配某些非 Jinja2 的东西(即误报)，或者可能不匹配某些 Jinja2 的东西(即漏报)。因此，您可能需要针对您的用例稍微调整模式。

下面是一个片段示例，它使用 eslint-plugin-jinja 中的模式来处理一个简单的 Jinja2 模板。然后您可以在此输出上运行 ESLint，它应该没有错误:see the resultant code linted using the online ESLint linter .

let scriptString = `{# plain jinja variables are converted into strings #}

    var a = 'this is' + {{ some_variable }};

    {# if it is already in string, it is wrapped with spaces #}

    var b = 'this is {{ other_variable }}';
    var c = 'and this is {{ another_one['field']}}';

    {# if-else statements are converted into ( ..., ... ) expression #}

    var d = {% if something %} 'this is something' {% else %} null {% endif %};

    {# any other statements become comments #}
    
    {% for i in [1, 2, 3] %}
      console.log(a, b, c, d);
    {% endfor %}`;

function processScript(str) {
  const quote = '"';
  const processed = str
    // replace jinja comments with js comments
    .replace(/\{#([\s\S]*?)#\}/g, (str, val) => `/*${val}*/`)
    // treat if-else statement as ( ... , ... )
    .replace(/\{%(-?\s*if.*?)%\}/g, (str, val) => `(/*${val.substr(1)}*/`)
    .replace(/\{%(-?\s*(else|elif).*?)%\}/g, (str, val) => `,/*${val.substr(1)}*/`)
    .replace(/\{%(-?\s*endif\s*-?)%\}/g, (str, val) => `/*${val.substr(1)}*/)`)
    // replace jinja statements with js comments
    .replace(/\{%(.*?)%\}/g, (str, val) => `/*${val}*/`)
    // replace jinja expression tags in strings with spaces
    .replace(/\{[{%]([\s\S]*?)[}%]\}/g, str => str.replace(/['"]/g, ' '))
    .replace(/(['"])(.*?)\1/g, str => str.replace(/(\{\{|\}\})/g, '  '))
    // replace jinja expressions with strings
    .replace(/\{\{(.*?)\}\}/g, (str, val) => `${quote} ${val} ${quote}`);
  return processed;
}

console.log(processScript(scriptString));