Getting the linter working in React?


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');


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

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,

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

Thanks in advance!

require this in your index.html