Tslint: [quotemark: backtick] Incorrectly flags string literals that must use single/double quotes

[ericbf]

Bug Report

• __TSLint version__: 5.12.1
• __TypeScript version__: 3.1.6
• __Running TSLint via__: Atom

TypeScript code being linted

import { Something } from "some-package"

export const object = {
        "kebab-case": Something.value
}

with tslint.json configuration:

{
        "rules": {
                "quotemark": [true, "backtick"]
        }
}

Actual behavior

The string literal in the import is flagged (and changed to backticks if --fix is enabled). The string in the object key is flagged (and changed to backticks if --fix is enabled). These changes break the syntax as typescript requires that those strings be strictly string literals (double or single quoted strings, according to the grammar), not no-template literals.

Expected behavior

As the instances of double quotes are all required by the language, there should be no flags by tslint in the above excerpt.

[ericbf]

There may be some other situations I missed, but these are the ones I've noticed.

[JoshuaKGoldberg]

Thanks for filing this @ericbf! It should be a small change to the quotemark rule to not check a ModuleSpecifier node if the backtick option.

[spencersmb]

Bug Report

• TSLint version: 5.12.1
• TypeScript version: 3.3.3
• Running TSLint via: Webstorm v2018.3.4

TypeScript code being linted

import React from 'react'
import { Link } from 'gatsby'
import WithDevTools from '../components/devToolExt'

import Layout from '../components/layout'
import Image from '../components/image'
import SEO from '../components/seo'

const IndexPage = () => (
  <Layout>
    <SEO title='home' keywords={[`gatsby`, `application`, `react`]} />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to='/page-2/'>Go to page 2</Link>
    <WithDevTools/>
  </Layout>
)

export default IndexPage

with tslint.json configuration:

{
        "rules": {
                "quotemark": [true, "backtick"]
        }
}

Actual behavior

The string literal in the import is flagged (and changed to backticks on save). The string in the title prop on SEO component is changed to double quotes. Typescript defaults to double quotes in JSX possibly.

Expected behavior

All instances of single or double quotes should be changed to backticks, with the exception of import statements.

Source Code

Repo Link

[jpidelatorre]

Some additional cases:

// Obviously use strict can't use backticks
'use strict'

// Enum values can't have backticks around them
enum Sides {
  '<- Left',
  'Right ->'
}

// Octals are not allowed in template strings and
// Typescript will turn them into invalid hex escapes
const octal = '\117\103\124\101\114'

[adidahiya]

@jpidelatorre please file a new issue (use the template) for additional bugs, thanks

[ericbf]

@jpidelatorre @adidahiya created #4692 for those cases and another I found (lookup types).

[jpidelatorre]

@ericbf Thanks a lot. I had forgotten about that.