请教下有没有办法配合 monaco-editor-nginx 一起使用

[devhaozi]

https://github.com/jaywcjlove/nginx-editor

想用它给编辑器添加 nginx 格式支持。

[imguolao]

你可以在 onBeforeMount 里面拿到 monaco 实例，然后像你发的这个仓库里的代码一样，注册 nginx 为新语言，设置提示补全和高亮。

https://github.com/jaywcjlove/nginx-editor/blob/c0a4b62ad0ad401f703e8ac3b711d9da9e700cec/src/index.tsx#L7-L60

[devhaozi]

你可以在 onBeforeMount 里面拿到 monaco 实例，然后像你发的这个仓库里的代码一样，注册 nginx 为新语言，设置提示补全和高亮。

https://github.com/jaywcjlove/nginx-editor/blob/c0a4b62ad0ad401f703e8ac3b711d9da9e700cec/src/index.tsx#L7-L60

搞定了，谢谢！

[Nobilta]

你可以在 onBeforeMount 里面拿到 monaco 实例，然后像你发的这个仓库里的代码一样，注册 nginx 为新语言，设置提示补全和高亮。
https://github.com/jaywcjlove/nginx-editor/blob/c0a4b62ad0ad401f703e8ac3b711d9da9e700cec/src/index.tsx#L7-L60

搞定了，谢谢！

想请教下具体是如何实现的呢？

beforeMount() {
    const monaco = this.$options.components.VueMonacoEditor;
    monaco.languages.register({
      id: 'nginx',
    });
    }

我尝试这样注册后会提示找不到register方法，好像还是没找到monaco实例

[devhaozi]

你可以在 onBeforeMount 里面拿到 monaco 实例，然后像你发的这个仓库里的代码一样，注册 nginx 为新语言，设置提示补全和高亮。
https://github.com/jaywcjlove/nginx-editor/blob/c0a4b62ad0ad401f703e8ac3b711d9da9e700cec/src/index.tsx#L7-L60

搞定了，谢谢！

想请教下具体是如何实现的呢？

beforeMount() {
    const monaco = this.$options.components.VueMonacoEditor;
    monaco.languages.register({
      id: 'nginx',
    });
    }

我尝试这样注册后会提示找不到register方法，好像还是没找到monaco实例

const editorOnBeforeMount = (monaco: any) => {
  monaco.languages.register({
    id: 'nginx'
  })

  monaco.languages.setMonarchTokensProvider('nginx', tokenConf)
  monaco.editor.defineTheme('nginx-theme', themeConfig)
  monaco.editor.defineTheme('nginx-theme-dark', themeDarkConfig)

  monaco.languages.registerCompletionItemProvider('nginx', {
    provideCompletionItems: (model: any, position: any) => {
      const word = model.getWordUntilPosition(position)
      const range = {
        startLineNumber: position.lineNumber,
        endLineNumber: position.lineNumber,
        startColumn: word.startColumn,
        endColumn: word.endColumn
      }
      return { suggestions: suggestions(range) }
    }
  })

  monaco.languages.registerHoverProvider('nginx', {
    provideHover: (model: any, position: any) => {
      const word = model.getWordAtPosition(position)
      if (!word) return
      const data = directives.find((item) => item.n === word.word || item.n === `$${word.word}`)
      if (!data) return
      const range = {
        startLineNumber: position.lineNumber,
        endLineNumber: position.lineNumber,
        startColumn: word.startColumn,
        endColumn: word.endColumn
      }
      const contents = [{ value: `**\`${data.n}\`** | ${data.m} | ${data.c || ''}` }]
      if (data.s) {
        contents.push({ value: `**syntax:** ${data.s || ''}` })
      }
      if (data.v) {
        contents.push({ value: `**default:** ${data.v || ''}` })
      }
      if (data.d) {
        contents.push({ value: `${data.d}` })
      }
      return {
        contents: [...contents],
        range: range
      }
    }
  })
}