feat: Add auto-completion trigger for JSX attributes

Author: zardoy

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()