Codemirror with Vue 2: Addons

In the world of web development, integrating powerful tools into your projects can greatly enhance the user experience and streamline your workflow. If you're currently utilizing a fundamental CodeMirror setup within the Vue 2 framework (if you haven't, you can find a guide on setting up CodeMirror with Vue 2 here), you might have encountered a common predicament. Unlike the conventional code editors you're accustomed to, the integrated code editor might not be exhibiting the anticipated behavior. This discrepancy can lead to frustration, but fear not, as this post will delve into the intricacies of this issue and provide insights on how to overcome it.

Following are some of the functionalities that you should really add to your code editor:

Auto Close Brackets:

Brackets should be automatically closed while typing. This can be done as following:

• First import closebrackets addon, like this: import 'codemirror/addon/edit/closebrackets.js'
• Then add autoCloseBrackets inside configuration options like this:

 Codemirror.fromTextArea(document.getElementById('codeEditor'), {
            lineNumbers: true,
            line: true,
            theme: 'dracula',
            tabSize: 4,
            mode: `text/javascript`,
            autoCloseBrackets: true,
        })

• That's it now autoCloseBrackets functionality is enabled in your code editor

Match Tags and Auto Close Tags:

If you are enabling a language which includes tags like HTML then these are useful.

• First import them from addons folder:
  import 'codemirror/addon/edit/matchtags.js'
import 'codemirror/addon/edit/closetag.js'

• Then add them to configuration options:
  

Codemirror.fromTextArea(document.getElementById('codeEditor'), {
            lineNumbers: true,
            line: true,
            theme: 'dracula',
            tabSize: 4,
            mode: `text/javascript`,
            autoCloseBrackets: true,
            matchTags: true,
            autoCloseTags: true,
        })

Similarly you can add many more addons. Now that you know how you can include addons to your code editor, you should go through this part of the documentation: Link, here all the other addons are given with there details.