Render the checker message as an individual elment in the code

web/server/vue-cli/src/components/Report/Report.vue

@@ -644,6 +644,9 @@ export default {
       this.clearLines();
 
       const reportId = this.report.reportId;
+      console.log("REPORT");
+      console.log("report msg" + this.report.checkerMsg);
+      console.log("line" + this.report.line);
 
       const reportDetail = await new Promise(resolve => {
         ccService.getClient().getReportDetails(reportId,
@@ -663,7 +666,7 @@ export default {
             const docUrlLabels = labels[0].filter(
               param => param.startsWith("doc_url")
             );
-            this.docUrl = docUrlLabels.length ? 
+            this.docUrl = docUrlLabels.length ?
               docUrlLabels[0].split("doc_url:")[1] : null;
             resolve(this.docUrl);
           })
@@ -783,6 +786,14 @@ export default {
 
     addExtendedData(extendedData) {
       this.editor.operation(() => {
+
+        //drawing the report error message
+        const chkrmsg_data = { $id: 999,
+          $message:this.report.checkerMsg,
+          startLine:this.report.line, startCol:this.report.column };
+        const chrkmsg_props = { type: "error", index:"Error" };
+        this.addLineWidget(chkrmsg_data, chrkmsg_props);
+
         extendedData.forEach(data => {
           let type = null;
           let value = null;