Vue JSON Lint

A simple linter, validator & formatter using Vue.js 2

Vue JSON Lint

As a developer, one of my favorite go-to tools is jsonlint.com. I like it so much that I decided to make my own JSON Linter using Vue.js.

The Vue App

const app = new Vue ({
  el: '#app',
  data: {
    jsonstr: "",
    jsonerror: ""
  },
  computed: {
    prettyFormat: function() {
        // reset error
        this.jsonerror = "";
        let jsonValue = "";
        try {
            // try to parse
            jsonValue = JSON.parse(this.jsonstr);
        }
        catch(e) {
            this.jsonerror = JSON.stringify(e.message)
            var textarea = document.getElementById("jsonText");
            if (this.jsonerror.indexOf('position')>-1) {
                // highlight error position
                var positionStr = this.jsonerror.lastIndexOf('position') + 8;
                var posi = parseInt(this.jsonerror.substr(positionStr,this.jsonerror.lastIndexOf('"')))
                if (posi >= 0) {
                    textarea.setSelectionRange(posi,posi+1);
                }
            }
            return "";
        }
        return JSON.stringify(jsonValue, null, 2);
    }
  }
})

The HTML / Vue Markup

Used Bootstrap 4 for the CSS…

<div id="vueapp">
   <div class="text-danger" v-if="jsonstr && jsonerror">{{ jsonerror }}</div>
   <div class="text-success" v-if="!jsonerror">Valid JSON ✔</div>
   <textarea v-model="jsonstr" rows="10" class="form-control" id="jsonText" placeholder="paste or type JSON here..."></textarea>
   <pre>{{ prettyFormat }}</pre>
</div>

Json Linter Validator Formatter in Vue