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/package.json

@@ -319,6 +319,11 @@
 					"default": false,
 					"description": "Ignore project references settings of tsconfig in language server for resolve issue #1916."
 				},
+				"volar.vueserver.additionalExtensions": {
+					"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,17 @@ export function noProjectReferences() {
 	return !!vscode.workspace.getConfiguration('volar').get<boolean>('vueserver.noProjectReferences');
 }
 
+function additionalExtensions() {
+	const extensions = vscode.workspace.getConfiguration('volar').get<string>('vueserver.additionalExtensions');
+
+	if (extensions) {
+		return extensions.split(/,; /).map(e => e.trim()).filter(e => e !== "");
+	}
+	else {
+		return [];
+	}
+}
+
 function getFillInitializeParams(featuresKinds: LanguageFeaturesKind[]) {
 	return function (params: lsp.InitializeParams) {
 
@@ -269,6 +280,7 @@ function getInitializationOptions(
 			processMdFile: processMd(),
 		},
 		noProjectReferences: noProjectReferences(),
+		additionalExtensions: additionalExtensions()
 	};
 	return initializationOptions;
 }

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);
 }