优化

src/plugins/editor-monaco/components/monaco.vue

@@ -2,7 +2,8 @@
 	<div
 		class="cl-editor-monaco"
 		:class="{
-			disabled
+			disabled,
+			border
 		}"
 		:ref="setRefs('editor')"
 		:style="{ height: parsePx(height) }"
@@ -19,7 +20,6 @@ import "../utils/worker";
 import "../utils/theme";
 import "../utils/config";
 import { useFormat } from "../utils/format";
-import { useTypes } from "../utils/types";
 
 const props = defineProps({
 	modelValue: null,
@@ -40,14 +40,17 @@ const props = defineProps({
 		type: String,
 		default: "json"
 	},
-	disabled: Boolean
+	disabled: Boolean,
+	border: {
+		type: Boolean,
+		default: true
+	}
 });
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
 const { refs, setRefs } = useCool();
 const format = useFormat();
-const types = useTypes();
 
 // 高度
 const height = ref(props.height);
@@ -159,9 +162,6 @@ function create() {
 				formatCode();
 			}
 		}, 300);
-
-		// 代码描述
-		types.loadDeclares();
 	});
 }
 
@@ -196,8 +196,15 @@ defineExpose({
 
 <style lang="scss" scoped>
 .cl-editor-monaco {
-	border: 1px solid var(--el-border-color);
 	box-sizing: border-box;
 	min-height: 100px;
+
+	:deep(.monaco-editor) {
+		outline-width: 0;
+	}
+
+	&.border {
+		border: 1px solid var(--el-border-color);
+	}
 }
 </style>

src/plugins/editor-monaco/config.ts

@@ -1,12 +1,12 @@
-import type { ModuleConfig } from "/@/cool";
+import { ModuleConfig } from "/@/cool";
 
 export default (): ModuleConfig => {
 	return {
 		label: "代码编辑器",
-		description: "基于 monaco 封装的代码编辑器", // https://www.npmjs.com/package/monaco-editor
+		description: "基于 monaco 封装的代码编辑器",
 		author: "COOL",
-		version: "1.0.1",
+		version: "1.1.0",
-		updateTime: "2024-02-04",
+		updateTime: "2024-06-01",
 		demo: [
 			{
 				name: "基础用法",
@@ -14,7 +14,9 @@ export default (): ModuleConfig => {
 			}
 		],
 
-		// 组件依赖过大，如不需求请注释以下代码
+		components: [
-		components: [() => import("./components/monaco.vue")]
+			// 代码编辑器 https://www.npmjs.com/package/monaco-editor
+			() => import("./components/monaco.vue")
+		]
 	};
 };

src/plugins/editor-monaco/utils/config.ts

@@ -3,14 +3,23 @@ import { languages } from "monaco-editor";
 languages.typescript.typescriptDefaults.setEagerModelSync(true);
 
 languages.typescript.typescriptDefaults.setCompilerOptions({
-	target: languages.typescript.ScriptTarget.ES2016,
+	target: languages.typescript.ScriptTarget.ES2018,
 	allowNonTsExtensions: true,
-	moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs,
-	module: languages.typescript.ModuleKind.CommonJS,
 	experimentalDecorators: true,
+	jsx: languages.typescript.JsxEmit.Preserve,
+	esModuleInterop: true,
 	noEmit: true,
-	allowJs: false,
+	allowSyntheticDefaultImports: true,
-	typeRoots: ["node_modules/@types"]
+	noImplicitAny: false,
+	emitDecoratorMetadata: true,
+	inlineSourceMap: true,
+	noImplicitThis: true,
+	noUnusedLocals: false,
+	stripInternal: true,
+	skipLibCheck: true,
+	resolveJsonModule: true,
+	pretty: true,
+	declaration: true
 });
 
 languages.typescript.typescriptDefaults.setDiagnosticsOptions({

src/plugins/editor-monaco/utils/declare.ts

@@ -1,5 +1,32 @@
-export let Declares = ``;
+import { languages } from "monaco-editor";
+import { keys } from "lodash-es";
 
-export function addDeclare(content: string) {
+export function addDeclare({ path, content }: { path: string; content: string }) {
-	Declares += content;
+	const defaults = languages.typescript.typescriptDefaults;
+
+	const filePath = `file:///node_modules/${path}`;
+	const loaded = defaults.getExtraLibs();
+	const libs = keys(loaded).map((e) => {
+		return {
+			filePath: e,
+			content: loaded[e].content
+		};
+	});
+
+	const item = libs.find((e) => e.filePath.includes(path));
+	try {
+		if (item) {
+			item.content = content;
+			defaults.setExtraLibs(libs);
+		} else {
+			defaults.addExtraLib(content, filePath);
+		}
+	} catch (err) {
+		console.error(err);
+	}
+}
+
+export function clearDeclare() {
+	const defaults = languages.typescript.typescriptDefaults;
+	defaults.setExtraLibs([]);
 }

src/plugins/editor-monaco/utils/format.ts

@@ -42,9 +42,7 @@ export function useFormat() {
 							singleQuote: true,
 							trailingComma: "none"
 						});
-					} catch (e) {
+					} catch (err) {}
-						console.error("代码格式化失败", e);
-					}
 
 					return [
 						{

src/plugins/editor-monaco/utils/types.ts

@@ -1,29 +0,0 @@
-import { languages } from "monaco-editor";
-import { Declares } from "./declare";
-
-export function addExtraLib({ path, content }: { path: string; content: string }) {
-	const fullpath = `file:///node_modules/${path}`;
-	const defaults = languages.typescript.typescriptDefaults;
-
-	const loaded = defaults.getExtraLibs();
-	const keys = Object.keys(loaded);
-
-	if (!keys.includes(fullpath)) {
-		try {
-			defaults.addExtraLib(content, fullpath);
-		} catch (error) {
-			console.log(error, fullpath, keys);
-			throw error;
-		}
-	}
-}
-
-export function useTypes() {
-	function loadDeclares() {
-		addExtraLib({ path: "globals.d.ts", content: Declares });
-	}
-
-	return {
-		loadDeclares
-	};
-}