@codemirror/lint

What is @codemirror/lint?

@codemirror/lint is a package for the CodeMirror 6 text editor that provides linting functionality. It allows developers to integrate custom linting logic into their CodeMirror instances, enabling real-time code analysis and error reporting.

What are @codemirror/lint's main functionalities?

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
  }));
});

Other packages similar to @codemirror/lint

eslint

ESLint is a popular linting tool for JavaScript and TypeScript. It provides a wide range of rules and plugins for code quality and style enforcement. Unlike @codemirror/lint, which is specific to the CodeMirror editor, ESLint can be used in various environments, including command-line interfaces and build systems.

jshint

JSHint is another JavaScript linting tool that helps detect errors and potential problems in code. It is similar to ESLint but has a different set of rules and configurations. JSHint can be integrated into various editors and build systems, whereas @codemirror/lint is specifically designed for use with CodeMirror.

stylelint

Stylelint is a linter for CSS and other style sheet languages. It helps enforce consistent conventions and catch errors in stylesheets. While @codemirror/lint focuses on providing a linting framework for CodeMirror, Stylelint is specialized for style sheet linting and can be used in different environments.

README

@codemirror/lint

[ WEBSITE | DOCS | ISSUES | FORUM | CHANGELOG ]

This package implements linting support for the CodeMirror code editor.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

Changelog

6.8.4 (2024-11-28)

Bug fixes

Don't create overlapping decorations when diagnostics overlap.

Fix an issue where block widgets could cause the lint gutter to show diagnostics multiple times.