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