scniro / react-codemirror2

Codemirror integrated components for React
MIT License
1.66k stars 193 forks source link

Help: JSONLint not working #10

Closed nakkeeran closed 7 years ago

nakkeeran commented 7 years ago

Hi, Trying to make JSONLinting work for react-codemirror2. Looks like im missing something here.

Code - Imports

import CodeMirror from 'react-codemirror2'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/theme/material.css'

import 'codemirror/lib/codemirror'
import 'codemirror/mode/javascript/javascript'
import jsonlint from 'jsonlint/lib/jsonlint'
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/json-lint'

window.jsonlint = jsonlint

Component

render () {
    const codeMirrorOptions = {
      lineNumbers: true,
      mode: 'application/json',
      lint: true,
      gutters: ['CodeMirror-lint-markers'],
      theme: 'material'
    }

   const value = {
      name: 'Hello'
   }

    return (
      <CodeMirror
        value={value}
        options={codeMirrorOptions}
      />
    )
  }

No error on browser console, but lint is not working. :(

screen shot 2017-09-15 at 5 00 53 pm

Expected

screen shot 2017-09-16 at 11 10 18 am
scniro commented 7 years ago

@nakkeeran hey there. I am just getting a chance to look at this now. I see you closed it a bit after opening. Is this still an issue or did you resolve it on your own?

nakkeeran commented 7 years ago

No worries @scniro. i was missing addon css. 👍 Thank you.

slobaton commented 6 years ago

@nakkeeran which file did you missing? can you put your code please?? another thing too, I used the npm install --save file system jsonlint to have jsonlint.


import CodeMirror from 'react-codemirror2'
import jsonlint from 'jsonlint';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/lint/json-lint';
import 'codemirror/mode/javascript/javascript';

window.jsonlint = jsonlint;

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