Hi there, I am trying to use react-ace in a project of mine, and I can't get autocomplete or snippets to work.
My render method is as follows:
render(): JSX.Element {
return (<>
<ContentPage>
<AceEditor
placeholder="Placeholder Text"
mode="html"
theme="monokai"
name="blah2"
width="inherit"
onChange={this.onCodeChange}
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
setOptions={{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
enableSnippets: true,
showLineNumbers: true,
tabSize: 2
}}
/>
</ContentPage>
</>);
}
and my imports are:
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-html";
import "ace-builds/src-noconflict/theme-monokai";
The page loads fine and the editor works with syntax highlighting, I just don't get the autocomplete/snippet dialog.
The only warnings I am getting are (which sounds like the issue):
ace.js:4316 misspelled option "enableBasicAutocompletion"
warn @ ace.js:4316
ace.js:4316 misspelled option "enableLiveAutocompletion"
warn @ ace.js:4316
ace.js:4316 misspelled option "enableSnippets"
Any help would be great, thank you!
load language tools extension import "ace-builds/src-noconflict/ext-language_tools";
to load get these options to work.
Fixed! Thanks so much @nightwing !
Created a PR to update the docs with this use case, as I imagine others may run into the same.
Most helpful comment
load language tools extension
import "ace-builds/src-noconflict/ext-language_tools";
to load get these options to work.