Monaco 編輯器 - 與 JSHint 集成

Question

有沒有辦法將 monaco 編輯器與 jshint linting 工具集成？

我知道 monaco 提供了設置編譯器選項的可能性，但它們對我來說還不夠。 例如，我想在語句末尾使用分號，但找不到這樣做的方法。

Answer 1

好的，我找到了一種方法，但我仍在思考是否有更好的方法。

基本上，我可以手動運行我的代碼的 JSHint 分析。

jshint.JSHINT(this.code, options, predef)

然后根據結果，我可以創建我的自定義模型標記。 就像是：

let errors = jshint.JSHINT.data().errors.map(e => {
        return {
          startLineNumber: e.line,
          startColumn: e.character,
          endLineNumber: e.line,
          endColumn: e.character,
          message: e.raw,
          severity: e.code.startsWith('E') ? monaco.Severity.Error : monaco.Severity.Warning
        }
      })

並為我的編輯器設置模型標記。

monaco.editor.setModelMarkers(this.editor.getModel(), 'test', errors)

這行得通，雖然我仍然想自定義錯誤標記，但也許有更自然的方法？

Answer 2

這是使用 jshint 的 monaco 編輯器的 JS linter： https ://github.com/arnaudpfu/monaco-js-linter

Answer 3

如果您正在尋找預制的解決方案，這里有一個 JS linter 供使用 jshint 的 monaco 編輯器使用： https://github.com/arnaudpfu/monaco-js-linter

首先安裝它：

npm i monaco-js-linter

然后你可以像這樣集成 linter：

import monaco, { editor } from 'monaco-editor';
import JSMonacoLinter from 'monaco-js-linter';

// The Monaco Editor can be easily created, given an
// empty container and an options literal.
// Two members of the literal are "value" and "language".
// The editor takes the full size of its container.

const editor = monaco.editor.create(document.getElementById('container'), {
    value: 'js code here ...',
    language: 'javascript',
});

const linter = new JSMonacoLinter(editor, monaco);
linter.watch();

希望這會有所幫助！