How to actually use eslint in Codemirror 6

v6
1

Thank you for the awesome work on CodeMirror. Version 6 is truly amazing.
I am porting everything over. One thing I need is Linting for Javascript.
I imported the required variables:

import { linter, lintKeymap, lintGutter } from ‘@codemirror/lint’
import { javascript, esLint } from ‘@codemirror/lang-javascript’

My understanding is that I have to do something like this:

const linterExtension = elLint(???)

And then call the editor like this:

    this.view = new EditorView({
      state: EditorState.create({
        extensions: [
          history(),
          keymap.of([...defaultKeymap, ...searchKeymap, ...lintKeymap, ...historyKeymap]),
          javascript(),
          defaultHighlightStyle,
          lineNumbers(), gutter({ class: 'cm-mygutter' }),
          search({ top: true }),
          highlightSelectionMatches(),
          lintGutter(),
          linter(linterExtension)
        ]
      }),
      parent: div
    })

The question is, what do I have to pass esLint…?

There is info here:

However neither GitHub - mysticatea/eslint4b: ESLint which works in browsers. (which had its last commit in 2017) nor GitHub - marijnh/eslint4b-prebuilt provide a browser-ready file.

Or, can I still use JSHint as a linter?

2

eslint4b-prebuilt provides a module fule that your bundler (which I assume you’re already using to bundle CodeMirror) can consume.

3

Thanks for that.
So this works:

import { linter, lintKeymap, lintGutter } from '@codemirror/lint'
import Linter from 'eslint4b-prebuilt/dist/eslint4b.es.js'
...
        this.view = new EditorView({
          state: EditorState.create({
            extensions: [
              history(),
              keymap.of([...defaultKeymap, ...searchKeymap, ...lintKeymap, ...historyKeymap]),
              javascript(),
              defaultHighlightStyle,
              lineNumbers(), gutter({ class: 'cm-mygutter' }),
              search({ top: true }),
              highlightSelectionMatches(),
              lintGutter(),
              linter(esLint(new Linter()))
            ]
          }),
          parent: div
        })

If I try to build it myself, using the exact NPM package, I get:

Uncaught ReferenceError: global is not defined
    at eslint4b.es.js:1:91515

Any hints on why? I am using the identical packages etc.

I found this on Rollup… but why doesn’t it affect your build as well…? Uncaught ReferenceError: global is not defined · Issue #832 · airbrake/airbrake-js · GitHub

4

I don’t know what the problem could be here. But also, why are you commenting on that issue for airbrake?

5

Something funky happened. I could have sworn I was under the “Folding functions” issue. I will comment there to keep things sane. Sorry.

6

I meant, I thought I was in the “Rollup” github, which has a nearly identical question. Thanks for pointing it out.

7

CodeMirror 6 can use eslint-linter-browserify

8

@marijn , How to add a cdn link(js file) to eslint ?

9

Codemirror’s official site provides a clear description of how linting works in Codemirror 6.

There’s two ways to do this:

  • Find a linter that you can run in the browser, run it on the content, and translate its output into the expected format.
  • Write one from scratch, possibly using the syntax tree kept by the editor.

What is the format? It’s the Diagnostic interface in the @codemirror/lint package.

If there’s a linter that works in the browser, the whole process is straightforward: passing the editView.state.doc.toString() to the linter to obtain the lint results and then converting the results to Diagnostic.

What if there’s no working linter in browser or the bundle is too big to bundle? I think using remotely lint is an option too.

Benefits of Using a Remote Solution

  • No additional bundle size, even if you have tens of linters on one page.
  • Stay updated with the latest versions of linters without waiting for updates to an npm package.

working demo:
https://pagehelper.lets-script.com/blog/codemirror6-lint/