Smart Clicks ^{VS Code}

Smart selection with double clicks for VS Code.
GIF Demo

Usage

Double clicks on the code.

Rules

bracket-pair

Pair to inner content of brackets.

▽
(foo, bar)
 └──────┘

dash

- to identifier.

   ▽
foo-bar
└─────┘

html-attr

= to HTML attribute.

          ▽
<div class="btn"></div>
     └─────────┘

html-element

< to the entire element.

▽
<div><div></div></div>
└────────────────────┘

html-tag-pair

Open and close tags of a HTML element.

 ▽
<div><div></div></div>
 └─┘              └─┘

js-arrow-fn

=> to arrow function.

       ▽
(a, b) => a + b
└─────────────┘

js-assign

= to assignment.

        ▽
const a = []
└──────────┘

class B {
    ▽
  b = 1;
  └────┘
    ▽
  ba = () => {};
  └────────────┘
}

js-block

Blocks like if, for, while, etc. in JavaScript.

▽
function () {     }
└─────────────────┘

▽
import { ref } from 'vue'
└───────────────────────┘

This rule is disabled by default.

js-colon

: to the value.

     ▽
{ foo: { bar } }
       └─────┘

jsx-tag-pair

Matches JSX elements' start and end tags.

  ▽
(<Flex.Item>Hi</Flex.Item>)
  └───────┘     └───────┘

Configuration

All the rules are enabled by default. To disable a specific rule, set the rule to false in smartClicks.rules of your VS Code settings:

// settings.json
{
  "smartClicks.rules": {
    "dash": false,
    "html-element": false,
    "js-block": true
  }
}

Commands

Usage examples:

1. Command palette

   Invoke the command palette by typing Ctrl+Shift+P and then typing Smart Clicks: Trigger.

2. Keyboard shortcuts

   // keybindings.json
   {
      "key": "ctrl+alt+c",
      "command": "smartClicks.trigger",
      "when": "editorTextFocus"
   }

3. Vim keybindings (VSCodeVim is needed)

   // settings.json
   {
    "vim.normalModeKeyBindings": [
      {
        "before": ["leader", "c"],
        "commands": ["smartClicks.trigger"],
      }
    ]
   }

Sponsors

Credits

Inspired by HBuilderX, initiated by 恐粉龙.

License

MIT License © 2022 Anthony Fu