codemirror-lint-eslint

1.0.1 verified Fri May 01 auth: no javascript deprecated

A CodeMirror addon that integrates ESLint linting into CodeMirror editors. Version 1.0.1 is the latest stable release. It provides an 'eslint-lint.js' script that hooks into CodeMirror's lint addon, enabling real-time JavaScript linting with ESLint. Simple setup: include ESLint, CodeMirror core, JavaScript mode, lint addon, and the eslint-lint.js script. Useful for web-based code editors where you want to show lint errors inline. Note: requires a globally available 'eslint' object (from eslint.js). Currently unmaintained but functional for basic use.

Common errors

error Uncaught ReferenceError: eslint is not defined ↓

cause ESLint not loaded before eslint-lint.js

fix

Add <script src="https://eslint.org/js/app/eslint.js"></script> before eslint-lint.js

error CodeMirror is not defined ↓

cause CodeMirror library not loaded

fix

Include CodeMirror core script (codemirror.js) before using CodeMirror

error Uncaught TypeError: Cannot read properties of undefined (reading 'define') ↓

cause ESLint version mismatch or not loaded

fix

Use the correct URL for eslint.js (e.g., https://eslint.org/js/app/eslint.js)

Warnings

gotcha ESLint must be loaded globally via script tag before eslint-lint.js. ↓

fix Load eslint.js before eslint-lint.js.

gotcha The addon expects a global 'eslint' object; not compatible with bundlers that scope modules. ↓

fix Use a script tag from eslint.org or bundle globally.

deprecated This library is unmaintained; consider using CodeMirror 6 native linting with ESLint. ↓

fix Migrate to CodeMirror 6 and @codemirror/lang-javascript with eslint integration.

Install

npm install codemirror-lint-eslint

yarn add codemirror-lint-eslint

pnpm add codemirror-lint-eslint

Imports

eslint-lint.js
wrong
```
<script src="eslint.js"></script>
```
correct
```
<script src="eslint-lint.js"></script>
```
Include as a script tag after CodeMirror and ESLint scripts; no npm import.

CodeMirror.fromTextArea

wrong

CodeMirror(document.getElementById('code-js'))

correct

var editor = CodeMirror.fromTextArea(document.getElementById('code-js'), {...})

Initialize CodeMirror with lint: true and appropriate mode.

eslint
wrong
```
require('eslint')
```
correct
```
global eslint object provided by eslint.js
```
ESLint is loaded globally via script tag, not as a Node module.

Quickstart

Minimal HTML page demonstrating CodeMirror editor with ESLint linting.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/addon/lint/lint.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/mode/javascript/javascript.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/addon/lint/lint.min.js"></script>
  <script src="https://eslint.org/js/app/eslint.js"></script>
  <script src="eslint-lint.js"></script>
</head>
<body>
  <textarea id="code-js">var x = 1
console.log(x)</textarea>
  <script>
    var editor = CodeMirror.fromTextArea(document.getElementById('code-js'), {
      lineNumbers: true,
      mode: "javascript",
      gutters: ["CodeMirror-lint-markers"],
      lint: true
    });
  </script>
</body>
</html>