How to use linter with parseMixed?

v6
1

I’m using parseMixed with a custom syntax language, something similar to js template literals, and javascript, when I try to apply the default eslint I got a lot of lint errors, not sure how to solve it, and didn’t found any content about it.

const CodeEditor: React.FC<CodeEditorProps> = ({ value, onChange }) => {
  const editor = useRef<HTMLDivElement>(null)
  const tabSize = new Compartment()
  const state = EditorState.create({
    doc: value,
    extensions: [
      basicSetup,
      tabSize.of(EditorState.tabSize.of(4)),
      keymap.of([...searchKeymap, ...lintKeymap]),
      search({ top: true }),
      lintGutter(),
      monokai,
      templating(),
      linter(
        esLint(new Linter(), {
          parserOptions: {
            ecmaVersion: 2019,
            sourceType: 'module',
            ecmaFeatures: { jsx: true },
          },
        })
      ),
      EditorView.updateListener.of(function (update) {
        if (update.docChanged) {
          onChange(update.state.doc.toString())
        }
      }),
    ],
  })

  useEffect(() => {
    if (!editor.current) return
    const view = new EditorView({
      state,
      parent: editor.current,
    })

    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value || '\n\n\n\n\n\n\n\n\n\n' } })

    return () => {
      view.destroy()
    }
  }, [editor.current])

  return (
    <>
      <Container ref={editor} />
    </>
  )
}

import { javascript, javascriptLanguage, jsxLanguage } from '@codemirror/lang-javascript'
import { foldNodeProp, foldInside, indentNodeProp, LRLanguage, LanguageSupport } from '@codemirror/language'
import { Diagnostic } from '@codemirror/lint'
import { EditorView } from '@codemirror/view'
import { parseMixed } from '@lezer/common'
import { styleTags, tags as t } from '@lezer/highlight'
import { parser as templatingParser } from './templating.js'

let parserWithMetadata = templatingParser.configure({
  wrap: parseMixed((node) => {
    return node.type.isTop
      ? {
          parser: jsxLanguage.parser,
          overlay: (node) => {
            return node.type.name === 'Text'
          },
        }
      : null
  }),
})

export const templatingLanguage = LRLanguage.define({
  parser: parserWithMetadata,
})

export const templatingAutoCompletion = templatingLanguage.data.of({
  autocomplete: (context) => null,
})

export function templating() {
  return [templatingLanguage, templatingAutoCompletion, javascript().support]
}

@marijn do you have any idea on how to do it?

2

When I set the jsxLanguage as the outer parser I got the linter working but I lose the custom syntax highlighting

import { javascript, jsxLanguage } from '@codemirror/lang-javascript'
import { LRLanguage } from '@codemirror/language'
import { parseMixed } from '@lezer/common'
import { parser as templatingParser } from './templating.js'

let parserWithMetadata = jsxLanguage.parser.configure({
  wrap: parseMixed((node) => {
    // console.log(node.type.name)
    return node.type.name === 'JSXText'
      ? {
          parser: templatingParser,
          overlay: (node) => {
            console.log(node.type.name)
            console.log(node.node.parent?.name)
            return node.type.name === 'JSXText'
          },
        }
      : null
  }),
  // languageData: {
  //   commentTokens: { block: { open: '$(', close: ')' } },
  // },
})

export const templatingLanguage = LRLanguage.define({
  parser: parserWithMetadata,
})

export const templatingAutoCompletion = templatingLanguage.data.of({
  autocomplete: (context) => null,
})

export function templating() {
  return [templatingLanguage, templatingAutoCompletion, javascript().support]
}
3

What does javascriptLanguage.findRegions(state) return on such a document? That’s what the eslint linter uses to determine which regions to run on.