Getting the linter working in React?


#1

Hi,

I have been following your demo source code for the linter to get it working myself in React but I have been getting no luck. I feel like I copied everything that was needed but the gutter icons still are not showing up. Does something look weird here?

import React, { Component } from 'react';
import './mdn-like.css';
import './TextEditor.css';

const CodeMirror = require('codemirror/lib/codemirror');
require('codemirror/addon/edit/matchbrackets');
require('codemirror/addon/edit/closebrackets');
require('codemirror/addon/lint/lint');
require('codemirror/addon/lint/javascript-lint');
require('codemirror/mode/javascript/javascript');

require('codemirror/lib/codemirror.css');
require('codemirror/addon/lint/lint.css');

export default class TextEditor extends Component {

  componentDidMount() {
    this.editor = CodeMirror.fromTextArea(this.textarea, {
      /* Configuration */
      mode: 'javascript',
      /* theme: 'mdn-like', */
      smartIndent: true,  // javascript mode does bad things with jsx indents
      tabSize: 2,
      lineWrapping: true,
      lineNumbers: true,
      readOnly: false,

      /* Addons */
      matchBrackets: true,
      autoCloseBrackets: true,
      gutters: ['CodeMirror-lint-markers'],
      lint: true,
    });
  }

  render() {
    const editor = <textarea ref={(c) => { this.textarea = c; }} defaultValue="" />;

    return (
      <div className="text-editor">
        <div className="options">
          Pretty / Compact / Validate / Copy / Etc
        </div>
        {editor}
      </div>
    );
  }
}

Please ignore the mismatch of imports and requires, I was fiddling around to see what works and what doesn’t, but my linter nor console is complaining right now.

Any thoughts what could be missing?

Thanks in advance,
Anthony


#2

Bump, it would be awesome if anyone has some advice here, not sure exactly what I’m missing.

Thanks in advance!