Add verification function when saving

README.md

@@ -72,6 +72,12 @@ Configuration depends on your layout of the project but some samples are below:
 }
 ```
 
+```json
+{
+  "css.vaildOnSaveOrChange": "Always"
+}
+```
+
 ### Lit
 
 ```json

package.json

@@ -59,6 +59,17 @@
           "scope": "resource",
           "description": "List of local or remote style sheets for suggestions.",
           "default": []
+        },
+        "css.vaildOnSaveOrChange": {
+          "enum": [
+            "Always",
+            "OnChange",
+            "OnSave",
+            "Never"
+          ],
+          "default": "Never",
+          "scope": "resource",
+          "description": "Verify label class names when saving files."
         }
       }
     },
@@ -123,4 +134,4 @@
     "tslib": "^2.6.2",
     "typescript": "^5.3.3"
   }
-}
+}

src/extension.ts

@@ -10,7 +10,7 @@ import {
   window,
   workspace,
 } from "vscode";
-import { getEnabledLanguages } from "./settings";
+import { getEnabledLanguages, getVaildOnSaveOrChange, VaildOnSaveOrChange } from "./settings";
 import { Provider, clear, invalidate } from "./provider";
 
 export function activate(context: ExtensionContext) {
@@ -21,14 +21,25 @@ export function activate(context: ExtensionContext) {
   context.subscriptions.push(
     languages.registerCompletionItemProvider(enabledLanguages, provider),
     languages.registerDefinitionProvider(enabledLanguages, provider),
-    workspace.onDidSaveTextDocument((document) =>
-      invalidate(document.uri.toString())
-    ),
+    workspace.onDidSaveTextDocument((document) => {
+      const vaildOnSaveOrChange = getVaildOnSaveOrChange();
+      if (vaildOnSaveOrChange == VaildOnSaveOrChange.Always || vaildOnSaveOrChange == VaildOnSaveOrChange.OnSave) {
+        commands.executeCommand("vscode-html-css.validate")
+      } else {
+        invalidate(document.uri.toString())
+      }
+    }),
     workspace.onDidCloseTextDocument((document) =>
       validations.delete(document.uri)
     ),
-    workspace.onDidChangeTextDocument((event) =>
-      validations.delete(event.document.uri)
+    workspace.onDidChangeTextDocument((event) => {
+      const vaildOnSaveOrChange = getVaildOnSaveOrChange();
+      if (vaildOnSaveOrChange == VaildOnSaveOrChange.Always || vaildOnSaveOrChange == VaildOnSaveOrChange.OnChange) {
+        commands.executeCommand("vscode-html-css.validate")
+      } else {
+        validations.delete(event.document.uri)
+      }
+    }
     ),
     commands.registerCommand("vscode-html-css.validate", async () => {
       const editor = window.activeTextEditor;
@@ -43,4 +54,4 @@ export function activate(context: ExtensionContext) {
   );
 }
 
-export function deactivate() {}
+export function deactivate() { }

src/provider.ts

@@ -28,6 +28,7 @@ import {
 } from "vscode";
 import { getStyleSheets } from "./settings";
 import { Style, StyleType, parse } from "./parser";
+import path from "path";
 
 const start = new Position(0, 0);
 const cache = new Map<string, Style[]>();
@@ -108,11 +109,14 @@ export class Provider implements CompletionItemProvider, DefinitionProvider {
     const map = new Map<string, CompletionItem>();
     const styles = await this.getStyles(document);
 
-    for (const value of styles.values()) {
+    for (const [key, value] of styles) {
       for (const style of value) {
         if (style.type === type) {
           const item = new CompletionItem(
-            style.selector,
+            {
+              label: style.selector,
+              description: path.basename(key)
+            },
             style.type === StyleType.ID
               ? CompletionItemKind.Value
               : CompletionItemKind.Enum
@@ -153,12 +157,12 @@ export class Provider implements CompletionItemProvider, DefinitionProvider {
     return new Promise((resolve, reject) =>
       match && !token.isCancellationRequested
         ? resolve(
-            this.getCompletionItems(
-              document,
-              position,
-              match[1] === "id" ? StyleType.ID : StyleType.CLASS
-            )
+          this.getCompletionItems(
+            document,
+            position,
+            match[1] === "id" ? StyleType.ID : StyleType.CLASS
           )
+        )
         : reject()
     );
   }

src/settings.ts

@@ -16,3 +16,16 @@ export function getStyleSheets(uri: Uri): string[] {
     .getConfiguration("css", uri)
     .get<string[]>("styleSheets", []);
 }
+
+export function getVaildOnSaveOrChange(): VaildOnSaveOrChange {
+  return workspace
+    .getConfiguration("css")
+    .get<VaildOnSaveOrChange>("vaildOnSaveOrChange", VaildOnSaveOrChange.Never);
+}
+
+export enum VaildOnSaveOrChange {
+  Always = "Always",
+  OnChange = "OnChange",
+  OnSave = "OnSave",
+  Never = "Never"
+}