lint addon is not working

[edwin0258]

I've been trying to add javascript-lint gutter markers to my code editor and I haven't been getting anywhere. I am importing the lint.js and javascript-lint.js files from codemirror like I assume I am supposed to do. I have also added the lint and gutter options to my options object like I've also seen. I am getting everything to work properly except the lint gutter markers. Below is the code I am using to make the code editor and the result after I have bundled the code and am running it on my website. Am I doing something wrong? Help is much appreciated, thanks!

Javascipt File

import React from 'react';
import CodeMirror from 'react-codemirror';
const isBrowser = typeof window !== 'undefined';
isBrowser ? function(){
  require('codemirror/mode/javascript/javascript');
  require('codemirror/addon/lint/lint');
  require('codemirror/addon/lint/javascript-lint');
}() : undefined;

import _ from 'underscore';

class CodeEditor extends React.Component{
  constructor(props){
    super(props);
    
    this.state = {
      code: this.props.children,
      output: "",
      theme: 'tomorrow-night-bright',
      error: ""
    };
  }
  updateCode(e) {
    this.setState({
      code: e
    });
  }
  toggleTheme() {
    let newTheme = this.state.theme == 'tomorrow-night-bright' ? 'default' : 'tomorrow-night-bright';
    this.setState({
      theme: newTheme
    });
  }
  evalCode() {
    let newOutput = "";
    let code = this.state.code.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$|(<script>)|eval|XMLHttpRequest|document\.write/gm,"");
    try{
      newOutput = (() => {return eval(code)})();
    } catch(e) {
      newOutput = "";
    }
    let error = "";
    if(this.props.test) {
      let include = this.props.test.include;
      let notInclude = this.props.test.notInclude || [];
      let expectedOutput = this.props.test.output;
      include = include.map(item => code.indexOf(item).toString());
      notInclude = notInclude.map(item => code.indexOf(item).toString());
      
      if(include.indexOf("-1") != -1) {
        console.log("You did not use the necessary items in this exercise.");
        error = <div className="editorError">You did not use the necessary items in this exercise.</div>;
      } else if(notInclude.indexOf("-1") == -1) {
        console.log("You still have some of following keywords in your program: " + notInclude);
        error = <div className="editorError">You still have some of following keywords in your program: {notInclude}</div>;
      } else if(_.isEqual(newOutput,expectedOutput) === false) {
        console.log("Oops, it looks like your output does not match expected output.");
        error = <div className="editorError">Oops, it looks like your output does not match expected output.</div>;
      } else {
        error = <div className="editorSuccess">Good Job!</div>;
      }
    }
    this.setState({
      output: newOutput,
      error: error
    });
  }
  render() {
    let outputClass = 'editorOutput';
    let buttonsClass = 'editorButtons';
    if(this.state.theme == 'default'){
      outputClass = 'editorOutput lightEditorOutput';
      buttonsClass = 'editorButtons lightEditorButtons';
    }
    
    let options = {
      lineNumbers: true,
      mode: 'javascript',
      theme: this.state.theme,
      scrollbarStyle: 'null',
      lineWrapping: true,
      lint: true,
      gutters: [
        'CodeMirror-lint-markers',
      ]
      
    };
    return (
      <div className="editorContainer">
      <div className={buttonsClass}>
        <button onClick={this.evalCode.bind(this)}>Run</button>
        <button onClick={this.toggleTheme.bind(this)}>Toggle Light/Dark</button>
        {this.state.error}
      </div>
      <CodeMirror ref="editor" className="editor" value={this.state.code} onChange={this.updateCode.bind(this)} options={options}/>
      <div className={outputClass}>
        <small style={{color: "red",fontSize: "10px"}}>Output</small><br/>{JSON.stringify(this.state.output)}
      </div>
      </div>
    );
  }
}

export default CodeEditor;

Result

[cacois]

Running into the same issue here. So far can't figure out what the problem is.

[attaboy]

Hey gents, I'd appreciate it if you tried my forked branch (see #93) to see if it fixes the problem with lint.

[edwin0258]

So, I couldn't get your branch to work and realized in the process that I needed to add

<script src="//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>

to my HTML . Now everything is working for JavaScript atleast 👍 (Just used current version of react-codemirror)
I have not tested other languages yet.

[cacois]

Got this branch to work just fine. (hint: make sure you have the JSHINT function imported globally)

I recommend a merge of this PR.

[JedWatson]

This should be fixed now, I've merged the changes in #93

[depaolif]

I can't seem to get this to work still. Here's my code

import React, { Component } from 'react'
import CodeMirror from 'react-codemirror'
import '../css/editor.css'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/javascript-lint'
import 'jshint/dist/jshint'

var defaults = {
  javascript: 'var component = {\n\tname: "react-codemirror",\n\tauthor: "Jed Watson",\n\trepo: "https://github.com/JedWatson/react-codemirror"\n};',
  sog: "var calc_output = [];\nvar v = parseFloat(stool_osm) - (2 * (parseFloat(stool_potassium) + parseFloat(stool_sodium)));\nvar msg = '';\nvar mini_msg = '';\n\nif (v > 100) {\n\tmini_msg = 'Osmotic Diarrhea';\n\tmsg = 'While definitions vary, some sources suggest a Stool Osmolar Gap > 100 as being a predominantly osmotic diarrhea.' }\n\nif (v <= 100) {\n\tmini_msg = 'Secretory Diarrhea';\n\tmsg = 'While definitions vary, some sources suggest a Stool Osmolar Gap \u2264 100 as being a predominantly secretory diarrhea.' }\n\ncalc_output.push({ name: 'mini', value: v.toFixed(0), value_text: 'mOsm/kg', message: mini_msg });\ncalc_output.push({ name: 'Stool Osmolar Gap', value: v.toFixed(0), value_text: 'mOsm/kg', message: msg });\n\nreturn calc_output"
}


class Editor extends Component {
  constructor(props) {
    super(props)
    this.state = {
      code: defaults.sog,
      readonly: false,
      mode: 'javascript',
      calc_title: 'Stool Osmolar/Osmotic Gap',
    }
  }

  updateCode(evt) {
    this.setState({
      code: evt
    })
  }

  componentDidMount() {
    // setting size of CodeMirror to fit container
    var cm = this.refs.editor.getCodeMirror()
    cm.setSize("100%", "100%")
  }

  render() {
    const { readOnly, mode, code, calc_title } = this.state
    const options = {
      lineNumbers: true,
      readOnly: readOnly,
      mode: mode,
      lint: true,
      gutters: [
       'CodeMirror-lint-markers',
     ]
    }
    return (
      <div className="editor">
          <h3 className="editor-header">Instructions</h3>
          <p className="editor-text">Below is the logic for the <em>{calc_title}</em> calculator. The formula to determine the result of the calculator is written for variable <em>v</em>. You may edit that line and the logic to display the results (located within the <em>if</em> blocks) as you see fit. Make sure to return <em>calc_output</em> on the last line.</p>
          <h3 className="editor-header">Calculator Editor</h3>
          <div className="cm-wrapper">
            <CodeMirror ref="editor"
            value={code}
            onChange={this.updateCode}
            options={options}
            />
          </div>
      </div>
    )
  }
}

export default Editor

What is this missing?

[Aaronius]

@depaolif Instead of:

import 'jshint/dist/jshint'

try this:

window.JSHINT = require('jshint').JSHINT;

[danday74]

O WOW I fixed it!

My problem was I didn't load this ...

codemirror/addon/lint/lint.css

Boom! God is good 👍

For further clarification here are my imports:

import CodeMirror from 'react-codemirror'
import { JSHINT } from 'jshint'

import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/javascript-lint'
import 'codemirror/mode/javascript/javascript'

window.JSHINT = JSHINT

And don't forget these options:

    var options = {
      mode: 'javascript',
      gutters: ['CodeMirror-lint-markers'],
      lint: true
    }

[chiaweilee]

O WOW I fixed it!

My problem was I didn't load this ...

codemirror/addon/lint/lint.css

Boom! God is good 👍

For further clarification here are my imports:

import CodeMirror from 'react-codemirror'
import { JSHINT } from 'jshint'

import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/javascript-lint'
import 'codemirror/mode/javascript/javascript'

window.JSHINT = JSHINT

And don't forget these options:

    var options = {
      mode: 'javascript',
      gutters: ['CodeMirror-lint-markers'],
      lint: true
    }

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

👍