use strict surrounded by backticks not correctly recognized by the strict rules being valid when quote backticks rule is also enforced

[lozandier]

Detailed information about the problem

For some reason, use strict surrounded by backticks seems to be incorrectly flagged as not adhering to rules regarding strict being used ("strict, deprecated "global-strict") when strings are also enforce being backticks "quotes": [2, "backticks" ].

From all the JS environments I've used w/ the support of ES6 template strings (Chrome, Firefox, Babel, & I think Microsoft Edge as well), use strict with backticks is correctly recognized as "use strict".

If I'm misunderstood about the implication of these rules, feel free to let me know!

Relevant rules

Here's the rules I'm using to get this behavior:

 "quotes": [
     1,
    "backtick"
  ],

   "strict": [
      2,
      "global"
    ],

  "global-strict" :[
    0
  ],

Other Relevant Information

• ESLint version v0.24.1

Entire Config Object

const ESLintConfig = {
    "rules": {
        "indent": [
            2,
            2,
        ],

        "dot-location":  [
          2,
          "object"
        ],

        "no-return-assign": [
          2
        ],

        "camelcase": [
          2,
          {
            properties: "always"
          },
        ],

        "no-inline-comments": [
          2,
        ],

        "max-nested-callbacks": [
          2,
          3,
        ],

        "linebreak-style": [
            2,
            "unix",
        ],

        "semi": [
            2,
            "always",
        ],

        "use-isnan": [
          2,
        ],

        "space-in-parens": [
          2,
          "always",
          {
            "exceptions": [ "empty", "[]" ],
          }
        ],

        "valid-jsdoc": [
          2,
        ],

        "no-mixed-spaces-and-tabs": [
          2,
        ],

        "quotes": [
          1,
          "backtick"
        ],

        "no-extra-semi": [
          2,
        ],

        "no-var": [
          1,
        ],

        "no-this-before-super": [
          2,
        ],

        "prefer-const": [
          1
        ],

        "computed-property-spacing": [
          2,
          "always",
        ],

        "object-shorthand": [
          2,
          "always",
        ],

        "constructor-super": [
          2,
        ],

        "padded-blocks": [
          2,
          "always",
        ],

        "space-before-function-paren": [
          2,
          "never",
        ],

        "no-multiple-empty-lines": [
          2,
          {
            max: 2,
          }
        ],

        "comma-spacing": [
          2,
          {
            before: false,
            after: true,
          }
        ],

        "no-spaced-func": [
          2
        ],

        "comma-style": [
          2,
          "first",
        ],

        "new-cap": [
          2,
        ],

        "no-trailing-spaces": [
          2,
          {
            skipBlankLines: true,
          }
        ],

        "spaced-comment": [
          2,
          "always",
          {
            exceptions: [ "-" ],
            markers: ["="],
          }
        ],

        "space-infix-ops": [
          2,
          {
            int32Hint: true,
          }
        ],

        "func-style": [
          2,
          "expression",
        ],

        "array-bracket-spacing": [
          2,
          "always",
          {
            "singleValue": false,
            "objectsInArrays": false,
            "arraysInArrays": false,
          }
        ],

        "quote-props": [
          2,
          "as-needed",
        ],

        "valid-typeof": [
          2,
        ],

        "no-control-regex": [
          2,
        ],

        "no-regex-spaces": [
          2,
        ],

        "no-empty": [
          2,
        ],

        "no-extra-boolean-cast": [
          2,
        ],

        "no-dupe-keys": [
          2,
        ],

        "no-negated-in-lhs": [
          2,
        ],

        "no-obj-calls": [
          2,
        ],

        "no-ex-assign": [
          2,
        ],

        "no-unreachable": [
          2,
        ],

        "no-constant-condition": [
          2,
        ],

        "no-sparse-arrays": [
          2,
        ],

        "no-unexpected-multiline": [
          2,
        ],

        "no-dupe-args": [
          2,
        ],

        "no-cond-assign": [
          2,
        ],

        "no-unused-vars": [
          1,
        ],

        "vars-on-top": [
          2,
        ],

        "no-new-wrappers": [
          2,
        ],

        "no-eval": [
          2,
        ],

        "no-multi-spaces": [
          2,
        ],

        "eqeqeq": [
          2,
          "smart"
        ],

        "no-script-url": [
          2,
        ],

        "no-throw-literal": [
          2,
        ],

        "comma-dangle": [
          2,
          "always-multiline",
        ],

        "strict": [
          2,
          "global"
        ],

        "global-strict" :[
          0
        ],

    },
    "env": {
        "es6": true,
        "browser": true,
        "mocha": true
    },

    "globals": {
      "dialogPolyfill": true,
      "$": true,
      "jQuery": true
    }
}

[eslintbot]

Thanks for the issue! We get a lot of issues, so this message is automatically posted to each one to help you check that you've included all of the information we need to help you.

Reporting a bug? Please be sure to include:

1. The version of ESLint you are using (run eslint -v)
2. The source code that caused the problem
3. The configuration you're using (for the rule or your entire config file)
4. The actual ESLint output complete with line numbers

Requesting a new rule? Please be sure to include:

1. The use case for the rule - what is it trying to prevent or flag?
2. Whether the rule is trying to prevent an error or is purely stylistic
3. Why you believe this rule is generic enough to be included

Requesting a feature? Please be sure to include:

1. The problem you want to solve (don't mention the solution)
2. Your take on the correct solution to problem

Including this information in your issue helps us to triage it and get you a response as quickly as possible.

Thanks!

[nzakas]

What warnings are you getting?

[michaelficarra]

@lozandier

Templates cannot be directives. See 14.1.1

A Directive Prologue is the longest sequence of ExpressionStatement productions occurring as the initial StatementListItem or ModuleItem productions of a FunctionBody, a ScriptBody, or a ModuleBody and where each ExpressionStatement in the sequence consists entirely of a StringLiteral token followed by a semicolon.

[mysticatea]

Yes, Templates cannot be directives. So I guessed:

test.js

/* eslint quotes: [2, "backtick"] */
"use strict";

var foo = `test`;

Command & Actual

> node .\bin\eslint.js test.js --no-eslintrc --env es6

test.js
  2:1  error  Strings must use backtick  quotes

✖ 1 problem (1 error, 0 warnings)

Expected

No errors.

[lozandier]

@michaelficarra @mysticatea

Thanks to you both for enlightening me about this, making me much more informed about ES6 template tags than I thought possible from an issue!

Should the quotes: [2, "backticks"] rule accordingly then ignore directives?

It seems that individuals or teams who want to explore enforcing backticks within their JavaScript scripts wouldn't want lint errors in sections of code where it's not possible to be applied?

Assuming people, like me would want to use strict & backticks enforced where possible, perhaps the third property be extended beyond accepting "avoid-escapes"? The strictest route would be throwing an exception if eslint is ran with strict & backticks simultaneously wants to be enforced…

[mysticatea]

I thought this is a bug.
quotes: [2, "backticks"] should not warn the directive prologue.

I have a question, should quotes: [2, "backticks"] enforce single/double quotes on the directive prologue?
Or, maybe we should separate it to a directive-quotes-like rule?

[lozandier]

@mysticatea That's a good question. That should be an option, IMO. The naming for that may be tricky.

Being purposely wildly imaginative, perhaps something like "single-when-needed", "double-when-needed", "single-or-double-when-needed" or the object equivalent { "when-needed": "double" }/ { "last-resort": "single" }?

[michaelficarra]

Just add a directives option with values any, single, and double. Default to single/double/any for quote styles single/double/backtick respectively.

[IanVS]

This is getting complicated. To keep matters simple, I think the rule should not check for directives if backticks option is set, and leave it up to the user whether to use single or double quotes. Behavior should remain as-is for single and double options.

[nzakas]

Agree with @IanVS. Let's keep it simple.

[mysticatea]

OK, I will try to fix.