cool-admin-vue/src/plugins/editor-monaco/utils/format.ts

import { languages } from "monaco-editor";
import prettier from "prettier/standalone";
import pluginHtml from "prettier/plugins/html";
import pluginTypescript from "prettier/plugins/typescript";
import pluginPostcss from "prettier/plugins/postcss";
import pluginEstree from "prettier/plugins/estree";

const options: { [key: string]: { parser: string; plugins: any[] } } = {
	html: {
		parser: "html",
		plugins: [pluginHtml, pluginTypescript, pluginPostcss, pluginEstree]
	},
	typescript: {
		parser: "typescript",
		plugins: [pluginTypescript, pluginEstree]
	},
	css: {
		parser: "css",
		plugins: [pluginPostcss]
	},
	scss: {
		parser: "scss",
		plugins: [pluginPostcss]
	}
};

export function useFormat() {
	function register() {
		for (const i in options) {
			languages.registerDocumentFormattingEditProvider(i, {
				async provideDocumentFormattingEdits(model) {
					let text = model.getValue();

					const parser = options[i].parser;

					try {
						text = await prettier.format(text, {
							parser,
							plugins: options[i].plugins,
							semi: true,
							printWidth: 100,
							tabWidth: parser == "html" ? 4 : 2,
							useTabs: parser == "html",
							singleQuote: true,
							trailingComma: "none"
						});
					} catch (err) {
						// ...
					}

					return [
						{
							range: model.getFullModelRange(),
							text
						}
					];
				}
			});
		}
	}

	return {
		register
	};
}