antfu/vscode-smart-clicks

Smart selection with double clicks for VS Code.

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 = []
└──────────┘

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
  }
}

Sponsors

Credits

Inspired by HBuilderX, initiated by 恐粉龙.

License

MIT License © 2022 Anthony Fu