feat: Add inlay hints for missing JSX attributes. Disabled by default, enable with tsEssentialPlugins.inlayHints.missingJsxAttributes.enabled #208

Author: zardoy

src/configurationType.ts

@@ -685,6 +685,11 @@ export type Configuration = {
      */
     declareMissingPropertyQuickfixOtherFiles: boolean
     /**
+     * @recommended {".svg": {
+     *   "importPath": "$path?react",
+     *   "prefix": "Svg",
+     *   "nameCasing": "pascal"
+     * },
      * @default {}
      */
     filesAutoImport: {
@@ -708,6 +713,10 @@ export type Configuration = {
             iconPost?: string
         }
     }
+    /**
+     * @default false
+     */
+    'inlayHints.missingJsxAttributes.enabled': boolean
 }
 
 // scrapped using search editor. config: caseInsensitive, context lines: 0, regex: const fix\w+ = "[^ ]+"

src/extension.ts

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

src/inlayHints.ts

@@ -0,0 +1,57 @@
+import * as vscode from 'vscode'
+import { watchExtensionSetting } from '@zardoy/vscode-utils/build/settings'
+import { getExtensionSetting, registerActiveDevelopmentCommand } from 'vscode-framework'
+
+// todo respect enabled setting, deactivate
+export default () => {
+    const provider = new (class implements vscode.InlayHintsProvider {
+        eventEmitter = new vscode.EventEmitter<void>()
+        onDidChangeInlayHints = this.eventEmitter.event
+        provideInlayHints(document: vscode.TextDocument, range: vscode.Range, token: vscode.CancellationToken): vscode.ProviderResult<vscode.InlayHint[]> {
+            const diagnostics = vscode.languages.getDiagnostics(document.uri)
+            const jsxMissingAttributesErrors = diagnostics.filter(({ code, source }) => (code === 2740 || code === 2739) && source === 'ts')
+            return jsxMissingAttributesErrors
+                .flatMap(({ range, message }) => {
+                    const regex = /: (?<prop>[\w, ]+)(?:, and (?<more>\d+) more)?\.?$/
+                    const match = regex.exec(message)
+                    if (!match) return null as never
+                    const props = match.groups!.prop!.split(', ')
+                    const { more } = match.groups!
+                    let text = ` ${props.map(prop => `${prop}!`).join(', ')}`
+                    if (more) text += `, and ${more} more`
+                    return {
+                        kind: vscode.InlayHintKind.Type,
+                        label: text,
+                        tooltip: `Inlay hint: Missing attributes`,
+                        position: range.end,
+                        paddingLeft: true,
+                    } satisfies vscode.InlayHint
+                    // return [...props, ...(more ? [more] : [])].map((prop) => ({
+                    //     kind: vscode.InlayHintKind.Type,
+                    //     label: prop,
+                    //     tooltip: 'Missing attribute',
+                    //     position:
+                    // }))
+                })
+                .filter(Boolean)
+        }
+    })()
+    let disposables = [] as vscode.Disposable[]
+
+    const manageEnablement = () => {
+        if (getExtensionSetting('inlayHints.missingJsxAttributes.enabled')) {
+            vscode.languages.registerInlayHintsProvider('typescriptreact,javascript,javascriptreact'.split(','), provider)
+            vscode.languages.onDidChangeDiagnostics(e => {
+                for (const uri of e.uris) {
+                    if (uri === vscode.window.activeTextEditor?.document.uri) provider.eventEmitter.fire()
+                }
+            })
+        } else {
+            for (const d of disposables) d.dispose()
+            disposables = []
+        }
+    }
+
+    manageEnablement()
+    watchExtensionSetting('inlayHints.missingJsxAttributes.enabled', manageEnablement)
+}