in SonarQube the following code results in javascript:S3786:

const size = "100";
const str = "<Component :style='{ width: `${size}pt` }'/>";

which imho completely ignores the string template ticks around the template placeholder variable.

could the check function be optimized here to take this into account?

Sorry but I don’t follow, in your example you have a string containing template-like syntax ${x} which is not actually evaluated. str will NOT have value <Component :style='{ width: 100pt }'/>.

So I believe it’s a rightful issue.

1 Like

um yes, you are right. the example does not give the full picture.

actually, str is going to be evaluated by a framework that knows how to transform an attribute value like ‘{ width: `${size}pt` }’ in such a component string.

still, i think sonarlint should take the ticks into account before considering the template literal placeholder being inside of a normal string…

Hi Tobi,

How SonarLint can know that presence of backticks inside of string literal means something special? I can recommend you disabling the rule if you are using such templating system as probably most (or all) of reported issues will be wrong.

yes i see, this would be too much magic indeed. gotta think about what is worse, disabling the rule or living with the sonarqube alert… thanks for your insights, elena.

P.S. It’s possible to disable the rule on particular files ( Project Settings > General Settings > Analysis Scope > Issues).

1 Like

one late remark because i found out there is a pretty easy solution to this, anyway, by simply wrapping the whole expression into a template string and reorganizing the quotation marks:

const size = "100";
const str = `<Component :style="{ width: '${size}pt' }"/>`;


at least it works in my case – just as your suggestion about disabling the rule on a particular file (type) does, elena. thanks!