React-ace: Can't get autocomplete or snippets to work

Created on 3 Apr 2020  ·  3Comments  ·  Source: securingsincity/react-ace

Problem

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!

Most helpful comment

load language tools extension import "ace-builds/src-noconflict/ext-language_tools"; to load get these options to work.

All 3 comments

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.

https://github.com/securingsincity/react-ace/pull/816

Was this page helpful?
0 / 5 - 0 ratings