Search code examples
typescriptvisual-studio-codeeslinttypescript-eslint

Visual Studio Code does not respect my eslint quote rules

Visual Studio Code is not respecting my eslint rules for my typescript project when it comes to quoting. You can find all the config's of my project here: Typescript: Why doesn't visual studio code report the same errors that the command line tsc does?

Here's what Visual Studio Code is doing. If I've got a string like this, "<<link \" \">>' it turns it into this '<<link " ">>' If I've got a string like 'a\'s' it turned into this "a's"

I understand it thinks it's trying to help me, but it's not. As soon as it formats the document, I get red squiggly's telling me the strings aren't matching the quote rules of eslint.

I'm looking all over in the settings to see where Visual Studio Code may be set in conflict with eslint, and I have found a few:

enter image description here

As you can see from my description above, it is not respecting the settings. How do I get Visual Studio Code to respect my eslint quote rules? I have restarted the TS Server and the editor with no effect.

Solution

  • I have discovered that this is being caused by my Prettier extension. https://prettier.io/docs/en/rationale.html#strings

    Double or single quotes? Prettier chooses the one which results in the fewest number of escapes. "It's gettin' better!", not 'It\'s gettin\' better!'. In case of a tie, Prettier defaults to double quotes (but that can be changed via the --single-quote option).

    As far as I can tell, there's no way to get this behavior to work the way eslint wants it to, so the 2 tools will always be fighting with each other. I went to my eslint config and turned off the quotes rule.