Add support for custom file extensions

examples/vue-and-svelte-language-server/src/index.ts

@@ -28,7 +28,6 @@ const plugin: LanguageServerPlugin<LanguageServerInitializationOptions, vue.Lang
 					host.getCurrentDirectory(),
 					host.getCompilationSettings(),
 					host.getVueCompilationSettings(),
-					['.vue'],
 				);
 				return [
 					vueLanguageModule,

extensions/vscode-vue-language-features/README.md

@@ -158,6 +158,27 @@ defineProps<Props>()
 </script>
 ```
 
+### Custom File Extensions
+
+Syntax highlighting and intellisense can be applied to additional file extensions beyond just `.vue`. This will need to be configured in three different places for full support.
+
+In VS Code settings for the Volar extension add any additional extensions you need to `Additional Extensions`. Such as `.ext`.
+
+In your tsconfig.json file you will need to make sure your custom extension is included by TypeScript. If you have an include value for `./src/*.vue` then you would want to add an include for `./src/*.ext` as well. Next add a new key to the root of tsconfig.json called `vueCompilerOptions` with a child key of `extensions`. This should be an array that contains the `.vue` extension as well as your custom `.ext` extension.
+
+```json
+"include": [
+  "./src/*.ts",
+  "./src/*.vue",
+  "./src/*.ext",
+],
+"vueCompilerOptions": {
+  "extensions": [".vue", ".ext"]
+}
+```
+
+Finally you need to make VS Code recognize your new extension and automatically associate it with the Vue language format. To do this you need to configure your File Associations setting to map `*.ext` to the language value `vue`. This can be done under Text Editor &gt; Files, or with the key `files.associations`.
+
 ## Sponsors
 
 <!-- <p align="center">

extensions/vscode-vue-language-features/package.json

@@ -319,6 +319,14 @@
 					"default": false,
 					"description": "Ignore project references settings of tsconfig in language server for resolve issue #1916."
 				},
+				"volar.vueserver.additionalExtensions": {
+					"type":"array",
+					"items": {
+						"type": "string"
+					},
+					"default": [],
+					"description": "List any additional file extensions that should be processed as Vue files (requires restart)."
+				},
 				"volar.codeLens.references": {
 					"type": "boolean",
 					"default": true,

extensions/vscode-vue-language-features/src/common.ts

@@ -202,6 +202,10 @@ export function noProjectReferences() {
 	return !!vscode.workspace.getConfiguration('volar').get<boolean>('vueserver.noProjectReferences');
 }
 
+function additionalExtensions() {
+	return vscode.workspace.getConfiguration('volar').get<string[]>('vueserver.additionalExtensions') ?? [];
+}
+
 function getFillInitializeParams(featuresKinds: LanguageFeaturesKind[]) {
 	return function (params: lsp.InitializeParams) {
 
@@ -269,6 +273,7 @@ function getInitializationOptions(
 			processMdFile: processMd(),
 		},
 		noProjectReferences: noProjectReferences(),
+		additionalExtensions: additionalExtensions()
 	};
 	return initializationOptions;
 }

extensions/vscode-vue-language-features/src/nodeClientMain.ts

@@ -42,6 +42,7 @@ export function activate(context: vscode.ExtensionContext) {
 			}
 		}
 
+		const additionalExtensions = initOptions.additionalExtensions?.map(ext => `,**/*${ext}`).join('') ?? '';
 		const serverModule = vscode.Uri.joinPath(context.extensionUri, 'server.js');
 		const maxOldSpaceSize = vscode.workspace.getConfiguration('volar').get<number | null>('vueserver.maxOldSpaceSize');
 		const runOptions = { execArgv: <string[]>[] };
@@ -67,7 +68,7 @@ export function activate(context: vscode.ExtensionContext) {
 			initializationOptions: initOptions,
 			progressOnInitialization: true,
 			synchronize: {
-				fileEvents: vscode.workspace.createFileSystemWatcher(`{**/*.vue,${processMd() ? '**/*.md,' : ''}${processHtml() ? '**/*.html,' : ''}**/*.js,**/*.ts,**/*.cjs,**/*.cts,**/*.mjs,**/*.mts,**/*.jsx,**/*.tsx,**/*.json}`)
+				fileEvents: vscode.workspace.createFileSystemWatcher(`{**/*.vue,${processMd() ? '**/*.md,' : ''}${processHtml() ? '**/*.html,' : ''}**/*.js,**/*.ts,**/*.cjs,**/*.cts,**/*.mjs,**/*.mts,**/*.jsx,**/*.tsx,**/*.json${additionalExtensions}}`)
 			},
 		};
 		const client = new _LanguageClient(

vue-language-tools/vue-component-meta/src/index.ts

@@ -173,7 +173,6 @@ export function baseCreate(
 		host.getCurrentDirectory(),
 		host.getCompilationSettings(),
 		host.getVueCompilationSettings(),
-		['.vue']
 	);
 	const core = embedded.createEmbeddedLanguageServiceHost(host, [vueLanguageModule]);
 	const proxyApis: Partial<ts.LanguageServiceHost> = checkerOptions.forceUseTs ? {

vue-language-tools/vue-language-core/src/languageModule.ts

@@ -11,10 +11,10 @@ export function createLanguageModule(
 	rootDir: string,
 	compilerOptions: ts.CompilerOptions,
 	_vueCompilerOptions: VueCompilerOptions,
-	exts: string[],
 	extraPlugins: VueLanguagePlugin[] = [],
 ): embedded.LanguageModule {
 
+	const vueCompilerOptions = resolveVueCompilerOptions(_vueCompilerOptions);
 	const vueLanguagePlugin = getDefaultVueLanguagePlugins(
 		ts,
 		rootDir,
@@ -28,18 +28,17 @@ export function createLanguageModule(
 		(ts as any).__VLS_pitched_resolveModuleNames = true;
 		const resolveModuleNames = ts.resolveModuleName;
 		ts.resolveModuleName = (...args) => {
-			if (args[6] === ts.ModuleKind.ESNext && exts.some(ext => args[0].endsWith(ext))) {
+			if (args[6] === ts.ModuleKind.ESNext && vueCompilerOptions.extensions.some(ext => args[0].endsWith(ext))) {
 				args[6] = ts.ModuleKind.CommonJS;
 			}
 			return resolveModuleNames(...args);
 		};
 	}
 
-	const vueCompilerOptions = resolveVueCompilerOptions(_vueCompilerOptions);
 	const sharedTypesSnapshot = ts.ScriptSnapshot.fromString(localTypes.getTypesCode(vueCompilerOptions.target, vueCompilerOptions));
 	const languageModule: embedded.LanguageModule = {
 		createSourceFile(fileName, snapshot) {
-			if (exts.some(ext => fileName.endsWith(ext))) {
+			if (vueCompilerOptions.extensions.some(ext => fileName.endsWith(ext))) {
 				return new VueSourceFile(fileName, snapshot, ts, vueLanguagePlugin);
 			}
 		},
@@ -100,7 +99,7 @@ export function createLanguageModule(
 	return languageModule;
 
 	function getSharedTypesFiles(fileNames: string[]) {
-		const moduleFiles = fileNames.filter(fileName => exts.some(ext => fileName.endsWith(ext)));
+		const moduleFiles = fileNames.filter(fileName => vueCompilerOptions.extensions.some(ext => fileName.endsWith(ext)));
 		const moduleFileDirs = [...new Set(moduleFiles.map(path.dirname))];
 		return moduleFileDirs.map(dir => path.join(dir, localTypes.typesFileName));
 	}

vue-language-tools/vue-language-core/src/plugins/file-vue.ts

@@ -8,7 +8,7 @@ const plugin: VueLanguagePlugin = (ctx) => {
 		version: 1,
 
 		parseSFC(fileName, content) {
-			if (fileName.endsWith('.vue')) {
+			if (ctx.vueCompilerOptions.extensions.some(ext => fileName.endsWith(ext))) {
 				return parse(content);
 			}
 		},

vue-language-tools/vue-language-core/src/types.ts

@@ -15,6 +15,7 @@ export type VueCompilerOptions = Partial<ResolvedVueCompilerOptions>;
 
 export interface ResolvedVueCompilerOptions {
 	target: 2 | 2.7 | 3;
+	extensions: string[]; // base exts
 	jsxTemplates: boolean;
 	strictTemplates: boolean;
 	skipTemplateCodegen: boolean;

vue-language-tools/vue-language-core/src/utils/ts.ts

@@ -89,6 +89,7 @@ export function resolveVueCompilerOptions(vueOptions: VueCompilerOptions): Resol
 		...vueOptions,
 
 		target,
+		extensions: vueOptions.extensions ?? ['.vue'],
 		jsxTemplates: vueOptions.jsxTemplates ?? false,
 		strictTemplates: vueOptions.strictTemplates ?? false,
 		skipTemplateCodegen: vueOptions.skipTemplateCodegen ?? false,

vue-language-tools/vue-language-server/src/languageServerPlugin.ts

@@ -21,7 +21,11 @@ const plugin: LanguageServerPlugin<VueServerInitializationOptions, vue.LanguageS
 		extraFileExtensions.push({ extension: 'md', isMixedContent: true, scriptKind: 7 });
 	}
 
-	const exts = extraFileExtensions.map(ext => '.' + ext.extension);
+	if (initOptions.additionalExtensions) {
+		for (const additionalExtension of initOptions.additionalExtensions) {
+			extraFileExtensions.push({ extension: additionalExtension, isMixedContent: true, scriptKind: 7 });
+		}
+	}
 
 	return {
 		extraFileExtensions,
@@ -32,6 +36,7 @@ const plugin: LanguageServerPlugin<VueServerInitializationOptions, vue.LanguageS
 				if (typeof tsConfig === 'string') {
 					vueOptions = vue2.createParsedCommandLine(ts, sys, tsConfig, []).vueOptions;
 				}
+				vueOptions.extensions = getVueExts(vueOptions.extensions ?? ['.vue']);
 				return {
 					...host,
 					getVueCompilationSettings: () => vueOptions,
@@ -43,7 +48,7 @@ const plugin: LanguageServerPlugin<VueServerInitializationOptions, vue.LanguageS
 					host.getCurrentDirectory(),
 					host.getCompilationSettings(),
 					host.getVueCompilationSettings(),
-					exts,
+					[],
 				);
 				return [vueLanguageModule];
 			},
@@ -94,9 +99,10 @@ const plugin: LanguageServerPlugin<VueServerInitializationOptions, vue.LanguageS
 		syntacticService: {
 			getLanguageModules(ts, env) {
 				const vueLanguagePlugins = vue2.getDefaultVueLanguagePlugins(ts, shared.getPathOfUri(env.rootUri.toString()), {}, {}, []);
+				const vueExts = getVueExts(['.vue']);
 				const vueLanguageModule: embedded.LanguageModule = {
 					createSourceFile(fileName, snapshot) {
-						if (exts.some(ext => fileName.endsWith(ext))) {
+						if (vueExts.some(ext => fileName.endsWith(ext))) {
 							return new vue2.VueSourceFile(fileName, snapshot, ts, vueLanguagePlugins);
 						}
 					},
@@ -116,6 +122,13 @@ const plugin: LanguageServerPlugin<VueServerInitializationOptions, vue.LanguageS
 			},
 		},
 	};
+
+	function getVueExts(baseExts: string[]) {
+		return [
+			...baseExts,
+			...initOptions.additionalExtensions?.map(ext => '.' + ext) ?? [],
+		];
+	}
 };
 
 export = plugin;

vue-language-tools/vue-language-server/src/types.ts

@@ -7,4 +7,8 @@ export type VueServerInitializationOptions = LanguageServerInitializationOptions
 	vitePress?: {
 		processMdFile: boolean,
 	},
+	/**
+	 * @example ['vue1', 'vue2']
+	 */
+	additionalExtensions?: string[],
 };

vue-language-tools/vue-language-service/src/documentService.ts

@@ -52,7 +52,6 @@ export function createDocumentService(
 		env.rootUri.fsPath,
 		{},
 		{},
-		['.vue'],
 	);
 	const languageServiceContext = embeddedLS.createDocumentServiceContext({
 		ts,

vue-language-tools/vue-language-service/src/languageService.ts

@@ -130,7 +130,6 @@ export function createLanguageService(
 		host.getCurrentDirectory(),
 		host.getCompilationSettings(),
 		host.getVueCompilationSettings(),
-		['.vue'],
 	);
 	const core = embedded.createEmbeddedLanguageServiceHost(host, [vueLanguageModule]);
 	const languageServiceContext = embeddedLS.createLanguageServiceContext({

vue-language-tools/vue-language-service/src/plugins/vue-template.ts

@@ -454,7 +454,9 @@ export default function useVueTemplateLanguagePlugin<T extends ReturnType<typeof
 					if (enabledComponentAutoImport && (descriptor.script || descriptor.scriptSetup)) {
 						for (const vueDocument of options.context.documents.getAll()) {
 							let baseName = path.basename(vueDocument.uri);
-							baseName = baseName.substring(0, baseName.length - '.vue'.length);
+							if (baseName.lastIndexOf('.') !== -1) {
+								baseName = baseName.substring(0, baseName.lastIndexOf('.'));
+							}
 							if (baseName.toLowerCase() === 'index') {
 								baseName = path.basename(path.dirname(vueDocument.uri));
 							}

vue-language-tools/vue-typescript/src/index.ts

@@ -7,7 +7,6 @@ export function createLanguageService(host: vue.LanguageServiceHost) {
 		host.getCurrentDirectory(),
 		host.getCompilationSettings(),
 		host.getVueCompilationSettings(),
-		['.vue']
 	)];
 	return base.createLanguageService(host, mods);
 }