标签: monaco-editor

我正在尝试在前端使用 Vue 和 Monaco Editor 并在后端使用 Asp.Net Core 3 制作一个 Web 应用程序。\n我也在使用 webpack，因为我使用的是 Vue 单页面组件。\n我是 webpack 的新手，并且不了解其所有功能。不管怎样，webpack 将构建分割成几个文件（看起来是块）。但是，在加载网页时，我不断收到错误Uncaught (in promise) ChunkLoadError: Loading chunk 2 failed.\n我尝试用谷歌搜索答案，但到目前为止我所做的一切都不起作用。

这是我的 package.json 和 webpack.config.json。

包.json

    {\n    "name": "parvis",\n    "version": "1.0.0",\n    "description": "This is a description",\n    "main": "main.js",\n    "scripts": {\n        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",\n        "serve": "cross-env NODE_ENV=development webpack --devtool source-map --progress --hide-modules",\n        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"\n    },\n    "keywords": [\n        "dataflow"\n    ],\n    "author": "Marin Agli\xc4\x87 \xc4\x8cuvi\xc4\x87",\n    "license": "MIT",\n …

我使用摩纳哥编辑器。

我的完整代码太长，无法在这里发布，但这是我的设置：

automaticLayout: true,
folding: false,
theme: 'vs-dark',
lineNumbers: 'off',
minimap: {
    enabled: false
}

问题

• 当我放大窗口时，摩纳哥编辑器会按预期显示。
• 当我缩小窗口时，Monaco 编辑器不会调整大小（高度）。

问题

如何强制从脚本触发调整大小？

我尝试过，但没有成功

发生的情况是，每次窗口更改时都会输出控制台消息，但不会输出摩纳哥高度。

window.onresize = () => {
  console.log('Window resize');
  editor.layout();
});

演示

我首先放大，然后通过增大/缩小开发人员控制台来减小高度。

当我尝试在 vue-cli-3 项目中包含优化选项（该项目在某些页面中使用 monaco-editor）时，我在控制台中收到以下错误：

languageFeatures.js?ff36:85 Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js?ccf6:540)
    at eval (webWorker.js?af50:54)

这是我的 vue.config.js 文件：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const PurgecssPlugin = require("purgecss-webpack-plugin");


module.exports = {
    transpileDependencies: ["vuex-persist", "vuex-persistedstate"],
    configureWebpack: {
        devtool: false,
        optimization: {
            splitChunks: {
                minSize: 10000, 
                maxSize: 250000, 
            },
            nodeEnv: "production",
            minimize: true,
            minimizer: [
                new TerserPlugin({
                    extractComments: 'false',
                    parallel: true,
                }),
            ],
            removeEmptyChunks: true,
            removeAvailableModules: true,
            mergeDuplicateChunks: true
        },
        plugins: [
            new MonacoWebpackPlugin({
                languages: ['javascript', 'css', 'html', 'typescript', 'json'],
                features: …

我试图为摩纳哥编辑器实现我的自定义完成项提供程序，并且我期望每次击键都会调用completionItemProvider。相反，它会在每两个字符后触发。

function createDependencyProposals(range) {
    // returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
    // here you could do a server side lookup
    return [
        {
            label: '"lodash"',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "The Lodash library exported as Node.js modules.",
            insertText: '"lodash": "*"',
            range: range
        },
        {
            label: '"express"',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "Fast, unopinionated, minimalist web framework",
            insertText: '"express": "*"',
            range: range
        },
        {
            label: '"mkdirp"',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "Recursively mkdir, like …

我正在使用 Monaco Editor 来制作我自己的 IDE。我习惯provideHover在某些类型的代码下划线。看起来下划线的颜色不同DiagnosticCategory或有影响。MarkerSeverity目前好像只有4种下划线颜色。

/* Diagnostics */
enum DiagnosticCategory {
    Warning = 0,
    Error = 1,
    Suggestion = 2,
    Message = 3
}

有谁知道如何添加更多种类的下划线颜色？

我需要从我正在处理的项目中删除此选择边框，并且我已经尝试了API 中的所有不同选项，但均无济于事。检查 CSS 也没有帮助。如何删除/编辑它？

我正在尝试采用一种自定义方式来实现转到定义，并且据我所知，这需要重写编辑器服务，尤其openEditor()是 和方法。findModel()

我尝试遵循此评论：
https://github.com/microsoft/monaco-editor/issues/291#issuecomment-450706479 但无法在摩纳哥的操场上运行它，因为findModel.

我尝试将它添加到游乐场，所以它看起来像这样：

monaco.languages.register({ id: 'mySpecialLanguage' });

monaco.languages.registerDefinitionProvider('mySpecialLanguage', {
    provideDefinition: function(model, position, cancellationToken) {
        return {
            uri: monaco.Uri.parse('http://a/different/file.txt'),
            range: new monaco.Range(3, 1, 3, 1)
        };
    }
});

var editorService = {
    openEditor: function() {
        alert(`open editor called!` + JSON.stringify(arguments));
    },
    resolveEditor: function() {
        alert(`resolve editor called!` + JSON.stringify(arguments));
    },
    findModel:function(editor, data) {
        alert(`resolve editor called!` + JSON.stringify(arguments));
    }
};

monaco.editor.create(document.getElementById("container"), {
    value: '\n\Go to definition on this text',
    language: 'mySpecialLanguage'
}, { …

我正在尝试使用本指南https://github.com/atularen/ngx-monaco-editor#readme将 Monaco Editor 嵌入到我正在开发的 Web 应用程序中。我尝试添加ngx-monaco-editor标签，但 Angular 给了我这个错误。关于如何解决这个问题有什么想法吗？

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(EditorModule)[InjectionToken NGX_MONACO_EDITOR_CONFIG -> InjectionToken NGX_MONACO_EDITOR_CONFIG -> InjectionToken NGX_MONACO_EDITOR_CONFIG -> InjectionToken NGX_MONACO_EDITOR_CONFIG]: \n  NullInjectorError: No provider for InjectionToken NGX_MONACO_EDITOR_CONFIG!\nNullInjectorError: R3InjectorError(EditorModule)[InjectionToken NGX_MONACO_EDITOR_CONFIG -> InjectionToken NGX_MONACO_EDITOR_CONFIG -> InjectionToken NGX_MONACO_EDITOR_CONFIG -> InjectionToken NGX_MONACO_EDITOR_CONFIG]: \n  NullInjectorError: No provider for InjectionToken NGX_MONACO_EDITOR_CONFIG!\n    at NullInjector.get (core.js:915)\n    at R3Injector.get (core.js:11082)\n    at R3Injector.get (core.js:11082)\n    at R3Injector.get (core.js:11082)\n    at NgModuleRef$1.get (core.js:24199)\n    at R3Injector.get (core.js:11082)\n    at NgModuleRef$1.get (core.js:24199)\n    at Object.get (core.js:22102)\n    at …

据我了解，monaco-editor和 VSCode 使用两种不同的格式来定义主题。

• 示例：默认摩纳哥主题
• 示例：默认 VSC 主题

似乎 VSC 的早期版本主要使用tmTheme定义格式，允许使用此工具转换主题（另请参阅2017 年的 GitHub 问题）。但是，由于 VSC 现在使用新的格式来定义其主题，我想知道是否有一种（简单）方法可以在 Monaco 编辑器中使用现有的 VSC 主题。

非常感谢你的帮助！:)

PS 2019 年的 GitHub 问题评论似乎表明确实没有简单的方法可以做到这一点，但希望从那时起事情已经发生了变化。

我希望摩纳哥编辑将 lodash 视为一个库。为了解决这个问题，我使用addExtraLib(content: string, filePath?: string)。由于 lodash 是我的节点模块，我可以提供文件路径，但要在内容中写入内容。我需要在我的摩纳哥编辑器中启用 lodash 的全部功能。

我可以使用https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults添加一个小型自定义库

需要帮助来解决此问题。