feat(vscode): add settings to enable per-block formatting (#5784)

Author: serkodev

extensions/vscode/lib/generated-meta.ts

@@ -4,7 +4,7 @@
 // Meta info
 export const publisher = 'Vue';
 export const name = 'volar';
-export const version = '3.1.0';
+export const version = '3.1.5';
 export const displayName = 'Vue (Official)';
 export const description = 'Language Support for Vue';
 export const extensionId = `${publisher}.${name}`;
@@ -56,6 +56,9 @@ export type ConfigKey =
 	| 'vue.format.template.initialIndent'
 	| 'vue.format.script.initialIndent'
 	| 'vue.format.style.initialIndent'
+	| 'vue.format.script.enabled'
+	| 'vue.format.template.enabled'
+	| 'vue.format.style.enabled'
 	| 'vue.format.wrapAttributes';
 
 export interface ConfigKeyTypeMap {
@@ -79,6 +82,9 @@ export interface ConfigKeyTypeMap {
 	'vue.format.template.initialIndent': boolean;
 	'vue.format.script.initialIndent': boolean;
 	'vue.format.style.initialIndent': boolean;
+	'vue.format.script.enabled': boolean;
+	'vue.format.template.enabled': boolean;
+	'vue.format.style.enabled': boolean;
 	'vue.format.wrapAttributes':
 		| 'auto'
 		| 'force'
@@ -110,6 +116,9 @@ export interface ConfigShorthandMap {
 	formatTemplateInitialIndent: 'vue.format.template.initialIndent';
 	formatScriptInitialIndent: 'vue.format.script.initialIndent';
 	formatStyleInitialIndent: 'vue.format.style.initialIndent';
+	formatScriptEnabled: 'vue.format.script.enabled';
+	formatTemplateEnabled: 'vue.format.template.enabled';
+	formatStyleEnabled: 'vue.format.style.enabled';
 	formatWrapAttributes: 'vue.format.wrapAttributes';
 }
 
@@ -134,6 +143,9 @@ export interface ConfigShorthandTypeMap {
 	formatTemplateInitialIndent: boolean;
 	formatScriptInitialIndent: boolean;
 	formatStyleInitialIndent: boolean;
+	formatScriptEnabled: boolean;
+	formatTemplateEnabled: boolean;
+	formatStyleEnabled: boolean;
 	formatWrapAttributes:
 		| 'auto'
 		| 'force'
@@ -333,6 +345,33 @@ export const configs = {
 		key: 'vue.format.style.initialIndent',
 		default: false,
 	} as ConfigItem<'vue.format.style.initialIndent'>,
+	/**
+	 * @key `vue.format.script.enabled`
+	 * @default `true`
+	 * @type `boolean`
+	 */
+	formatScriptEnabled: {
+		key: 'vue.format.script.enabled',
+		default: true,
+	} as ConfigItem<'vue.format.script.enabled'>,
+	/**
+	 * @key `vue.format.template.enabled`
+	 * @default `true`
+	 * @type `boolean`
+	 */
+	formatTemplateEnabled: {
+		key: 'vue.format.template.enabled',
+		default: true,
+	} as ConfigItem<'vue.format.template.enabled'>,
+	/**
+	 * @key `vue.format.style.enabled`
+	 * @default `true`
+	 * @type `boolean`
+	 */
+	formatStyleEnabled: {
+		key: 'vue.format.style.enabled',
+		default: true,
+	} as ConfigItem<'vue.format.style.enabled'>,
 	/**
 	 * @key `vue.format.wrapAttributes`
 	 * @default `"auto"`
@@ -365,6 +404,9 @@ export interface ScopedConfigKeyTypeMap {
 	'format.template.initialIndent': boolean;
 	'format.script.initialIndent': boolean;
 	'format.style.initialIndent': boolean;
+	'format.script.enabled': boolean;
+	'format.template.enabled': boolean;
+	'format.style.enabled': boolean;
 	'format.wrapAttributes':
 		| 'auto'
 		| 'force'
@@ -398,6 +440,9 @@ export const scopedConfigs = {
 		'format.template.initialIndent': true,
 		'format.script.initialIndent': false,
 		'format.style.initialIndent': false,
+		'format.script.enabled': true,
+		'format.template.enabled': true,
+		'format.style.enabled': true,
 		'format.wrapAttributes': 'auto',
 	} satisfies ScopedConfigKeyTypeMap,
 };
@@ -438,12 +483,15 @@ export interface NestedConfigs {
 		'format': {
 			'template': {
 				'initialIndent': boolean;
+				'enabled': boolean;
 			};
 			'script': {
 				'initialIndent': boolean;
+				'enabled': boolean;
 			};
 			'style': {
 				'initialIndent': boolean;
+				'enabled': boolean;
 			};
 			'wrapAttributes':
 				| 'auto'
@@ -492,12 +540,15 @@ export interface NestedScopedConfigs {
 	'format': {
 		'template': {
 			'initialIndent': boolean;
+			'enabled': boolean;
 		};
 		'script': {
 			'initialIndent': boolean;
+			'enabled': boolean;
 		};
 		'style': {
 			'initialIndent': boolean;
+			'enabled': boolean;
 		};
 		'wrapAttributes':
 			| 'auto'

extensions/vscode/package.json

@@ -380,6 +380,21 @@
 					"default": false,
 					"markdownDescription": "%configuration.format.style.initialIndent%"
 				},
+				"vue.format.script.enabled": {
+					"type": "boolean",
+					"default": true,
+					"markdownDescription": "%configuration.format.script.enabled%"
+				},
+				"vue.format.template.enabled": {
+					"type": "boolean",
+					"default": true,
+					"markdownDescription": "%configuration.format.template.enabled%"
+				},
+				"vue.format.style.enabled": {
+					"type": "boolean",
+					"default": true,
+					"markdownDescription": "%configuration.format.style.enabled%"
+				},
 				"vue.format.wrapAttributes": {
 					"type": "string",
 					"default": "auto",

extensions/vscode/package.nls.ja.json

@@ -16,6 +16,9 @@
 	"configuration.format.template.initialIndent": "`<template>` ブロックの初期インデント。",
 	"configuration.format.script.initialIndent": "`<script>` ブロックの初期インデント。",
 	"configuration.format.style.initialIndent": "`<style>` ブロックの初期インデント。",
+	"configuration.format.template.enabled": "`<template>` ブロックのフォーマットを有効化。",
+	"configuration.format.script.enabled": "`<script>` ブロックのフォーマットを有効化。",
+	"configuration.format.style.enabled": "`<style>` ブロックのフォーマットを有効化。",
 	"configuration.format.wrapAttributes": "属性を折り返します。",
 	"configuration.editor.focusMode": "トップレベル SFC タグをフェード。",
 	"configuration.editor.reactivityVisualization": "リアクティブシステムの可視化。",

extensions/vscode/package.nls.json

@@ -16,6 +16,9 @@
 	"configuration.format.template.initialIndent": "Initial indent for `<template>` block.",
 	"configuration.format.script.initialIndent": "Initial indent for `<script>` block.",
 	"configuration.format.style.initialIndent": "Initial indent for `<style>` block.",
+	"configuration.format.template.enabled": "Enable formatting for `<template>` block.",
+	"configuration.format.script.enabled": "Enable formatting for `<script>` block.",
+	"configuration.format.style.enabled": "Enable formatting for `<style>` block.",
 	"configuration.format.wrapAttributes": "Wrap attributes.",
 	"configuration.editor.focusMode": "Fade top-level SFC tags.",
 	"configuration.editor.reactivityVisualization": "Reactivity system visualization.",

extensions/vscode/package.nls.ru.json

@@ -16,6 +16,9 @@
 	"configuration.format.template.initialIndent": "Начальный отступ для блока `<template>`.",
 	"configuration.format.script.initialIndent": "Начальный отступ для блока `<script>`.",
 	"configuration.format.style.initialIndent": "Начальный отступ для блока `<style>`.",
+	"configuration.format.template.enabled": "Включить форматирование для блока `<template>`.",
+	"configuration.format.script.enabled": "Включить форматирование для блока `<script>`.",
+	"configuration.format.style.enabled": "Включить форматирование для блока `<style>`.",
 	"configuration.format.wrapAttributes": "Переносить атрибуты.",
 	"configuration.editor.focusMode": "Затемнить теги SFC верхнего уровня.",
 	"configuration.editor.reactivityVisualization": "Визуализация системы реактивности.",

extensions/vscode/package.nls.zh-CN.json

@@ -16,6 +16,9 @@
 	"configuration.format.template.initialIndent": "`<template>` 块的初始缩进。",
 	"configuration.format.script.initialIndent": "`<script>` 块的初始缩进。",
 	"configuration.format.style.initialIndent": "`<style>` 块的初始缩进。",
+	"configuration.format.template.enabled": "启用 `<template>` 块的格式化。",
+	"configuration.format.script.enabled": "启用 `<script>` 块的格式化。",
+	"configuration.format.style.enabled": "启用 `<style>` 块的格式化。",
 	"configuration.format.wrapAttributes": "对属性进行换行。",
 	"configuration.editor.focusMode": "淡化顶层 SFC 标签。",
 	"configuration.editor.reactivityVisualization": "响应性系统可视化。",

extensions/vscode/package.nls.zh-TW.json

@@ -16,6 +16,9 @@
 	"configuration.format.template.initialIndent": "`<template>` 區塊的初始縮排。",
 	"configuration.format.script.initialIndent": "`<script>` 區塊的初始縮排。",
 	"configuration.format.style.initialIndent": "`<style>` 區塊的初始縮排。",
+	"configuration.format.template.enabled": "啟用 `<template>` 區塊的格式化。",
+	"configuration.format.script.enabled": "啟用 `<script>` 區塊的格式化。",
+	"configuration.format.style.enabled": "啟用 `<style>` 區塊的格式化。",
 	"configuration.format.wrapAttributes": "對屬性進行換行。",
 	"configuration.editor.focusMode": "淡化頂層 SFC 標籤。",
 	"configuration.editor.reactivityVisualization": "響應性系統視覺化。",

packages/language-service/index.ts

@@ -20,6 +20,7 @@ import { create as createVueDirectiveCommentsPlugin } from './lib/plugins/vue-di
 import { create as createVueDocumentDropPlugin } from './lib/plugins/vue-document-drop';
 import { create as createVueDocumentHighlightsPlugin } from './lib/plugins/vue-document-highlights';
 import { create as createVueExtractFilePlugin } from './lib/plugins/vue-extract-file';
+import { create as createVueFormatTakeOverPlugin } from './lib/plugins/vue-format-takeover';
 import { create as createVueGlobalTypesErrorPlugin } from './lib/plugins/vue-global-types-error';
 import { create as createVueInlayHintsPlugin } from './lib/plugins/vue-inlayhints';
 import { create as createVueMissingPropsHintsPlugin } from './lib/plugins/vue-missing-props-hints';
@@ -43,6 +44,7 @@ export function createVueLanguageServicePlugins(
 	return [
 		createJsonPlugin(),
 		createPugFormatPlugin(),
+		createVueFormatTakeOverPlugin(),
 		createVueAutoSpacePlugin(),
 		createVueCompilerDomErrorsPlugin(),
 		createVueDirectiveCommentsPlugin(),

packages/language-service/lib/plugins/vue-format-takeover.ts

@@ -0,0 +1,54 @@
+import type { LanguageServicePlugin, LanguageServicePluginInstance, TextDocument } from '@volar/language-service';
+import { URI } from 'vscode-uri';
+
+export function create(): LanguageServicePlugin {
+	return {
+		name: 'vue-format-takeover',
+		capabilities: {
+			documentFormattingProvider: true,
+			documentOnTypeFormattingProvider: {
+				triggerCharacters: [],
+			},
+		},
+		create(context): LanguageServicePluginInstance {
+			return {
+				async provideDocumentFormattingEdits(document) {
+					if (await shouldSkip(document)) {
+						return [];
+					}
+					return undefined;
+				},
+				async provideOnTypeFormattingEdits(document) {
+					if (await shouldSkip(document)) {
+						return [];
+					}
+					return undefined;
+				},
+			};
+			async function shouldSkip(document: TextDocument): Promise<boolean> {
+				const decoded = context.decodeEmbeddedDocumentUri(URI.parse(document.uri));
+				if (!decoded) {
+					return false;
+				}
+
+				const [, embeddedCodeId] = decoded;
+
+				if (embeddedCodeId === 'script_raw' || embeddedCodeId === 'scriptsetup_raw') {
+					return await context.env.getConfiguration<boolean>?.('vue.format.script.enabled') === false;
+				}
+				if (embeddedCodeId.startsWith('style_')) {
+					return await context.env.getConfiguration<boolean>?.('vue.format.style.enabled') === false;
+				}
+				if (
+					embeddedCodeId === 'template'
+					|| embeddedCodeId.startsWith('template_inline_ts_')
+					|| embeddedCodeId === 'root_tags'
+				) {
+					return await context.env.getConfiguration<boolean>?.('vue.format.template.enabled') === false;
+				}
+
+				return false;
+			}
+		},
+	};
+}

packages/language-service/tests/format/enabled-separately.spec.ts

@@ -0,0 +1,80 @@
+import { defineFormatTest } from '../utils/format';
+
+const snippet = `
+<template>
+<div />
+</template>
+<script>
+if (true)
+console.log('hello');
+</script>
+<style>
+body {
+color: red;
+}
+</style>`;
+
+const units = {
+	'vue.format.style.enabled': {
+		description: 'disable style formatting',
+		output: `
+<template>
+\t<div />
+</template>
+<script>
+if (true)
+\tconsole.log('hello');
+</script>
+<style>
+body {
+color: red;
+}
+</style>
+`,
+	},
+	'vue.format.script.enabled': {
+		description: 'disable script formatting',
+		output: `
+<template>
+\t<div />
+</template>
+<script>
+if (true)
+console.log('hello');
+</script>
+<style>
+body {
+\tcolor: red;
+}
+</style>
+`,
+	},
+	'vue.format.template.enabled': {
+		description: 'disable template formatting',
+		output: `
+<template>
+<div />
+</template>
+<script>
+if (true)
+\tconsole.log('hello');
+</script>
+<style>
+body {
+\tcolor: red;
+}
+</style>
+`,
+	},
+};
+
+for (const [setting, { description, output }] of Object.entries(units)) {
+	const title = '#' + __filename.split('.')[0];
+	defineFormatTest({
+		title: title + ' (' + description + ')',
+		languageId: 'vue',
+		input: snippet.trim(),
+		output: output.trim(),
+		settings: { [setting]: false },
+	});
+}