Skip to content
This repository has been archived by the owner on Mar 25, 2021. It is now read-only.

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

Closed
ericbf opened this issue Feb 10, 2019 · 7 comments · Fixed by #4535
Closed

Comments

@ericbf
Copy link
Contributor

ericbf commented Feb 10, 2019

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
Copy link
Contributor Author

ericbf commented Feb 10, 2019

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

@JoshuaKGoldberg
Copy link
Contributor

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
Copy link

spencersmb commented Feb 11, 2019

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
Copy link

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
Copy link
Contributor

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

@ericbf
Copy link
Contributor Author

ericbf commented May 1, 2019

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

@jpidelatorre
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants