feat: Add auto-completion trigger for JSX attributes

src/autoCompletionsTrigger.ts

@@ -0,0 +1,23 @@
+import * as vscode from 'vscode'
+import { defaultLanguageSupersets } from '@zardoy/vscode-utils/build/langs'
+import { getExtensionSetting } from 'vscode-framework'
+import { sendCommand } from './sendCommand'
+
+const jsxAttributesAutoTrigger = () => {
+    vscode.workspace.onDidChangeTextDocument(async ({ contentChanges, document, reason }) => {
+        const editor = vscode.window.activeTextEditor
+        if (document !== editor?.document || contentChanges.length === 0) return
+        if (contentChanges[0]!.text !== ' ') return
+        if (![...defaultLanguageSupersets.react, 'javascript'].includes(document.languageId)) return
+        if (!getExtensionSetting('completionsAutoTrigger.jsx')) return
+        const path = await sendCommand('getNodePath', { document, position: editor.selection.active })
+        if (!path) return
+        if (['JsxSelfClosingElement', 'JsxOpeningElement'].includes(path.at(-1)?.kindName ?? '')) {
+            await vscode.commands.executeCommand('editor.action.triggerSuggest')
+        }
+    })
+}
+
+export default () => {
+    jsxAttributesAutoTrigger()
+}

src/configurationType.ts

@@ -713,6 +713,10 @@ export type Configuration = {
             iconPost?: string
         }
     }
+    /**
+     * @default true
+     */
+    'completionsAutoTrigger.jsx': boolean
     /**
      * @default false
      */

src/extension.ts

@@ -18,6 +18,7 @@ import { mergeSettingsFromScopes } from './mergeSettings'
 import codeActionProvider from './codeActionProvider'
 import nonTsCommands from './nonTsCommands'
 import inlayHints from './inlayHints'
+import autoCompletionsTrigger from './autoCompletionsTrigger'
 
 let isActivated = false
 // let erroredStatusBarItem: vscode.StatusBarItem | undefined
@@ -98,6 +99,7 @@ export const activateTsPlugin = (tsApi: { configurePlugin; onCompletionAccepted
     figIntegration()
     vueVolarSupport()
     inlayHints()
+    autoCompletionsTrigger()
 
     if (process.env.PLATFORM === 'node' && process.env.NODE_ENV === 'development') {
         require('./autoPluginReload').default()