Giter Club home page Giter Club logo

vscode-toggle-column-selection's Introduction

Toggle Column Selection for Visual Studio Code

Adds a TextMate 2-style Toggle Column Selection command to VSCode

Demo

Features

  • Converts a single contiguous selection into a column selection composed of multiple selections/cursors.
  • Also works in the opposite direction, converting multiple selections/cursors into a single contiguous selection.

Usage

  1. Make a multi-line selection, idealy using your keyboard by holding the SHIFT key while using the arrow keys to move the cursor.
  2. Invoke the Toggle Column Selection command from the Command Palette or use the default keybinding (OPTION/ALT-SHIFT-I).

Note that this extension's default keybinding overrides the default keybinding for the built-in Add Cursors to Line Ends command. But chances are you don't like how that command works or you wouldn't be using the Toggle Column Selection extension.

Crank It To Eleven (aka Tap OPTION to Invoke)

This section only applies to macOS. If you know tools for Windows or Linux that let you trigger actions by simply tapping a modifier key, please let me know or submit a PR.

To truly mimic TextMate's implementation you'll want to trigger this command with a single tap of the OPTION key. Sadly VSCode won't allow you to do this. This is where Karabiner Elements or BetterTouchTool come in.

Option A: Karabiner Elements

Add the following entry to the rules array in your karabiner.json file (located at ~/.config/karabiner/karabiner.json):

{
  "description": "Tap ⌥ to Toggle Column Selection in VSCode",
  "manipulators": [
    {
      "from": {
        "key_code": "left_option"
      },
      "to": [
        {
          "key_code": "left_option"
        }
      ],
      "to_if_alone": [
        {
          "key_code": "i",
          "modifiers": [
            "left_shift",
            "left_option"
          ]
        }
      ],
      "type": "basic",
      "conditions": [
        {
          "type": "frontmost_application_if",
          "bundle_identifiers": [
            "com.microsoft.VSCode"
          ]
        }
      ]
    },
    {
      "from": {
        "key_code": "right_option"
      },
      "to": [
        {
          "key_code": "right_option"
        }
      ],
      "to_if_alone": [
        {
          "key_code": "i",
          "modifiers": [
            "left_shift",
            "left_option"
          ]
        }
      ],
      "type": "basic",
      "conditions": [
        {
          "type": "frontmost_application_if",
          "bundle_identifiers": [
            "com.microsoft.VSCode"
          ]
        }
      ]
    }
  ]
}

Or use this handy URL to install the rule directly into Karabiner: karabiner://karabiner/assets/complex_modifications/import?url=https://raw.githubusercontent.com/erikphansen/vscode-toggle-column-selection/master/karabiner/option-toggle-column-selection-vscode.json. (It seems that GitHub will not allow that to be a clickable link.)

Option B: BetterTouchTool

If you don't want to use Karabiner, you can use BTT to set up a new Key Sequence that maps a single tap of the OPTION key to OPTION-SHIFT-I.

BTT-1 BTT-2

BetterTouchTool TIPS:

  1. Make sure you check the REQUIRED and ORDER RELEVANT boxes for the KEY UP state.
  2. BetterTouchTool treats the left and right OPTION keys as different keys so you'll likely want to create an entry for each key.

vscode-toggle-column-selection's People

Contributors

erikphansen avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.