feat(new tool): JSON Linter

Fix part of CorentinTh#605

Author: sharevb

src/tools/index.ts

@@ -6,6 +6,7 @@ import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
 import { tool as textToUnicode } from './text-to-unicode';
 import { tool as safelinkDecoder } from './safelink-decoder';
+import { tool as jsonLinter } from './json-linter';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -142,6 +143,7 @@ export const toolsByCategory: ToolCategory[] = [
       crontabGenerator,
       jsonViewer,
       jsonMinify,
+      jsonLinter,
       jsonToCsv,
       sqlPrettify,
       chmodCalculator,

src/tools/json-linter/index.ts

@@ -0,0 +1,12 @@
+import { ArrowsShuffle } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Json linter',
+  path: '/json-linter',
+  description: '',
+  keywords: ['json', 'linter'],
+  component: () => import('./json-linter.vue'),
+  icon: ArrowsShuffle,
+  createdAt: new Date('2024-03-27'),
+});

src/tools/json-linter/json-linter.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import linter from 'jsonlint-mod';
+
+const jsonContent = ref(
+  `{ 
+    a: True; 
+    b=5 
+  }`,
+);
+
+const conversionResult = computed(() => {
+  try {
+    linter.parse(jsonContent.value);
+    return JSON.stringify(JSON.parse(jsonContent.value), null, 2);
+  }
+  catch (e: any) {
+    return e.toString().split('\n').map((err: string) => ({ line: -1, message: err, helpLink: '' }));
+  }
+});
+
+const errors = computed(() => conversionResult.value);
+
+const MONACO_EDITOR_OPTIONS = {
+  automaticLayout: true,
+  formatOnType: true,
+  formatOnPaste: true,
+};
+</script>
+
+<template>
+  <div>
+    <c-label label="Paste your JSON file content:">
+      <div relative w-full>
+        <c-monaco-editor
+          v-model:value="jsonContent"
+          theme="vs-dark"
+          language="yaml"
+          height="250px"
+          :options="MONACO_EDITOR_OPTIONS"
+        />
+      </div>
+    </c-label>
+
+    <div v-if="errors.length > 0">
+      <n-alert title="The following errors occured" type="error" mt-5>
+        <ul>
+          <li v-for="(message, index) of errors" :key="index">
+            {{ message.message }} (<n-a v-if="message.helpLink" target="_blank" rel="noreferer noopener">
+              See JSON help
+            </n-a>)
+          </li>
+        </ul>
+      </n-alert>
+    </div>
+    <div v-else>
+      <n-alert type="success" mt-5>
+        Validation successful!
+      </n-alert>
+    </div>
+  </div>
+</template>