How to use JSON Linting

[StinglSa]

Hi,

could you maybe point me to a solution how to use json linting in react-codemirror2?
When i use mode javascript i get error highlighting in code but no gutters. This works with the react-codemirror 1 version. But as r_cm1 is outdated i would like to use this version.

is use the following option set
options={{
mode: 'application/json',
theme: 'material',
lineNumbers: true,
lineWrapping: true,
lineHeight: 10,
lint: true,
gutters: ["CodeMirror-lint-markers"],
}}
thanks in advance
Greetings Sascha

[scniro]

This should work fine, I just tested it locally. I am suspecting you are not getting through the setup correctly. The old repo had a similar issue seen here JedWatson/react-codemirror#89

I made sure to include all the necessary files, which, on my end consisted of...

require('codemirror/addon/lint/lint');
require('codemirror/addon/lint/json-lint');

@import 'codemirror/addon/lint/lint.css';

I was then presented with an error in the browser...

window.jsonlint not defined, CodeMirror JSON linting cannot run

Apparently we need these libs at runtime. So I added the following...

window.jsonlint = require('jsonlint');

I tested this with JSHINT as well for javascript mode and all seems to be working

[StinglSa]

I use the same imports as you mentioned. After import jsonlint the error is gone but still no linting. maybe I do something wrong with the jsonlint import. I guess I'll try again with minimal example. thx for help!

[scniro]

I had a lot of weirdness going on with requiring jsonlint with webpack, similar to what's going on here zaach/jsonlint#57. You might need to explore a little bit to get around this. Let me know what you find!

[slobaton]

@scniro I tested with JSHINT and the linter works, but with jsonlint does not work
for that I installed jsonlint using npm install --save file system jsonlint
Can you upload some sample code please?... if you change mode to javascript linter works using JSHINT

import jsonlint from 'jsonlint';
import { JSHINT } from 'jshint';

import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/lint/json-lint';
import 'codemirror/addon/lint/javascript-lint';
import 'codemirror/mode/javascript/javascript';

import 'codemirror/addon/edit/closebrackets';


window.JSHINT = JSHINT;
window.jsonlint = jsonlint;

const options = {
  mode: 'applicaton/json',
  lineNumbers: true,
  lineWrapping: true,
  autoCloseBrackets: true,
  gutters: ['CodeMirror-lint-markers'],
  lint: true,
};

[StinglSa]

the problem here is not the jsonlint in my opinion but that it wont show linting errors in codemirror.
I used it for linting before refresh the state. Here how i import it:

import jsonlint from 'jsonlint/lib/jsonlint'
window.jsonlint = require("jsonlint");

//example usage
let json_data = {"key": 1, "key2": 2};
jsonlint.parse(json_data) //this will throw an error if linting fails

[aprilandjan]

@slobaton I tried with jsonlint and it won't work because the jsonlint package from npm does not work with webpack due to its module declaration codes. I had to fallback to jshint😭

---

After digging into associated codes, I found a workout. There's two steps to solve this:

1. The lint module jsonlint seems to be used more likely in node environment, its module export code cannot work directly in browser side, so I copied the whole jsonlint file from some fork-and-fix into my project source. After that the CodeMirror throws no error.

2. But as @StinglSa said above, it won't show linting errors in editor. Check the add-on code at https://github.com/codemirror/CodeMirror/blob/master/addon/lint/json-lint.js, CodeMirror tries to override the default parseError handler to push all lint errors to editor, but unfortunately, the parseError handler is inside window.jsonlint.parser object rather than window.jsonlint object —— this makes the override failure, thus the editor collects no lint error at all. so, just copy the add-on file to local project source and fix the override problem, import it instead of codemirror/codemirror/addon/lint/json-lint, and everything will be fine.

var CodeMirror = require('codemirror');
// the 'fork-and-fixed' jsonlint file
window['jsonlint'] = require('./jsonlint');

CodeMirror.registerHelper("lint", "json", function(text) {
  var found = [];
  if (!window.jsonlint) {
    if (window.console) {
      window.console.error("Error: window.jsonlint not defined, CodeMirror JSON linting cannot run.");
    }
    return found;
  }
  var jsonlint = window.jsonlint.parser;
  jsonlint.parseError = function(str, hash) {
    var loc = hash.loc;
    found.push({from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
                to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
                message: str});
  };
  try { jsonlint.parse(text); }
  catch(e) {}
  return found;
});

[christopherblaser]

codemirror/codemirror5#5377 @aprilandjan

Also if you want to require jsonlint, there's a fork of jsonlint that works (as jsonlint is unmaintained) -> jsonlint-mod

[StinglSa]

@aprilandjan great solution!

[justnewbee]

i went into this as well, and solution from @aprilandjan works.
just one advice, you don't have to put jsonlint into window object.

codemirror shall fix this too.

[Relequestual]

For anyone looking at this today, looks like codemirror still uses the non fixed version of jsonlint.
Using the jsonlint-mod npm package, I managed to get lint errors highlighted easily.

const jsonlint = require("jsonlint-mod");
window.jsonlint = jsonlint;

const cmOption = {
  mode: 'application/json',
  gutters: ["CodeMirror-lint-markers"],
  styleActiveLine: true,
  lineNumbers: true,
  line: true,
  lint: true,
};

Nothing else required.

I dislike having to put jsonlint on window, but it works for now, and I know I'll need to create my own linter function in the future anyway, so I'll copy the above alternative solution at that point, but without using window.

Edit caveat: I haven't been able to get the duplicate keys error to display a sidebar warning, but it is running the jsonlint-mod code.

[adamxy]

const jsonlint = require("jsonlint-mod");
window.jsonlint = jsonlint;

options={{
    mode: 'javascript', 
    theme: 'material',
    gutters: ['CodeMirror-lint-markers'],
    lineNumbers: true,
    lint: true,
    line: true
}}

![image](https://user-images.githubusercontent.com/11717062/64597767-fc489780-d3e8-11e9-916f-e7c3dd125f71.png)

[hrvoj3e]

In vanilla JS this works

https://cdnjs.cloudflare.com/ajax/libs/jsonlint/1.6.0/jsonlint.min.js
https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.4/addon/lint/json-lint.min.js
https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.4/mode/javascript/javascript.min.js

var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
    lineNumbers: true,
    styleActiveLine: true,
    theme: "material",
    mode: "application/json",
    gutters: ["CodeMirror-lint-markers"],
    lint: true
});

[mrprofessor]

json-lint didn't work for me, however, with javascript-hint and javascript-lint, it worked.

import 'codemirror/addon/lint/lint.js'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/javascript-lint.js'
import 'codemirror/addon/hint/javascript-hint.js'

window.JSHINT = JSHINT;

const options = {
        mode: 'application/json',
        lint: true,
        gutters: [ "CodeMirror-lint-markers"],
      }