gpt4 book ai didi

webpack - 如何以编程方式在 Ace Editor 中添加片段?

转载 作者:行者123 更新时间:2023-12-05 02:59:01 24 4
gpt4 key购买 nike

我想将自己的自定义代码片段添加到我的 ace 编辑器输入框。

我将如何添加它们?

来自 Ace editor regarding snippets 的文档:

Currently, the only way to add custom snippets to a project is to create a plugin (as described here).

我看到一个名为 ace-snippet-extension 的项目但它自 2016 年以来就没有更新过,而且除了允许我添加一个片段之外,它还做了更多的事情。

此外,我使用的是 ES6+/ES2015+,因此 require 语句也很困惑。

这是我正在寻找的结果:

Ace Editor, showing a snippet suggestion for text 'build' after pressing Ctrl + Space

最佳答案

经过一些研究,我从 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")' },
])
)

关于webpack - 如何以编程方式在 Ace Editor 中添加片段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58377763/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com