adiessl / vscode-backtix

A Visual Studio Code extension to switch between string quote types instantly.

BacktiX (vscode-backtix) README

Have you ever started typing an ordinary plain string in JavaScript or TypeScript, only to realize that it actually would be much fancier to use one of those template literals instead?

Have you ever pasted in some code from Stack Overflow that uses double quotes, but your project uses single quotes?

How many steps did you have to take in these cases, only to convert the strings to the desired format?

If your answer to the last question is "Too many" – BacktiX to the rescue! No more fumbling around, just use the quick fixes this extension provides and convert strings instantly.

Features

• Convert any string type to any other string type, for example:

  • Template literals to single quoted strings.
  • Single quoted strings to double quoted strings.
  • Double quoted strings to template literals.

  

• If the target quote character is present in the string, it will be escaped upon conversion, already escaped quote characters will be "unescaped" upon conversion to another quote type.

• Multi-line template literals will be moved to a single line upon conversion, the newline characters will be inlined.

• Expressions in template placeholders will be concatenated with + symbols.

• Easily add placeholders (${}) in template literals.

Adding a placeholder as well as the conversions are offered as quick fixes, three dots below the beginning of a string indicate that there is a quick fix available. Access these by either pressing Ctrl-. (Windows, Linux) or Cmd-. (OSX). Alternatively you can click on the light bulb icon to bring them up.

Instead of using quick fixes it is also possible to use the contributed commands, either from the command palette or by binding them to keyboard shortcuts. Search for BackTix in both cases.

Installation

1. Launch VS Code.
2. Press Ctrl-Shift-X (Windows, Linux) or Shift-Cmd-X (OSX) to bring up the extensions explorer.
3. Search for this extension in Marketplace.
4. Install it.
5. Reload Visual Studio Code.

Requirements

VS Code obviously, apart from that: none.

Extension Settings

Please restart VS Code for any changes to these extension settings to take effect.

This extension contributes the following settings:

• backtix.languages: Select the languages the conversions should be enabled for. Defaults:

  "backtix.languages": {
    "javascript": true,
    "typescript": true,
    "javascriptreact": false,
    "typescriptreact": false
  }

• backtix.conversions: Specify the target quote types you want conversions to be offered for. Defaults:

  "backtix.conversions": {
    "convertToSingleQuotes": true,
    "convertToDoubleQuotes": true,
    "convertToBackticks": true
  }

• backtix.conversionTexts: Specify the tooltip and quick fix texts for the offered conversions. Defaults:

  "backtix.conversionTexts": {
    "convertToSingleQuotes": "Convert to single quotes",
    "convertToDoubleQuotes": "Convert to double quotes",
    "convertToBackticks": "Convert to backticks"
  }

• backtix.placeholders: Options for 'Add placeholder.'. Defaults:

  "backtix.placeholders": {
    "active": true,
    "text": "Add placeholder"
  }

Known Issues

Parentheses (or lack thereof)

Example 1:

console.log(`The sum of 1 and 2 is ${1 + 2}.`);
// The sum of 1 and 2 is 3.

If you convert the backticks to single quotes you will get the following result:

console.log('The sum of 1 and 2 is ' + 1 + 2 + '.');
// The sum of 1 and 2 is 12.

Correctly it would have to be:

console.log('The sum of 1 and 2 is ' + (1 + 2) + '.');
// The sum of 1 and 2 is 3.

Example 2:

const myOpinion = `Template literals are the ${1 < 3 ? 'greatest' : 'worst'} thing since sliced bread.`;

If you convert the backticks to single quotes, the result will look like this:

const myOpinion = 'Template literals are the ' + 1 < 3 ? 'greatest' : 'worst' + ' thing since sliced bread.';

This will give you an error saying Operator '<' cannot be applied to types 'string' and 'number'. To correct this, parentheses would have to be applied in one of the following ways:

const myOpinion = 'Template literals are the ' + (1 < 3) ? 'greatest' : 'worst' + ' thing since sliced bread.';

const myOpinion = 'Template literals are the ' + (1 < 3 ? 'greatest' : 'worst') + ' thing since sliced bread.';

Why are parentheses not just always added then?

The reason this does not happen at the moment is that it does not make sense or rather does not look good to add them in all situations. Consider the following example:

console.log(`The result is ${x}.`);

The conversion to single quotes would produce superfluous parentheses in this case.

console.log('The result is ' + (x) + '.');

In order to avoid that I would have to find some clever way to determine when to add parentheses and when not to. And since it is way harder to delete parentheses in VS Code than it is to add them (just select the text you want the parentheses to be around and press the desired opening parentheses key), this is not the first priority.

Other

None at the moment.

Please open an issue on GitHub should you come across a string conversion that does not lead to the desired result so I can have a look into what is going wrong. Thanks!

Release Notes

See the change log (CHANGELOG.md) for detailed release information.

vscode-backtix's Issues

how to convert single/double quoted strings with variables to backticks with template literals

When you've got a string like this

'/services/data/'+API_VERSION+'/sobjects/'+objectName+'/' + externalIdField+'/'

how do you convert this into

`/services/data/${API_VERSION}/sobjects/${objectName}/${externalIdField}/`

Am I missing something?

This is an awesome extension for JS devs. Thanks!

You can close this issue, but I just wanted to note that this little extension save so much time. Thank you for making it and sharing it!

Options to disable quick fix / trigger with command

So I'm trying to just trigger toggling between quotes using a command and hiding the quick fix "...". Any thoughts? Right now there is a "contributed command" that fails when you try to run it:

Quotes in template literals do not get escaped upon conversion

This conversion works:

const works = `This is a "test".`;

This one does not:

const fails = `This is a "test": ${works}`;

Spurious error prevents correct problem tracking

When this is enabled, I am getting "Not showing NNN further errors and warnings" in every JavaScript file.

There are no errors or warnings as running ESLint manually demonstrates.

This stops VScode problem tracking from being useful since it only lists 250 issues. It means that real issues from later in the file are never shown.

I have started VScode with a clean profile and ensured that all other extensions are disabled.

BacktiX v2.1.0, VScode 1.77.0

Add a way to disable tooltips

TL;DR: I'd like to be able to turn off the tooltips.

This tool is great and does what I want, but it puts a "..." underneath the first character of every string in my code. Hovering over it pops up a tooltip, but I'm not sure how that helps because it does not have any quickfix options, as you can see below:

I don't want to see the "..." or the tooltips because they distract me and obscure my view of the code, respectively. It seems like settings exist for changing the text of them, but I haven't been able to figure out how to turn them off:

"backtix.conversionTexts": {
  "convertToSingleQuotes": "Convert to single quotes",
  "convertToDoubleQuotes": "Convert to double quotes",
  "convertToBackticks": "Convert to backticks"
}

I skimmed https://github.com/adiessl/vscode-backtix/blob/master/src/core/backtixCodeActionProvider.ts but nothing jumped out at me.

Should work on .tsx files as well

currently only applies to .ts