@codemirror/lint

Basic Linting

This code demonstrates how to set up a basic linter in a CodeMirror 6 editor. The `linter` function is used to create a custom linter, and `lintGutter` is used to display linting results in the editor's gutter.

const { linter, lintGutter } = require('@codemirror/lint');
const { EditorState, EditorView, basicSetup } = require('@codemirror/basic-setup');

const myLinter = linter(view => {
  let diagnostics = [];
  // Custom linting logic
  return diagnostics;
});

const state = EditorState.create({
  doc: 'const x = 10;',
  extensions: [basicSetup, myLinter, lintGutter()]
});

const view = new EditorView({state, parent: document.body});

Custom Linting Logic

This code sample shows how to implement custom linting logic. The linter checks for the presence of the string 'foo' in the document and returns an error diagnostic if found.

const { linter } = require('@codemirror/lint');

const myLinter = linter(view => {
  let diagnostics = [];
  for (let {from, to, text} of view.state.doc.iterRange(0, view.state.doc.length)) {
    if (text.includes('foo')) {
      diagnostics.push({
        from,
        to,
        severity: 'error',
        message: 'Avoid using "foo"'
      });
    }
  }
  return diagnostics;
});

Linting with External Libraries

This example demonstrates how to integrate an external linting library, such as ESLint, with CodeMirror's linting system. The linter function uses ESLint to analyze the document and convert the results into CodeMirror diagnostics.

const { linter } = require('@codemirror/lint');
const { lint } = require('eslint');

const eslintLinter = linter(view => {
  const results = lint(view.state.doc.toString());
  return results.map(result => ({
    from: result.range[0],
    to: result.range[1],
    severity: result.severity === 2 ? 'error' : 'warning',
    message: result.message
  }));
});