Awesome Open Source
Awesome Open Source

eslint-plugin-lodash-template

ESLint plugin for John Resig-style micro templating.

npm license npm version npm downloads npm downloads npm downloads npm downloads npm downloads Build Status Coverage Status Greenkeeper badge

It can be used in projects using Underscore.js and Lodash's template.

This plugin supports code checking for templates like the examples below.

<div id="<%= id %>" class="<%= (i % 2 == 1 ? ' even': '') %>">
  <div class="grid_1 alpha right">
    <img class="righted" src="<%= profile_image_url %>"/>
  </div>
  <div class="grid_6 omega contents">
    <p><b><a href="/<%= from_user %>"><%= from_user %></a>:</b> <%= text %></p>
  </div>
</div>
<% for ( var i = 0; i < users.length; i++ ) { %>
  <li><a href="<%= users[i].url %>"><%= users[i].name %></a></li>
<% } %>

Playground on the Web

output sample(on SublimeText):

sample-sublime-text

Features

  • Enable ESLint in Underscore.js and Lodash's templates.
  • You can find issues specific to template tags.
  • Improves readability of HTML templates.
  • For JavaScript templates, enable ESLint both inside and outside the template tag. (This is an experimental feature)
  • Partial supports for EJS.

Installation

npm install --save-dev eslint eslint-plugin-lodash-template

Documentation

See documents.

Usage

Create .eslintrc.* file to configure rules. See also: http://eslint.org/docs/user-guide/configuring.

Example .eslintrc.js:

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:lodash-template/recommended-with-html'
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'lodash-template/no-warning-html-comments': 'error'
  }
}

Attention

This plugin does special handling for the following rule warnings in the template.

Rule ID Process Description Another way this plugin supports
indent Disable warnings lodash-template/scriptlet-indent rule,
lodash-template/html-indent rule
strict Disable warnings --
no-empty Disable warnings --
max-statements-per-line Disable warnings --
padded-blocks Disable warnings --
no-implicit-globals Disable warnings --
no-multi-spaces Disable warnings lodash-template/no-multi-spaces-in-scriptlet rule,
lodash-template/no-multi-spaces-in-html-tag rule
no-unused-expressions Disable warnings within interpolate(<%=...%>) --
quotes Disable warnings if doublequote is set --
no-irregular-whitespace Disable warnings outside template tags lodash-template/no-irregular-whitespace rule

Configs

This plugin provides 6 predefined configs:

  • plugin:lodash-template/base - Settings and rules to enable correct ESLint parsing
  • plugin:lodash-template/best-practices - Above, plus rules to improve dev experience
  • plugin:lodash-template/recommended - Above, plus rules to improve code readability
  • plugin:lodash-template/recommended-with-html - Above, plus rules to improve code readability with HTML tamplate
  • plugin:lodash-template/recommended-with-script - plugin:lodash-template/recommended config, plus to enable ESLint parsing of JavaScript templates (This is an experimental feature)
  • plugin:lodash-template/all - All rules of this plugin are included

Rules

The --fix option on the command line automatically fixes problems reported by rules which have a wrench 馃敡 below.

Base Rules (Enabling Correct ESLint Parsing)

Enable this plugin using with:

{
  "extends": "plugin:lodash-template/base"
}
Rule ID Description
lodash-template/no-script-parsing-error disallow parsing errors in template

Best Practices (Improve Development Experience)

Enforce all the rules in this category with:

{
  "extends": "plugin:lodash-template/best-practices"
}
Rule ID Description
lodash-template/no-empty-template-tag disallow empty micro-template tag. (ex. 馃問 <% %>)
lodash-template/no-invalid-template-interpolation disallow other than expression in micro-template interpolation. (ex. 馃問 <%= if (test) { %>)
馃敡 lodash-template/no-semi-in-template-interpolation disallow the semicolon at the end of expression in micro template interpolation.(ex. 馃啑 <%= text %> 馃問 <%= text; %>)

Recommended (Improve Readability)

Enforce all the rules in this category and all the rules in Best Practices categories with:

{
  "extends": "plugin:lodash-template/recommended"
}
Rule ID Description
馃敡 lodash-template/no-irregular-whitespace disallow irregular whitespace outside the template tags.
馃敡 lodash-template/no-multi-spaces-in-scriptlet disallow multiple spaces in scriptlet. (ex. 馃問 <% if路路路(test)路路路{ %>)
馃敡 lodash-template/scriptlet-indent enforce consistent indentation to scriptlet in micro-template tag.
馃敡 lodash-template/template-tag-spacing enforce unified spacing in micro-template tag. (ex. 馃啑 <%= prop %>, 馃問 <%=prop%>)

Recommended with HTML template (Improve Readability with HTML template)

Enforce all the rules in this category and all the rules in Best Practices/Recommended categories with:

{
  "extends": "plugin:lodash-template/recommended-with-html"
}
Rule ID Description
馃敡 lodash-template/attribute-name-casing enforce HTML attribute name casing. (ex. 馃啑 <div foo-bar> 馃問 <div fooBar> <div FOO-BAR>)
馃敡 lodash-template/attribute-value-quote enforce quotes style of HTML attributes. (ex. 馃啑 <div class="abc"> 馃問 <div class='abc'> <div class=abc>)
馃敡 lodash-template/element-name-casing enforce HTML element name casing. (ex. 馃啑 <xxx-element> 馃問 <xxxElement> <DIV>)
馃敡 lodash-template/html-closing-bracket-newline require or disallow a line break before tag's closing brackets
馃敡 lodash-template/html-closing-bracket-spacing require or disallow a space before tag's closing brackets. (ex. 馃啑 <input> <input路/> 馃問 <input路> <input/>)
馃敡 lodash-template/html-comment-content-newline require or disallow a line break before and after HTML comment contents
馃敡 lodash-template/html-comment-spacing enforce unified spacing in HTML comment. (ex. 馃啑 <!-- comment -->, 馃問 <!--comment-->)
馃敡 lodash-template/html-content-newline require or disallow a line break before and after HTML contents
馃敡 lodash-template/html-indent enforce consistent HTML indentation.
馃敡 lodash-template/max-attributes-per-line enforce the maximum number of HTML attributes per line
lodash-template/no-duplicate-attributes disallow duplication of HTML attributes. (ex. 馃問 <div foo foo>)
lodash-template/no-html-comments disallow HTML comments. (ex. 馃問 <!-- comment -->)
馃敡 lodash-template/no-multi-spaces-in-html-tag disallow multiple spaces in HTML tags. (ex. 馃問 <input路路路type="text">)
馃敡 lodash-template/no-space-attribute-equal-sign disallow spacing around equal signs in attribute. (ex. 馃啑 <div class="item"> 馃問 <div class = "item">)
lodash-template/no-warning-html-comments disallow specified warning terms in HTML comments. (ex. 馃問 <!-- TODO:task -->)

Uncategorized

Rule ID Description
lodash-template/no-template-tag-in-start-tag disallow template tag in start tag outside attribute values. (ex. 馃問 <input <%= 'disabled' %> >)
lodash-template/prefer-escape-template-interpolations prefer escape micro-template interpolations. (ex. 馃啑 <%- ... %>, 馃問 <%= ... %>)

Deprecated

  • 鈿狅笍 We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
  • 馃槆 We don't fix bugs which are in deprecated rules since we don't have enough resources.
Rule ID Replaced by
lodash-template/no-multi-spaces-in-script lodash-template/no-multi-spaces-in-scriptlet
lodash-template/plugin-option (no replacement)
lodash-template/script-indent lodash-template/scriptlet-indent

Plugin Option

Suppress no-undef warnings in the template tag

Please set the global variable used in all templates as follows.

.eslintrc.*:

  {
      "settings": {
+         "lodash-template/globals": ["variableName"]
      }
  }

"html/html-extensions": [".html", ".we"],

Please write the global comment in the file as follows for the variable to be used with a specific template.

+ <% /* global users */ %>
  <% for ( var i = 0; i < users.length; i++ ) { %>
    <li><a href="<%= users[i].url %>"><%= users[i].name %></a></li>
  <% } %>

Suppress reports for specific rules in template files

Please set as follows.

.eslintrc.*:

  {
      "settings": {
+         "lodash-template/ignoreRules": ["no-undef", "no-tabs"]
      }
  }

The ESLint standard suppression method can also be used by using template tag, as follows.

+ <% /* eslint no-ternary: 0 */ %>

Customize parser

For example, if you set Lodash templateSettings as follows,

_.templateSettings = {
    evaluate:    /{{([\s\S]+?)}}/g,
    interpolate: /{{=([\s\S]+?)}}/g,
    escape:      /{{-([\s\S]+?)}}/g
};

please set parserOptions(ex. .eslintrc.*) as follows.

      parserOptions: {
+         templateSettings: {
+             evaluate:    ["{{", "}}"],
+             interpolate: ["{{=", "}}"],
+             escape:      ["{{-", "}}"],
+         },
      },

For example, to parse like EJS, set as follows,

(If plugin:lodash-template/*** is set in extends, it is automatically applied to the extension .ejs.)

      parserOptions: {
+         templateSettings: {
+             evaluate:    [ ["<%", "<%_"], ["%>", "-%>", "_%>"] ],
+             interpolate: [  "<%-",        ["%>", "-%>", "_%>"] ],
+             escape:      [  "<%=",        ["%>", "-%>", "_%>"] ],
+             comment:     [  "<%#",        ["%>", "-%>", "_%>"] ],
+             literal:     [  "<%%" ],
+         },
      },

(This plugin do not provide complete support for EJS. e.g. the include directive.)

Customize target extentions

Please set .eslintrc.* as follows.

(For example, for EJS.)

+    "overrides": [
+        {
+            "files": ["*.ejs"],
+            "processor": "lodash-template/html"
+        }
+    ]

For JavaScript Templates

(This is an experimental feature)

For example if you have a file like below.

/* eslint no-multi-spaces: error */
<% /* eslint lodash-template/no-multi-spaces-in-scriptlet: error */ %>

// if this plugin is not used, a parsing error will occur.
const obj    = <%= JSON.stringify(options     ) %>
//       ^^^^                          ^^^^^ 
//         |                            |
//         |          If you don't use `"plugin:lodash-template/recommended-with-script"`,
//         |          only the space after `options` is reported.
//         |
//         + When using `"plugin:lodash-template/recommended-with-script"`, the space after `obj` is also reported.

Playground on the Web

Configuring

Please set .eslintrc.* as follows.

+    "overrides": [
+        {
+            "files": ["**/your/templates/*.js"],
+            "extends": ["plugin:lodash-template/recommended-with-script"]
+        }
+    ]

If you do not want to use the included rules, set the details as follows.

    "overrides": [
        {
            "files": ["**/your/templates/*.js"],
-            "extends": ["plugin:lodash-template/recommended-with-script"],
+            "extends": ["plugin:lodash-template/base"],
+            "processor": "lodash-template/script",
+            "rules": {
+                "lodash-template/no-invalid-template-interpolation": "error"
+                ...
+            }
        }
    ]

FAQ

Editor Settings with HTML templates

About how to mark warnings on editor.

  • VSCode (VS Code ESLint extension)

    settings.json:

    {
        "eslint.validate": [ "javascript", "javascriptreact", "html" ]
    }
    
  • Sublime Text3 (SublimeLinter-eslint)

    [Preference] > [Package Settings] > [SublimeLinter] > [Settings]

    // SublimeLinter Settings - User
    {
        "linters": {
            "eslint": {
                "selector": "text.html, source.js - meta.attribute-with-value"
            }
        }
    }
    

Migrations

Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

parserServices

Information provided by parserServices on this plugin

Development Tools

  • npm test runs tests and measures coverage.
  • npm run update runs in order to update readme and recommended configuration.

License

See the LICENSE file for license rights and limitations (MIT).


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,552,087)聽
Template (7,732)聽
Eslint (3,628)聽
Ejs (2,870)聽
Lodash (394)聽
Eslint Plugin (308)聽
Html Template (289)聽
Readability (190)聽
Related Projects
Advertising 馃摝聽9
All Projects
Application Programming Interfaces 馃摝聽120
Applications 馃摝聽181
Artificial Intelligence 馃摝聽72
Blockchain 馃摝聽70
Build Tools 馃摝聽111
Cloud Computing 馃摝聽79
Code Quality 馃摝聽28
Collaboration 馃摝聽30
Command Line Interface 馃摝聽48
Community 馃摝聽81
Companies 馃摝聽60
Compilers 馃摝聽60
Computer Science 馃摝聽74
Configuration Management 馃摝聽39
Content Management 馃摝聽167
Control Flow 馃摝聽197
Data Formats 馃摝聽77
Data Processing 馃摝聽266
Data Storage 馃摝聽132
Economics 馃摝聽60
Frameworks 馃摝聽198
Games 馃摝聽122
Graphics 馃摝聽103
Hardware 馃摝聽148
Integrated Development Environments 馃摝聽47
Learning Resources 馃摝聽147
Legal 馃摝聽28
Libraries 馃摝聽119
Lists Of Projects 馃摝聽21
Machine Learning 馃摝聽336
Mapping 馃摝聽61
Marketing 馃摝聽15
Mathematics 馃摝聽55
Media 馃摝聽228
Messaging 馃摝聽97
Networking 馃摝聽304
Operating Systems 馃摝聽84
Operations 馃摝聽120
Package Managers 馃摝聽52
Programming Languages 馃摝聽229
Runtime Environments 馃摝聽96
Science 馃摝聽42
Security 馃摝聽375
Social Media 馃摝聽26
Software Architecture 馃摝聽70
Software Development 馃摝聽68
Software Performance 馃摝聽57
Software Quality 馃摝聽127
Text Editors 馃摝聽45
Text Processing 馃摝聽131
User Interface 馃摝聽310
User Interface Components 馃摝聽465
Version Control 馃摝聽29
Virtualization 馃摝聽68
Web Browsers 馃摝聽38
Web Servers 馃摝聽25
Web User Interface 馃摝聽194