I don’t know exactly how to express it in words to find related problems. In some cases, apparently random, when using JavaScript string templates, the text editor loses becomes white, with bold text and makes editing the code very difficult.
First appearance of the problem was when I started working with javascript string for GraphQL query, then it started showing up working with React and mainly storybook.
The problem does not always occur instantly, for example, I am editing the code and it works perfectly, when I restart the machine and reopen vscode, the template is like this.
The question is, what is the source of this problem and how can I fix it to keep the original hightlight to work?
[EDIT] After disable all extensions, the issue still happen.
This is the minimal example possible without extensions:
const text1 = `
This is a test
`
const text2 = `
This is a test ${string}
`
const text3 = `
This is a test this is a test ${string}
`
What is the exact vscode configuration that set to keep string like text1 and text2 in any possible case?
Advertisement
Answer
I tried and didn’t get the effect so I cannot test it. And it means two things:
You have another extension installed on your vscode which has a bug or has conflicts with the original editor’s color validation.
Your vscode has some settings turned off.
I guess the first one is correct. Please disable all extensions and test if it is ok then turn them on one by one and see which one make problems.
I saw comments above after I wrote this. And it seems Matt Bierner has also mentioned something like this. If this works give him a thumbs up as he said it sooner 😉