Vue JSON Lint

Carol Skelly
WDstack
Published in
1 min readOct 12, 2019

--

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>

--

--

Carol Skelly
WDstack

S/W Engineer. Web developer. @Bootply @Codeply