react-ace
react-ace copied to clipboard
Can not configure JSHint options in worker scripts
Problem
I'm trying configure JSHint options for worker script. we have import 'ace-builds/webpack-resolver';
which takes woker scripts from ace-build. But we want to configure some rules for JSHint when it loads worker scripts.
E.g. for javascript mode, we want to change rule esnext: true
to esversion: 11
.
Sample code to reproduce your issue
import React from 'react';
import Editor from 'react-ace';
import 'ace-builds/webpack-resolver';
import 'ace-builds/src-noconflict/theme-solarized_dark';
import 'ace-builds/src-noconflict/ext-language_tools';
export default class CodeEditor extends React.Component {
constructor(props) {
super(props);
this.state = { code: '' };
}
componentWillReceiveProps(props){
if (this.state.code !== props.code) {
this.setState({ code: props.code });
}
if (props.mode) {
require(`ace-builds/src-noconflict/mode-${props.mode}`);
require(`ace-builds/src-noconflict/snippets/${props.mode}`);
}
}
get value() {
return this.state.code || this.props.placeHolder;
}
set value(code) {
this.setState({ code });
}
render() {
const { fontSize = 18, mode = 'javascript', height } = this.props;
const { code } = this.state;
return (
<Editor
mode={mode}
theme="solarized_dark"
onChange={value => {
this.setState({ code: value });
if ( this.props.onCodeChange ){
this.props.onCodeChange(value);
}
}}
height={height || '100%'}
fontSize={fontSize}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
width="100%"
value={code}
enableBasicAutocompletion={true}
enableLiveAutocompletion={true}
enableSnippets={false}
showLineNumbers={true}
tabSize={2}
/>
);
}
}
CodeEditor.propTypes = {
fontSize: PropTypes.number.describe('Font size of the editor'),
placeHolder: PropTypes.string.describe('Code place holder'),
height: PropTypes.string.describe('Code Editor height')
};
Here, it will load worker-javascript file that has esnext: true
, can we somehow specify the JSHint rules & where from component to use esversion: 11
.
References
Progress on: #
modify worker-javascript.js
...
(function() {
this.setOptions = function(options) {
this.options = options || {
//esnext: true,
esversion: 11,
...