Vue2-codemirror-lite-js NPM

Vue2 Codemirror Lite

CodeMirror component for Vue.js 2.x, configured for linting & js mode only to keep it light.

See demo

Motivation

For applications that only use CodeMirror for JavaScript, the bundle size can seriously be decreased by eliminating some of the features, themes and modes.

This is not a fully-featured CodeMirror plugin (that's why it's lite). If you are looking for that, please check out vue-codemirror.

Most things are pre-configured (i.e. mode, theme), but additional CodeMirror options can be set (see Codemirror config APIs).

What's inside

JavaScript only mode (not configurable)
lint via JSHINT (bundled, not configurable)
dark theme only (slightly modified neo, see demo.)
line numbers, line wrapping
accepts additional CodeMirror options (see some here), except for mode, theme & those that require addons.

Getting started

Installing

npm install vue2-codemirror-lite-js --save # yarn add vue2-codemirror-lite-js

Usage

// Require in Webpack.
var Vue = require('vue')
var CodeMirrorLiteJs = require('vue2-codemirror-lite-js')

Vue.use(CodeMirrorLiteJs)


// Or use as component (ES6)
import Vue from 'vue'
import { codemirror } from 'vue2-codemirror-lite-js'

export default {
  components: {
    codemirror
  }
}

Usage in template

<!-- simple -->
<codemirror :code="code"></codemirror>

<!-- simple (with bindings) -->
<codemirror v-model="code"></codemirror>

<!-- advanced -->
<codemirror
    :code="code"
    :options="{
       tabSize: 2,
       lineNumbers: true,
       lineWrapping: true,
       line: true,
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-lint-markers'],
       lint: true
    }"
    :lintOptions="{
        sub: true,
        notypeof: true
    }"
    @changed="yourCodeChangeMethod">
</codemirror>

Lint options are equivalent to JSHINT options (or what you'd normally put in .jshintrc). See all the options here

There's also a code example available in the source.

Developing

There's a simple webpack config setup to get you started.

Build / watch

npm run build

Run the example

npm run serve

Feel free to contribute to the build config and make it better :)

Contributing

Contributions are welcome for additional options, themes and modes that don't increase the bundle size. Ideally, if you want to contribute split your code.