webpack 如何以编程方式在Ace编辑器中添加代码段?

ryoqjall  于 2022-12-27  发布在  Webpack
关注(0)|答案(2)|浏览(202)

我想添加我自己的自定义代码片段到我的ace编辑器输入框。
我该如何添加它们呢?
来自Ace editor regarding snippets.)的文档:
目前,向项目添加定制代码段的唯一方法是创建插件(如此处所述)。
我看到了一个名为ace-snippet-extension的项目,但它自2016年以来一直没有更新,它所做的事情不仅仅是允许我添加一个片段。
另外,我使用的是ES6+/ES 2015+,所以require语句也很混乱。
这就是我想要的结果:

insrf1ej

insrf1ej1#

经过一番研究,我从ace-snippet-extension中提取了一些有用的部分,另一个棘手的部分是代码片段似乎需要某种类型的缩进,我为此创建了一个函数(但是没有经过很好的测试)

以下是名为ace-snippets-extension-simple.js的“库”代码:

import ace from 'ace-builds'

export const registerSnippets = function(editor, session, mode, snippetText) {
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
    })

    var snippetManager = ace.require('ace/snippets').snippetManager

    var id = session.$mode.$id || ''
    var m = snippetManager.files[id]

    m.scope = mode
    m.snippetText = snippetText
    m.snippet = snippetManager.parseSnippetFile(snippetText, m.scope)

    snippetManager.register(m.snippet, m.scope)
}

export const createSnippets = snippets =>
    (Array.isArray(snippets) ? snippets : [snippets])
        .map(({ name, code }) =>
            [
                'snippet ' + name,
                code
                    .split('\n')
                    .map(c => '\t' + c)
                    .join('\n'),
            ].join('\n')
        )
        .join('\n')

以下是“消费者”代码的示例:

使用此选项导入上述内容。

import ace from 'ace-builds'
import { Range, EditSession } from 'ace-builds'
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/src-noconflict/mode-javascript'
import 'ace-builds/webpack-resolver'

import {
    registerSnippets,
    createSnippets,
} from './ace-snippets-extension-simple'

const editor = ace.edit(/*HTMLElement reference or css selector string*/)

// ...
// ...
// ...

editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: false,
})

editor.setTheme('ace/theme/monokai')
editor.session.setMode('ace/mode/javascript')

registerSnippets(
    editor,
    editor.session,
    'javascript',
    createSnippets([
        { name: 'build', code: 'console.log("build")' },
        { name: 'destroy', code: 'console.log("destroy")' },
    ])
)
wz3gfoph

wz3gfoph2#

my yaml snippet example
   var SnippetManager = ace.require("ace/snippets").snippetManager;
   var snippets = [
      {
        name: "build",
        content: "Hello build"
      }
    ];
    SnippetManager.register(snippets, "yaml");

相关问题