<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://patch-diff.githubusercontent.com";
	_AN_base_path = "https://patch-diff.githubusercontent.com/raw/ecmel/vscode-html-css/pull/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 0;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

diff --git a/README.md b/README.md
index 9703f1f..bbda534 100644
--- a/README.md
+++ b/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
diff --git a/package.json b/package.json
index f575ced..da3c5b0 100644
--- a/package.json
+++ b/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"
   }
-}
+}
\ No newline at end of file
diff --git a/src/extension.ts b/src/extension.ts
index a25fe7f..f943a9b 100644
--- a/src/extension.ts
+++ b/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() { }
diff --git a/src/provider.ts b/src/provider.ts
index 3d8ef7a..87ea50d 100644
--- a/src/provider.ts
+++ b/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()
     );
   }
diff --git a/src/settings.ts b/src/settings.ts
index b85c1aa..c12d877 100644
--- a/src/settings.ts
+++ b/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"
+}
\ No newline at end of file
