feat: support hover hint

Author: shezhangzhang

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "singleQuote": false,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true
+}

.vscode/settings.json

@@ -1,13 +1,14 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-    "files.exclude": {
-        "out": false, // set this to true to hide the "out" folder with the compiled JS files
-        "dist": false // set this to true to hide the "dist" folder with the compiled JS files
-    },
-    "search.exclude": {
-        "out": true, // set this to false to include "out" folder in search results
-        "dist": true // set this to false to include "dist" folder in search results
-    },
-    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-    "typescript.tsc.autoDetect": "off"
-}
+  "files.exclude": {
+    "out": false, // set this to true to hide the "out" folder with the compiled JS files
+    "dist": false // set this to true to hide the "dist" folder with the compiled JS files
+  },
+  "search.exclude": {
+    "out": true, // set this to false to include "out" folder in search results
+    "dist": true // set this to false to include "dist" folder in search results
+  },
+  // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+  "typescript.tsc.autoDetect": "off",
+  "editor.hover.delay": 600
+}

package.json

@@ -50,6 +50,7 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
-    "antd-token-previewer": "^1.0.0-alpha.19"
+    "antd-token-previewer": "^1.0.0-alpha.19",
+    "rgb-hex": "^4.0.0"
   }
 }

src/extension.ts

@@ -2,26 +2,89 @@
 // Import the module and reference it with the alias vscode in your code below
 import * as vscode from "vscode";
 import getDesignToken from "antd-token-previewer/es/utils/getDesignToken";
+import rgbHex from "rgb-hex";
+import { getMarkdownString } from "./utils";
 
 // this method is called when your extension is activated
 // your extension is activated the very first time the command is executed
 export function activate(context: vscode.ExtensionContext) {
   // Use the console to output diagnostic information (console.log) and errors (console.error)
   // This line of code will only be executed once when your extension is activated
-  console.log(
-    'Congratulations, your extension "antd-design-token" is now active!'
+  const fullToken = getDesignToken();
+
+  // vscode hover widget only support color style in <span></span>
+  // https://github.com/microsoft/vscode/blob/6d2920473c6f13759c978dd89104c4270a83422d/src/vs/base/browser/markdownRenderer.ts#L296
+  vscode.languages.registerHoverProvider(
+    [
+      "javascript",
+      "javascriptreact",
+      "typescript",
+      "typescriptreact",
+      "vue",
+      "vue-html",
+      "html",
+    ],
+    {
+      provideHover(document, position) {
+        const range = document.getWordRangeAtPosition(position);
+        const word = document.getText(range);
+
+        if (fullToken.hasOwnProperty(word as string)) {
+          const value = String(fullToken[word as keyof typeof fullToken]);
+          const colorSpan = getMarkdownString(value);
+
+          const markDownString = new vscode.MarkdownString(
+            `<h3>antd design token: ${word}</h3>${colorSpan}<code>${value}</code><br></br>`
+          );
+          markDownString.supportHtml = true;
+          markDownString.isTrusted = true;
+
+          return new vscode.Hover(markDownString);
+        }
+      },
+    }
+  );
+
+  // Add antd token value tips on typing
+  // Note: 11 is a `value` kind of completion items.
+  // Based on the kind an icon is chosen by the editor.
+  const items: any[] | undefined = [];
+
+  for (let key in fullToken) {
+    const value = fullToken[key as keyof typeof fullToken];
+    const item = new vscode.CompletionItem(`${key}: ${value}`, 11);
+    item.insertText = key;
+    item.filterText = key;
+    item.sortText = key;
+
+    const colorSpan = getMarkdownString(value);
+    const markDownString = new vscode.MarkdownString(
+      `<h3>antd design token: ${key}</h3>${colorSpan}<code>${value}</code><br></br>`
+    );
+
+    markDownString.supportHtml = true;
+    markDownString.isTrusted = true;
+    item.documentation = markDownString;
+
+    items.push(item);
+  }
+
+  vscode.languages.registerCompletionItemProvider(
+    [
+      "javascript",
+      "javascriptreact",
+      "typescript",
+      "typescriptreact",
+      "vue",
+      "vue-html",
+      "html",
+    ],
+    {
+      provideCompletionItems(document): any {
+        return new vscode.CompletionList(items, false);
+      },
+    }
   );
-  console.log(getDesignToken());
-
-  vscode.languages.registerHoverProvider("javascript", {
-    provideHover(document, position, token) {
-      console.log("==========");
-      console.log("document", document);
-      console.log("position", position);
-      console.log("token", token);
-      return new vscode.Hover("I am a hover!");
-    },
-  });
 
   // The command has been defined in the package.json file
   // Now provide the implementation of the command with registerCommand

src/utils/index.ts

@@ -0,0 +1,19 @@
+import rgbHex from "rgb-hex";
+
+/**
+ * Get the MarkdownString for vscode.MarkdownString function
+ * Note: should convert rgb color to hex
+ * @param value string
+ * @returns MarkdownString | string
+ */
+export function getMarkdownString(value: string) {
+  let hexColor = "";
+  if (/#[0-9a-fA-F]+/.test(value)) {
+    hexColor = value;
+  } else if (value.startsWith("rgb")) {
+    hexColor = `#${rgbHex(value)}`;
+  }
+  return hexColor
+    ? `<span style='background-color:${hexColor};'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;`
+    : "";
+}