Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Fix suggestion for "no-template-curly-in-string" #15574

Closed
wants to merge 6 commits into from
Closed

feat: Fix suggestion for "no-template-curly-in-string" #15574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
63b1ae8
feat: Fix suggestion for "no-template-curly-in-string"
ajuanjojjj Feb 4, 2022
1a45a90
Merge branch 'eslint:main' into main
ajuanjojjj Feb 5, 2022
c08554b
Add more tests to test suggestions
ajuanjojjj Feb 5, 2022
d34ede8
Properly escape and unescape quotes
ajuanjojjj Feb 6, 2022
c5f4226
Escape curly braces, remove eslint-disable comment
ajuanjojjj Feb 7, 2022
9ead2f9
Use `replace` with global regex instead of replaceall
ajuanjojjj Feb 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 24 additions & 4 deletions lib/rules/no-template-curly-in-string.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,23 +22,43 @@ module.exports = {
schema: [],

messages: {
unexpectedTemplateExpression: "Unexpected template string expression."
}
unexpectedTemplateExpression: "Unexpected template string expression.",
convertToTemplate: "Convert to ES6 `template`."
},
hasSuggestions: true
},

create(context) {
const regex = /\$\{[^}]+\}/u;
const sourceCode = context.getSourceCode();

return {
Literal(node) {
if (typeof node.value === "string" && regex.test(node.value)) {
context.report({
node,
messageId: "unexpectedTemplateExpression"
messageId: "unexpectedTemplateExpression",
suggest: [
{
messageId: "convertToTemplate",
fix: fixer => {
const text = sourceCode.getText(node);
const oldQuote = text[0];
const textNoQuotes = text.slice(1, -1);
const escapeBackticks = textNoQuotes.replace(/`/gui, "\\`");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure what exactly CodeQL expects here, but this doesn't check if the backtick was already escaped.

const textNoQuotes = "\\`";
const escapeBackticks = textNoQuotes.replace(/`/gui, "\\`");

console.log(textNoQuotes); // \`
console.log(escapeBackticks); // \\`

For example, when the suggestion fixes this string:

/* eslint no-template-curly-in-string: "error" */

var foo = "\`${bar}";

it will produce a template literal with escaped backslash, but the backtick isn't escaped:

/* eslint no-template-curly-in-string: "error" */

var foo = `\\`${bar}`; // Parsing error, unexpected token $

const regexUnescape = new RegExp(`\\\\${oldQuote}`, "gui");
const unescapeQuotes = escapeBackticks.replace(regexUnescape, oldQuote);
const backTicksInsideCurly = /(?<=\$\{)\\`([^`]*)\\`(?=\})/gui;
const unescapeTemplates = unescapeQuotes.replace(backTicksInsideCurly, "`$1`");
const newText = `\`${unescapeTemplates}\``;

return fixer.replaceText(node, newText);
}
}
]
});
}
}
};

}
};
30 changes: 30 additions & 0 deletions tests/lib/rules/no-template-curly-in-string.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,36 @@ ruleTester.run("no-template-curly-in-string", rule, {
code: "'Hello, ${{foo: \"bar\"}.foo}'",
parserOptions,
errors: [{ messageId }]
},
{
code: "'\\'Hello\\', ${\\'name\\'}'",
parserOptions,
errors: [{ messageId }]
},
{
code: "'\"Hello\", ${\"name\"}'",
parserOptions,
errors: [{ messageId }]
},
{
code: "'`Hello`, ${`name`}'",
parserOptions,
errors: [{ messageId }]
},
{
code: "\"'Hello', ${'name'}\"",
parserOptions,
errors: [{ messageId }]
},
{
code: "\"\\\"Hello\\\", ${\\\"name\\\"}\"",
parserOptions,
errors: [{ messageId }]
},
{
code: "\"`Hello`, ${`name`}\"",
parserOptions,
errors: [{ messageId }]
}
]
});