2 | 
3 |
Smart Clicks VS Code
6 | 7 |
8 | 
9 |
12 | Smart selection with double clicks for VS Code.
13 | GIF Demo
14 |
62 | └────────────────────┘
63 | ```
64 |
65 | #### [`html-tag-pair`](https://github.com/antfu/vscode-smart-clicks/blob/main/src/rules/html-tag-pair.ts)
66 |
67 | Open and close tags of a HTML element.
68 |
69 | ```html
70 | ▽
71 |
72 | └─┘ └─┘
73 | ```
74 |
75 | #### [`js-arrow-fn`](https://github.com/antfu/vscode-smart-clicks/blob/main/src/rules/js-arrow-fn.ts)
76 |
77 | `=>` to arrow function.
78 |
79 | ```js
80 | ▽
81 | (a, b) => a + b
82 | └─────────────┘
83 | ```
84 |
85 | #### [`js-assign`](https://github.com/antfu/vscode-smart-clicks/blob/main/src/rules/js-assign.ts)
86 |
87 | `=` to assignment.
88 |
89 | ```js
90 | ▽
91 | const a = []
92 | └──────────┘
93 |
94 | class B {
95 | ▽
96 | b = 1;
97 | └────┘
98 | ▽
99 | ba = () => {};
100 | └────────────┘
101 | }
102 | ```
103 |
104 | #### [`js-block`](https://github.com/antfu/vscode-smart-clicks/blob/main/src/rules/js-block.ts)
105 |
106 | Blocks like `if`, `for`, `while`, etc. in JavaScript.
107 |
108 | ```js
109 | ▽
110 | function () { }
111 | └─────────────────┘
112 | ```
113 |
114 | ```js
115 | ▽
116 | import { ref } from 'vue'
117 | └───────────────────────┘
118 | ```
119 |
120 | This rule is _disabled_ by default.
121 |
122 | #### [`js-colon`](https://github.com/antfu/vscode-smart-clicks/blob/main/src/rules/js-colon.ts)
123 |
124 | `:` to the value.
125 |
126 | ```js
127 | ▽
128 | { foo: { bar } }
129 | └─────┘
130 | ```
131 |
132 | #### [`jsx-tag-pair`](https://github.com/antfu/vscode-smart-clicks/blob/main/src/rules/jsx-tag-pair.ts)
133 |
134 | Matches JSX elements' start and end tags.
135 |
136 | ```jsx
137 | ▽
138 | (
199 |
200 | 
201 |
202 |
\n└────────────────────┘\n```"
83 | },
84 | "html-tag-pair": {
85 | "type": "boolean",
86 | "default": true,
87 | "description": "Open and close tags of a HTML element.\n\n```html\n ▽\n
\n └─┘ └─┘\n```"
88 | },
89 | "js-arrow-fn": {
90 | "type": "boolean",
91 | "default": true,
92 | "description": "`=>` to arrow function.\n\n```js\n ▽\n(a, b) => a + b\n└─────────────┘\n```"
93 | },
94 | "js-assign": {
95 | "type": "boolean",
96 | "default": true,
97 | "description": "`=` to assignment.\n\n```js\n ▽\nconst a = []\n└──────────┘\n```"
98 | },
99 | "js-block": {
100 | "type": "boolean",
101 | "default": false,
102 | "description": "Blocks like `if`, `for`, `while`, etc. in JavaScript.\n\n```js\n▽\nfunction () { }\n└─────────────────┘\n```\n\n```js\n▽\nimport { ref } from 'vue'\n└───────────────────────┘\n```"
103 | },
104 | "js-colon": {
105 | "type": "boolean",
106 | "default": true,
107 | "description": "`:` to the value.\n\n```js\n ▽\n{ foo: { bar } }\n └─────┘\n```"
108 | },
109 | "jsx-tag-pair": {
110 | "type": "boolean",
111 | "default": true,
112 | "description": "Matches JSX elements' start and end tags.\n\n```jsx\n ▽\n(
24 |
25 |
62 |
63 |
--------------------------------------------------------------------------------
/playground/main.ts:
--------------------------------------------------------------------------------
1 | import { extname, isAbsolute, resolve } from 'pathe'
2 | import { isNodeBuiltin } from 'mlly'
3 | import { normalizeModuleId, normalizeRequestId, slash, toFilePath } from './utils'
4 | import type { ModuleCache, ViteNodeRunnerOptions } from './types'
5 |
6 | export const DEFAULT_REQUEST_STUBS = {
7 | '/@vite/client': {
8 | injectQuery: (id: string) => id,
9 | createHotContext() {
10 | return {
11 | accept: () => {},
12 | prune: () => {},
13 | dispose: () => {},
14 | decline: () => {},
15 | invalidate: () => {},
16 | on: () => {},
17 | }
18 | },
19 | updateStyle() {},
20 | },
21 | }
22 |
23 | export class ModuleCacheMap extends Map26 | 27 | Vitesse Lite 28 | 29 |
30 |31 | Opinionated Vite Starter Template 32 |
33 | 34 | 35 | 36 | 51 | 52 |
53 |
60 |
61 |
11 | * └────────────────────┘
12 | * ```
13 | *
14 | * @name html-element
15 | * @category html
16 | */
17 | export const htmlElementHandler: Handler = {
18 | name: 'html-element',
19 | handle({ getAst, doc, anchor }) {
20 | const asts = getAst('html')
21 | if (!asts.length)
22 | return
23 |
24 | const range = doc.getWordRangeAtPosition(anchor, /\s{0,2}
11 | * └─┘ └─┘
12 | * ```
13 | *
14 | * @name html-tag-pair
15 | * @category html
16 | */
17 | export const htmlTagPairHandler: Handler = {
18 | name: 'html-tag-pair',
19 | handle({ getAst, selection, doc, withOffset }) {
20 | const asts = getAst('html')
21 | if (!asts.length)
22 | return
23 |
24 | const range = doc.getWordRangeAtPosition(selection.start, /[\w.\-]+/) || selection
25 | const rangeText = doc.getText(range)
26 | const preCharPos = withOffset(range.start, -1)
27 | const preChar = doc.getText(new Range(preCharPos, range.start))
28 | const postCharPos = withOffset(range.end, 1)
29 | const postChar = doc.getText(new Range(range.end, postCharPos))
30 |
31 | const preIndex = preChar === '<' ? doc.offsetAt(preCharPos) : -1
32 | const postIndex = postChar === '>' ? doc.offsetAt(postCharPos) : -1
33 |
34 | if (postIndex < 0 && preIndex < 0)
35 | return
36 |
37 | for (const ast of asts) {
38 | for (const node of traverseHTML(ast.root)) {
39 | if (node.rawTagName !== rangeText || !('isVoidElement' in node) || node.isVoidElement)
40 | continue
41 |
42 | // from start tag to end tag
43 | if (node.range[0] + ast.start === preIndex) {
44 | const body = doc.getText(new Range(
45 | preCharPos,
46 | doc.positionAt(node.range[1] + ast.start),
47 | ))
48 |
49 | if (body.trimEnd().endsWith('/>'))
50 | return range
51 |
52 | const endIndex = body.lastIndexOf(``)
53 | if (endIndex) {
54 | return [
55 | range,
56 | new Selection(
57 | doc.positionAt(preIndex + endIndex + 2),
58 | doc.positionAt(preIndex + endIndex + 2 + node.rawTagName.length),
59 | ),
60 | ]
61 | }
62 | }
63 |
64 | // from end tag to start tag
65 | if (node.range[1] === postIndex) {
66 | return [
67 | new Selection(
68 | doc.positionAt(node.range[0] + 1),
69 | doc.positionAt(node.range[0] + 1 + node.rawTagName.length),
70 | ),
71 | range,
72 | ]
73 | }
74 | }
75 | }
76 | },
77 | }
78 |
--------------------------------------------------------------------------------
/src/rules/index.ts:
--------------------------------------------------------------------------------
1 | import { toArray } from '@antfu/utils'
2 | import type { Range, Selection } from 'vscode'
3 | import { workspace } from 'vscode'
4 | import { log } from '../log'
5 | import type { Handler, HandlerContext } from '../types'
6 | import { bracketPairHandler } from './bracket-pair'
7 | import { dashHandler } from './dash'
8 | import { htmlAttrHandler } from './html-attr'
9 | import { htmlElementHandler } from './html-element'
10 | import { htmlTagPairHandler } from './html-tag-pair'
11 | import { jsArrowFnHandler } from './js-arrow-fn'
12 | import { jsAssignHandler } from './js-assign'
13 | import { jsBlockHandler } from './js-block'
14 | import { jsColonHandler } from './js-colon'
15 | import { jsxTagPairHandler } from './jsx-tag-pair'
16 |
17 | export const handlers: Handler[] = [
18 | // html
19 | htmlTagPairHandler,
20 | htmlElementHandler,
21 | htmlAttrHandler,
22 |
23 | // js
24 | jsxTagPairHandler,
25 | jsArrowFnHandler,
26 | jsBlockHandler,
27 | jsAssignHandler,
28 | jsColonHandler,
29 |
30 | // general
31 | dashHandler,
32 | bracketPairHandler,
33 | ]
34 |
35 | function stringify(range: Range | Selection) {
36 | return `${range.start.line}:${range.start.character}->${range.end.line}:${range.end.character}`
37 | }
38 |
39 | export function applyHandlers(context: HandlerContext) {
40 | const config = workspace.getConfiguration('smartClicks')
41 | const rulesOptions = config.get('rules', {}) as any
42 |
43 | for (const handler of handlers) {
44 | if (rulesOptions[handler.name] === false)
45 | continue
46 | let selection = handler.handle(context)
47 | if (selection) {
48 | selection = toArray(selection)
49 | log.log(`[${handler.name}] ${selection.map(stringify).join(', ')}`)
50 | return selection
51 | }
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/rules/js-arrow-fn.ts:
--------------------------------------------------------------------------------
1 | import traverse from '@babel/traverse'
2 | import { Selection } from 'vscode'
3 | import type { Handler } from '../types'
4 |
5 | const supportedNodeType = [
6 | 'ArrowFunctionExpression',
7 | ]
8 |
9 | /**
10 | * `=>` to arrow function.
11 | *
12 | * ```js
13 | * ▽
14 | * (a, b) => a + b
15 | * └─────────────┘
16 | * ```
17 | *
18 | * @name js-arrow-fn
19 | * @category js
20 | */
21 | export const jsArrowFnHandler: Handler = {
22 | name: 'js-arrow-fn',
23 | handle({ doc, getAst, anchorIndex, anchor, chars }) {
24 | if (!chars.includes('='))
25 | return
26 |
27 | const asts = getAst('js')
28 | if (!asts.length)
29 | return
30 |
31 | const range = doc.getWordRangeAtPosition(anchor, /=>/)
32 | if (!range || range.isEmpty)
33 | return
34 |
35 | for (const ast of getAst('js')) {
36 | const relativeIndex = anchorIndex - ast.start
37 |
38 | let result: Selection | undefined
39 | traverse(ast.root, {
40 | enter(path) {
41 | if (path.node.start == null || path.node.end == null)
42 | return
43 | if (relativeIndex > path.node.end || path.node.start > relativeIndex)
44 | return path.skip()
45 | if (!supportedNodeType.includes(path.node.type)) {
46 | // log.debug(`[js-arrow-fn] Unknown ${path.node.type}`)
47 | return
48 | }
49 | result = new Selection(
50 | doc.positionAt(ast.start + path.node.start),
51 | doc.positionAt(ast.start + path.node.end),
52 | )
53 | },
54 | })
55 |
56 | if (result)
57 | return result
58 | }
59 | },
60 | }
61 |
--------------------------------------------------------------------------------
/src/rules/js-assign.ts:
--------------------------------------------------------------------------------
1 | import traverse from '@babel/traverse'
2 | import { Range, Selection } from 'vscode'
3 |
4 | // import { log } from '../log'
5 | import type { Handler } from '../types'
6 |
7 | const supportedNodeType = [
8 | 'TSTypeAliasDeclaration',
9 | 'VariableDeclaration',
10 | 'AssignmentExpression',
11 | 'ClassProperty',
12 | ]
13 |
14 | /**
15 | * `=` to assignment.
16 | *
17 | * ```js
18 | * ▽
19 | * const a = []
20 | * └──────────┘
21 | *
22 | * class B {
23 | * ▽
24 | * b = 1;
25 | * └────┘
26 | * ▽
27 | * ba = () => {};
28 | * └────────────┘
29 | * }
30 | * ```
31 | *
32 | * @name js-assign
33 | * @category js
34 | */
35 | export const jsAssignHandler: Handler = {
36 | name: 'js-assign',
37 | handle({ doc, getAst, chars, anchorIndex, withOffset, anchor }) {
38 | if (!chars.includes('='))
39 | return
40 |
41 | const asts = getAst('js')
42 | if (!asts.length)
43 | return
44 |
45 | if (doc.getText(new Range(anchor, withOffset(anchor, 2))).includes('=>'))
46 | return
47 |
48 | for (const ast of getAst('js')) {
49 | const relativeIndex = anchorIndex - ast.start
50 |
51 | let result: Selection | undefined
52 | traverse(ast.root, {
53 | enter(path) {
54 | if (path.node.start == null || path.node.end == null)
55 | return
56 | if (relativeIndex > path.node.end || path.node.start > relativeIndex)
57 | return path.skip()
58 | if (!supportedNodeType.includes(path.node.type)) {
59 | // log.debug('[js-assign] Unknown type:', path.node.type)
60 | return
61 | }
62 | result = new Selection(
63 | doc.positionAt(ast.start + path.node.start),
64 | doc.positionAt(ast.start + path.node.end),
65 | )
66 | },
67 | })
68 |
69 | if (result)
70 | return result
71 | }
72 | },
73 | }
74 |
--------------------------------------------------------------------------------
/src/rules/js-block.ts:
--------------------------------------------------------------------------------
1 | import traverse from '@babel/traverse'
2 | import { Selection } from 'vscode'
3 | import type { Node } from '@babel/types'
4 |
5 | // import { log } from '../log'
6 | import type { Handler } from '../types'
7 |
8 | const supportedNodeType = [
9 | 'BlockStatement',
10 | 'CatchClause',
11 | 'ClassDeclaration',
12 | 'DoWhileStatement',
13 | 'ExportAllDeclaration',
14 | 'ExportDefaultDeclaration',
15 | 'ExportNamedDeclaration',
16 | 'ForStatement',
17 | 'ForInStatement',
18 | 'ForOfStatement',
19 | 'FunctionDeclaration',
20 | 'IfStatement',
21 | 'ImportDeclaration',
22 | 'SwitchStatement',
23 | 'TryStatement',
24 | 'TSInterfaceDeclaration',
25 | 'WhileStatement',
26 | ]
27 |
28 | /**
29 | * Blocks like `if`, `for`, `while`, etc. in JavaScript.
30 | *
31 | * ```js
32 | * ▽
33 | * function () { }
34 | * └─────────────────┘
35 | * ```
36 | *
37 | * ```js
38 | * ▽
39 | * import { ref } from 'vue'
40 | * └───────────────────────┘
41 | * ```
42 | *
43 | * @name js-block
44 | * @category js
45 | */
46 | export const jsBlockHandler: Handler = {
47 | name: 'js-block',
48 | handle({ selection, doc, getAst }) {
49 | const selectionText = doc.getText(selection)
50 | if (selectionText === 'async')
51 | return
52 |
53 | for (const ast of getAst('js')) {
54 | const index = doc.offsetAt(selection.start)
55 | const relativeIndex = index - ast.start
56 |
57 | let node: Node | undefined
58 | traverse(ast.root, {
59 | enter(path) {
60 | if (path.node.start == null || path.node.end == null)
61 | return
62 | if (relativeIndex > path.node.end || path.node.start > relativeIndex)
63 | return path.skip()
64 |
65 | if (!supportedNodeType.includes(path.node.type)) {
66 | // log.debug('[js-block] Unknown type:', path.node.type)
67 | return
68 | }
69 | node = path.node
70 | },
71 | })
72 |
73 | if (!node)
74 | continue
75 |
76 | let start = node.start
77 | let end = node.end
78 |
79 | // if ... else
80 | if (
81 | node.type === 'IfStatement'
82 | && node.alternate
83 | && node.consequent.end! <= relativeIndex
84 | && node.alternate.start! > relativeIndex
85 | ) {
86 | start = node.consequent.end
87 | end = node.alternate.end
88 | }
89 | // try ... finally
90 | else if (
91 | node.type === 'TryStatement'
92 | && node.finalizer
93 | && (node.handler?.end ?? node.block.end!) <= relativeIndex
94 | && node.finalizer.start! - relativeIndex > 4
95 | ) {
96 | start = (node.handler?.end || node.block.end!)
97 | end = node.finalizer.end
98 | }
99 | else if (node.start !== relativeIndex) {
100 | continue
101 | }
102 |
103 | return new Selection(
104 | doc.positionAt(ast.start + start!),
105 | doc.positionAt(ast.start + end!),
106 | )
107 | }
108 | },
109 | }
110 |
--------------------------------------------------------------------------------
/src/rules/js-colon.ts:
--------------------------------------------------------------------------------
1 | import traverse from '@babel/traverse'
2 | import { Selection } from 'vscode'
3 | import type { Handler } from '../types'
4 |
5 | /**
6 | * `:` to the value.
7 | *
8 | * ```js
9 | * ▽
10 | * { foo: { bar } }
11 | * └─────┘
12 | * ```
13 | *
14 | * @name js-colon
15 | * @category js
16 | */
17 | export const jsColonHandler: Handler = {
18 | name: 'js-colon',
19 | handle({ doc, getAst, anchor }) {
20 | const asts = getAst('js')
21 | if (!asts.length)
22 | return
23 |
24 | const range = doc.getWordRangeAtPosition(anchor, /\s*:\s*/)
25 | if (!range)
26 | return
27 |
28 | for (const ast of getAst('js')) {
29 | const relativeIndex = doc.offsetAt(range.end) - ast.start
30 |
31 | let result: Selection | undefined
32 | traverse(ast.root, {
33 | enter(path) {
34 | if (result)
35 | return path.skip()
36 | if (path.node.start == null || path.node.end == null)
37 | return
38 | if (relativeIndex > path.node.end || path.node.start > relativeIndex)
39 | return path.skip()
40 | if (path.node.start !== relativeIndex)
41 | return
42 | result = new Selection(
43 | doc.positionAt(ast.start + path.node.start),
44 | doc.positionAt(ast.start + path.node.end),
45 | )
46 | },
47 | })
48 |
49 | if (result)
50 | return result
51 | }
52 | },
53 | }
54 |
--------------------------------------------------------------------------------
/src/rules/jsx-tag-pair.ts:
--------------------------------------------------------------------------------
1 | import traverse from '@babel/traverse'
2 | import { Selection } from 'vscode'
3 | import type { Handler } from '../types'
4 |
5 | /**
6 | * Matches JSX elements' start and end tags.
7 | *
8 | * ```jsx
9 | * ▽
10 | * (