question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

no-unused-expressions and template literals (`)

See original GitHub issue

Looks like template literals with custom interpolators with no brackets are not treated by eslint as proper function calls. The following example produces an error:

import injectGlobal from 'styled-components';

// OK (with brackets)
injectGlobal(`
  body {
    color: #000,
  }
`);

// causes eslint error (no brackets)
injectGlobal`
  body {
    background: #f00,
  }
`;
11:1  error  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  • ESLint Version: 3.10.2
  • Node Version: 6.9.1
  • npm Version: 3.10.8

What parser (default, Babel-ESLint, etc.) are you using? babel-eslint 7.1.1

Please show your full configuration:

  "eslintConfig": {
    "parser": "babel-eslint",
    "plugins": [
      "import"
    ],
    "rules": {
      "no-unused-expressions": 2
    }
  }

What did you do? Please include the actual source code causing the issue.

MWE: https://github.com/kachkaev/eslint-no-unused-expressions

git clone git@github.com:kachkaev/eslint-no-unused-expressions.git
npm install
npm run lint:eslint

What did you expect to happen?

I expected both injectGlobal( and injectGlobal not to produce any eslint errors as these are just normal function calls; they are identical to each other.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:12
  • Comments:18 (12 by maintainers)

github_iconTop GitHub Comments

6reactions
platinumazurecommented, Mar 13, 2017

Working on this now.

4reactions
not-an-aardvarkcommented, Nov 22, 2016

👍 for adding allowTemplateTags: true.

👎 for adding allowTemplateTags: ["foo", "bar"]

My gut impression is that adding an option like allowTemplateTags: ["injectGlobal"] might be excessive. It would have to use the static name for the tag, so it wouldn’t work if the function was renamed within the code. It would also fail for cases like this:

/* eslint no-unused-expressions: [error, {"allowTemplateTags": ["injectGlobal", "injectLocal"]}] */

(foo ? injectGlobal : injectLocal)`
  body {
    color: red;
  }
` // incorrectly reports an error

var foo = {inject: injectGlobal};

foo.inject`
  body {
    color: red;
  }
` // incorrectly reports an error

We don’t have an option like allowTernary: ["foo", "bar"], presumably for similar reasons. I think the small utility provided by allowing an array isn’t worth having the rule incorrectly report errors in more complicated scenarios.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Template literals (Template strings) - JavaScript | MDN
Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded ...
Read more >
ES6 Template Literals (Template Strings) - CanIUse
Template literals are string literals allowing embedded expressions using backtick characters (`). You can use multi-line strings and string interpolation ...
Read more >
restrict-template-expressions - TypeScript ESLint
This rule reports on values used in a template literal string that aren't primitives and don't define a more useful .toString() method. .eslintrc.cjs....
Read more >
no-unused-expressions - ESLint - Pluggable JavaScript Linter
This rule does not apply to directives (which are in the form of literal string expressions such as "use strict"; at the beginning...
Read more >
8. Template literals - Exploring JS
Tagged template literals (code): function calls; Web templates (data): HTML with blanks to be filled in. Template literals are string literals that can...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found