hideoo/toggler-vscode

Visual Studio Code extension - Toggle words and symbols

Toggler

Toggle words and symbols in VS Code using a user defined configuration.

Features

A word and symbol toggling extension for Visual Studio Code with the following features:

• Easily user customizable.
• Maintain word case.
• Multiple toggles support.
• Multiple cursors support.
• Multiple selections support.
• No dependency.

Usage

Set your cursor on a word or select a word and press the associated keybinding (Ctrl+r by default on macOS, Alt+r on Windows and Linux).

You can also use the VS Code Command Palette and choose the Toggle command, or use the Toggle action in a context menu. A Toggle Reverse command is also available to toggle to the previous word instead of the next one.

Configuration

You can customize the default configuration directly in your VS Code settings or using the Customize toggles command:

"toggler.toggles": [
  [
    "custom_1",
    "custom_2"
  ],
  [
    "custom_3",
    "custom_4"
  ]
]

Toggler is bundled with these default toggles:

[
  ["absolute", "relative"],
  ["high", "low"],
  ["horizontal", "vertical"],
  ["inner", "outer"],
  ["left", "right"],
  ["top", "bottom"],
  ["ltr", "rtl"],

  ["black", "white"],
  ["gray", "maroon", "red", "purple", "fuchsia", "green", "yellow", "blue", "aqua"],

  ["const", "let", "var"],
  ["import", "export"],
  ["join", "split"],
  ["JSON.parse", "JSON.stringify"],
  ["parse", "stringify"],
  ["pop", "push"],
  ["unshift", "shift"],
  ["test.only", "test"],
  ["describe.only", "describe"],
  ["interface", "type"],

  ["onAnimationStart", "onAnimationEnd"],
  ["onChange", "onInput", "onSubmit"],
  ["onClick", "onDoubleClick"],
  ["onCompositionStart", "onCompositionEnd"],
  ["onCopy", "onCut", "onPaste"],
  ["onDragEnter", "onDragLeave"],
  ["onDragStart", "onDragEnd"],
  ["onFocus", "onBlur"],
  ["onKeyDown", "onKeyUp"],
  ["onMouseDown", "onMouseUp"],
  ["onMouseEnter", "onMouseLeave"],
  ["onTouchStart", "onTouchEnd"],
  ["addEventListener", "removeEventListener"],
  ["animationstart", "animationend"],
  ["change", "input", "submit"],
  ["dblclick", "click"],
  ["compositionstart", "compositionend"],
  ["copy", "cut", "paste"],
  ["dragenter", "dragleave"],
  ["dragstart", "dragend"],
  ["focus", "blur"],
  ["keydown", "keyup"],
  ["mousedown", "mouseup"],
  ["mouseenter", "mouseleave"],
  ["touchstart", "touchend"],

  ["componentDidMount", "componentDidUpdate", "componentWillUnmount"],
  ["useState", "useEffect", "useContext", "useMemo", "useRef", "useReducer", "useCallback"],
  ["getState", "setState"],
  ["container", "component"],

  ["atan", "tan"],
  ["ceil", "floor"],
  ["cos", "sin"],
  ["Math.atan", "Math.tan"],
  ["Math.ceil", "Math.floor"],
  ["Math.cos", "Math.sin"],
  ["Math.min", "Math.max"],
  ["min", "max"],

  ["deactivate", "activate"],
  ["address", "port"],
  ["add", "remove"],
  ["unavailable", "available"],
  ["background", "foreground"],
  ["before", "after"],
  ["client", "server"],
  ["disconnected", "connected"],
  ["disconnect", "connect"],
  ["development", "production"],
  ["dev", "prod"],
  ["drag", "drop"],
  ["file", "folder"],
  ["first", "last"],
  ["from", "to"],
  ["get", "set"],
  ["input", "output"],
  ["uninstall", "install"],
  ["all", "each", "only"],
  ["key", "value"],
  ["unload", "load"],
  ["minor", "major"],
  ["online", "offline"],
  ["open", "close"],
  ["parent", "child"],
  ["positive", "negative"],
  ["prefix", "suffix"],
  ["previous", "next"],
  ["public", "private", "protected"],
  ["request", "response"],
  ["req", "res"],
  ["row", "column"],
  ["short", "long"],
  ["show", "hide"],
  ["source", "destination"],
  ["start", "stop"],
  ["invalid", "valid"],
  ["visible", "hidden"],
  ["width", "height"],
  ["x", "y"],

  ["0", "1"],
  ["enabled", "disabled"],
  ["enable", "disable"],
  ["if", "else"],
  ["on", "off"],
  ["true", "false"],
  ["yes", "no"],

  ["div", "span"],
  ["head", "body"],
  ["header", "footer"],
  ["ol", "ul"],
  ["tr", "td"],

  ["in", "out"],
  ["up", "down"],

  ["[]", "{}"],
  ["(", ")"],
  ["[", "]"],
  ["{", "}"],
  ["'", "\"", "`"],

  ["*=", "/="],
  ["*", "/"],
  ["&&", "||"],
  ["&", "|"],
  ["++", "--"],
  ["+=", "-="],
  ["+", "-"],
  ["<<", ">>"],
  ["<=", ">="],
  ["<", ">"],
  ["===", "!=="],
  ["==", "!="]
]

If these default toggles don't fit your preferences, you can disable them in your settings to only use custom toggles.

License

Licensed under the MIT License, Copyright © HiDeoo.

See LICENSE for more information.

toggler-vscode's Issues

Toggling without selecting a word will toggle only a subset of the word if it matched first

Repro:
* Open new file
* Type inner
* Place cursor between I and N
* Toggle

Expected:
Word is now outer

Actual:
Word is now outner, because it toggled in first instead of inner

Bug:uppercase => lowercase

expect:
["trim","trimStart","trimEnd"]
current:
["trim","trimstart","trimend"]

Default toggles addition

Is your feature request related to a problem?

No, just some suggestions to be added?

Describe the solution you'd like

Foreword

• The principle is that it's better to have many different options as it's easy cycle between them.
• Can you have different lists relative to the current editor/programming language?

Misc

• ["and", "or"], (useful in Python)
• ["null", "undefined", "NaN", "None", "nil"], (JavaScript, Python…)
• ["map", "reduce", "filter"],
• ["thead", "tbody", "tfoot"],
• ["dark", "light"],
• ["hot", "warm", "cool", "cold"],
• Log levels + success: ["success", "critical", "error", "warning", "notice", "info", "debug"], (Wikipedia)
  • Or Bootstrap: ["success", "warning", "danger", "info"],

Change these?

From	To
["x", "y"],	["x", "y", "z"],
["start", "stop"],	["start", "stop", "end", "pause"],
["left", "right"],	["left", "right", "middle", "center", "justify"],
["head", "body"],	["head", "body", "foot"],
["row", "column"],	["row", "col", "column"],
["minor", "major"],	["minor", "major", "patch"], [1]
["if", "else"],	["if", "else", "elseif", "elif", "elsif"], [2]

• [1]: Cf. semantic versioning.
• [2]: Else if › PHP, Python, Ruby/Perl. "else if" is not possible, right?

Ordinal numeral (Wikipedia)

• Spatial or chronological: ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth", "eleventh", "twelfth"],
• Precedence or effect: ["primary", "secondary", "tertiary", "quaternary", "quinary", "senary", "septenary", "octonary", "nonary", "decenary", "undenary", "duodenary"],
• Greek prefix: ["proto", "deutero", "trito", "tetarto", "pempto", "hecto", "hepta", "ogdo", "enato", "decato", "endecato", "dodecato"],
• Numbers: ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve"],
  • And ["un", "dos", "tres", "un pasito pa'delante, Maria", "un pasito pa' atras"], 😂

Note: ChatGPT › quaternary rather than quartary, hecto over ecto, hepta over ebdomo/hebdomo.

Metasyntactic variables (Wikipedia)

Metasyntactic variables used commonly across all programming languages include foobar, foo, bar, baz, qux, quux, corge, grault, garply, waldo, fred, plugh, xyzzy, and thud.

The followings are surely enough: ["foo", "bar", "baz", "waldo", "fred", "toto"],
Note: toto is often used in French.

This could be useful when we don't remember all the names. By typing the last one we know and toggling it to get the next one.

Describe alternatives you've considered

No response

Additional Context

No response

Inconsistent/confusing handling of cursor position

It seems that it can toggle the word to the left or to the right of the cursor, which can be handy I guess, but can also be confusing and cause inconsistent behavior, especially combined with the fact that the cursor can end up in a different position after a toggle causing multiple toggles in a row to not always circle back to the original value.

For example:

Use case 1:
The text: "getCustomInput"
Cursor position: before the word "get"
Toggle-configuration for the word "custom": <not set>
Toggle result: "getCustomInput" -> "setCustomInput" -> "getCustomInput"
Cursor movement: before the word "get" -> after the word "set" -> after the word "get"
Expected: same toggle result, but with the cursor remaining before the word "get"/"set"

Use case 2:
The text: "getFirstInput"
Cursor position: before the word "get"
Toggle-configuration for the word "first": "last"
Toggle result: "getFirstInput" -> "setFirstInput" -> "setLastInput" -> "setLastOutput" -> "setLastInput" -> "setLastOutput" ...
Cursor movement: before the word "get" -> after the word "set" -> after the word "Last" -> after the word "In" -> after the word "Out" -> after the word "In" ...
Expected toggle result: "getFirstInput" -> "setFirstInput" -> "getFirstInput"
Expected cursor movement: staying before the word "get"/"set"

Toggling on a camel case word should not handle sub-words that don't follow the camel case

First of all: Great plugin! :)

Now, here is my bug report:

The text: "setInformation"
Toggle-configuration for the word "information": not set
Cursor position: after the last n character
Expected toggle result:
Actual result: "setInformatioff"

I think that when it detects a mix of cases (ie not all upper or all lower case) it should only identify words on camel case intersections (or non word characters, like dashes etc). So the word "Information" above should not be divided into sub parts.

Or, if this change would break some other functionally, that I don't know about, maybe add the possibility to configure this.

Removing/replacing defaults

Hi! Thanks for the great plugin.

I'd like to remove the default toggles from the config — they are a bit of a nuisance since many of them are partially the same as mine (for example i have ['body', 'header'] which conflicts with the default ['body', 'head']). Is it possible?

On/Off has weird behavior on MacOS (12.2.1)

When I have the word on, and try to use toggler, it goes to oy. I have tried using the keyboard shortcut troubleshooter, but it appears to be something inside the extension. Also, if I have off, toggler toggles it to on, and then if I toggler it again, on still goes to oy.

OS - macOS 12.2.1 (21D62) [MacBook Pro 15-inch, 2017]
VSCode Info:

Version: 1.64.2
Commit: f80445acd5a3dadef24aa209168452a3d97cc326
Date: 2022-02-09T22:00:58.347Z
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Darwin x64 21.3.0

I originally had the key changed from CTRL+R to CTRL+T, and I tried reverting that setting, but the issue still persists.

Extension Information from VSCode:

Name: Toggler
Id: hideoo.toggler
Description: Toggle words and symbols
Version: 0.3.0
Publisher: HiDeoo
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=hideoo.toggler

If you need, I can try to get a .gif of this behavior. Thank HiDeoo for the wonderful tool! I use it daily! 🙏

toggleable notification

Hi there !

I was wondering if the notification could be disabled, could it be possible to have a setting for that ?

Anyway, damn cool extension ! So practical, very very handy ! Thanks much !

Feature request: add a option or shortcut to "toggle-reverse",thanks

left->center->right
left<-center<-right

Toggle surrounding characters while inside the expression

Would it be possible to have this toggle the next surrounding pair from the inside (without having to move to the desired character first).

What I mean is something like the Toggle Quotes extension. Basically you can be inside a string and press the key bind and it will cycle through the available quote characters without having to move to the opening/closing quote. This could also work from inside parenthesis, brackets, etc.

Example:

''Hello [cursor] world'' -> Hello [cursor] world -> 'Hello [cursor] world'
[hi there] -> {hi there}