Add more customization

README.md

@@ -22,6 +22,7 @@ There currently is a few configurable settings in the extension
 | `jsannotations.hideDiagnostics` | Hide red squiggles under invalid parameters | false |
 | `jsannotations.fontWeight` | Annotation styling of font-weight CSS property | "400" |
 | `jsannotations.fontStyle` | Font style for annotations. | "italic" |
+| `jsannotations.borderRadius` | Annotation styling of border-radius CSS property in pixels | "5" |
 
 ## Themable Colors
 
@@ -30,6 +31,7 @@ JS Annotations provides a single themable color being the color of what the anno
 | Name | Description |
 |------|-------------|
 | `jsannotations.annotationForeground` | Specifies the foreground color for the annotations |
+| `jsannotations.annotationBackground` | Specifies the background color for the annotations |
 
 ## Contributors 👨‍💻 👩‍💻
 

package.json

@@ -79,6 +79,11 @@
             ],
             "description": "Annotation styling of font-style CSS property"
           },
+          "jsannotations.borderRadius": {
+            "type": "number",
+            "default": 5,
+            "description": "Annotation styling of border-radius CSS property in pixels"
+          },
           "jsannotations.showFirstSpace": {
             "type": "boolean",
             "description": "Show leading whitespace for first parameter",
@@ -96,6 +101,15 @@
           "light": "#444",
           "highContrast": "#444"
         }
+      },
+      {
+        "id": "jsannotations.annotationBackground",
+        "description": "Specifies the background color for the annotations",
+        "defaults": {
+          "dark": "#FFFFFF10",
+          "light": "#00000010",
+          "highContrast": "#00000010"
+        }
       }
     ],
     "keybindings": [

src/annotationProvider.ts

@@ -1,18 +1,23 @@
-import { DecorationInstanceRenderOptions, DecorationOptions, Range, ThemeColor, workspace } from "vscode";
+import { DecorationInstanceRenderOptions, DecorationOptions, DecorationRenderOptions, Range, ThemeColor, workspace } from "vscode";
 
 export class Annotations {
   public static paramAnnotation(message: string, range: Range): DecorationOptions {
 
+    const getConfiguration = (section: string): string =>
+      workspace.getConfiguration("jsannotations").get(section);
+
     return {
       range,
       renderOptions: {
         before: {
+          backgroundColor: new ThemeColor("jsannotations.annotationBackground"),
+          borderRadius: getConfiguration("borderRadius") + "px",
           color: new ThemeColor("jsannotations.annotationForeground"),
           contentText: message,
-          fontStyle: workspace.getConfiguration("jsannotations").get("fontStyle"),
-          fontWeight: workspace.getConfiguration("jsannotations").get("fontWeight"),
+          fontStyle: getConfiguration("fontStyle"),
+          fontWeight: getConfiguration("fontWeight")
         }
-      } as DecorationInstanceRenderOptions
+      } as DecorationRenderOptions
     } as DecorationOptions;
   }