Browse Source

monaco editor 支持

master
修宁 6 months ago
parent
commit
2b8c8d72d7
  1. 4
      src/components/YvSrcEditor.vue
  2. 18
      src/components/YvSrcEditorInner.vue
  3. 38
      src/core/script/ScriptSupport.ts
  4. 4
      src/editor/widgets/script/ScriptView.vue
  5. 2
      src/example/example1.js

4
src/components/YvSrcEditor.vue

@ -1,6 +1,6 @@
<script> <script>
import Inner from './YvSrcEditorInner.vue' import { defineAsyncComponent } from 'vue'
// yv-src-editor-inner.vue // yv-src-editor-inner.vue
export default Inner export default defineAsyncComponent(() => import('./YvSrcEditorInner.vue'))
</script> </script>

18
src/components/YvSrcEditorInner.vue

@ -12,6 +12,7 @@
<script> <script>
import _ from 'lodash' import _ from 'lodash'
import { loader, VueMonacoEditor } from '@guolao/vue-monaco-editor' import { loader, VueMonacoEditor } from '@guolao/vue-monaco-editor'
import { setupMonacoEditor } from '@/core/script/ScriptSupport.js'
loader.config({ loader.config({
paths: { paths: {
@ -39,6 +40,16 @@ export default {
'editor-focus' 'editor-focus'
], ],
mounted() { mounted() {
// const monaco = window['monaco']
// debugger
// monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
// noSemanticValidation: true,
// noSyntaxValidation: false
// })
// monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
// target: monaco.languages.typescript.ScriptTarget.ES2016,
// allowNonTsExtensions: true
// })
}, },
data() { data() {
const option = { const option = {
@ -111,6 +122,7 @@ export default {
methods: { methods: {
onBeforeMount(monaco) { onBeforeMount(monaco) {
this.monaco = monaco this.monaco = monaco
setupMonacoEditor(monaco)
}, },
onMount(editor, monaco) { onMount(editor, monaco) {
this.editor = editor this.editor = editor
@ -176,5 +188,11 @@ export default {
width: 100%; width: 100%;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
border: 1px solid #ccc;
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main {
flex-direction: row;
font-size: 14px;
}
} }
</style> </style>

38
src/core/script/ScriptSupport.ts

@ -0,0 +1,38 @@
/**
* monaco
* @param monaco
*/
export function setupMonacoEditor(monaco: any) {
if (!monaco || monaco.__isExtended) {
return
}
// 启用诊断信息(语法、语义错误提示)
monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
noSemanticValidation: false,
noSyntaxValidation: false,
noSuggestionDiagnostics: false
})
// 注入 mylib 模块的类型定义
monaco.languages.typescript.typescriptDefaults.addExtraLib(
`
declare module 'mylib' {
export function greet(name: string): void;
export const version: string;
}
`,
'file:///node_modules/mylib/index.d.ts'
)
// 配置 TypeScript 编译器选项
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.Latest,
module: monaco.languages.typescript.ModuleKind.ESNext,
moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
noEmit: true,
strict: true,
lib: ['esnext'],
types: [] // 不加载默认 DOM 类型
})
monaco.__isExtended = true
}

4
src/editor/widgets/script/ScriptView.vue

@ -35,7 +35,9 @@ import IWidgets from '../IWidgets.js'
export default { export default {
name: 'ScriptView', name: 'ScriptView',
components: { YvSrcEditor }, components: {
YvSrcEditor
},
mixins: [IWidgets], mixins: [IWidgets],
data() { data() {
return { return {

2
src/example/example1.js

@ -542,7 +542,7 @@ export default {
}, },
{ {
catalogCode: '__f2', t: 'floor', catalogCode: '__f2', t: 'floor',
items: buildPointPerformanceData('carton', 200, 500) items: buildPointPerformanceData('pallet', 200, 500, 0.14)
}, },
{ {
catalogCode: '__f5', t: 'floor', catalogCode: '__f5', t: 'floor',

Loading…
Cancel
Save