Linting

[thiagoarantes]

Is linting available in this wrapper? Can't seem to be able to add it in basicSetup or anywhere else. I am testing it with javascript language, that is supported by default in codemirror.net https://codemirror.net/5/demo/lint.html

[jaywcjlove]

https://codemirror.net/docs/ref/#lint codemirror v6 Example: https://codemirror.net/examples/lint/

If you use codemirror v5 use @uiw/react-codemirror v3.

If you use codemirror v6 use @uiw/react-codemirror v4.

@thiagoarantes

[thiagoarantes]

From the example: https://codemirror.net/examples/lint/

The library does not come with a collection of lint sources. Some language packages (such as @codemirror/lang-javascript) may include integration with lint libraries, but usually setting up a source is something you have to do yourself.

I understand by this that javascript package should come with some linting features. I don't see any being applied, though. Thoughts?

Tks!

[jaywcjlove]

I don't have a very good idea yet because I don't have a similar application in my project. @thiagoarantes

[bryandowning]

@thiagoarantes From: https://github.com/codemirror/lang-javascript/#user-content-eslint

esLint(eslint: any, config⁠?: any) → fn(view: EditorView) → Diagnostic[]

Connects an ESLint linter to CodeMirror's lint integration. eslint should be an instance of the Linter class, and config an optional ESLint configuration. The return value of this function can be passed to linter to create a JavaScript linting extension.

Note that ESLint targets node, and is tricky to run in the browser. The eslint-linter-browserify package may help with that (see example).

This means you need to: npm install @codemirror/lint

...then something like this

import {linter} from '@codemirror/lint'
import {javascript, esLint} from '@codemirror/lang-javascript'

const esLinter = linter(esLint(/* esLint Linter instance, esLint config */))

/*...*/

<CodeMirror extensions={[javascript(), esLinter]} />

[thiagoarantes]

Thanks!