monaco_editor: WIP lint & code formatting for javascript JSHINT

bt5/erp5_monaco_editor/SkinTemplateItem/portal_skins/erp5_monaco_editor/monaco-editor.gadget.html.html

@@ -7,7 +7,12 @@
 
     <script src="rsvp.js"></script>
     <script src="renderjs.js"></script>
-
+    <!-- <script src="jshint.js"></script> <!-- XXX this is from codemirror -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jshint/2.9.6/jshint.min.js"></script>
+    
+    <!-- XXX TODO -->
+    <script src="https://unpkg.com/prettier@1.13.0/standalone.js"></script>
+    <script src="https://unpkg.com/prettier@1.13.0/parser-babylon.js"></script>
 
     <script>
       /*

bt5/erp5_monaco_editor/SkinTemplateItem/portal_skins/erp5_monaco_editor/monaco-editor.gadget.js.js

 /*jslint nomen: true, indent: 2 */
-/*global window, rJS, monaco*/
+/*global window, rJS, monaco, jshint, prettier, prettierPlugins */
 (function (window, rJS, monaco) {
   "use strict";
 
@@ -21,6 +21,23 @@
           return context.deferNotifyChange();
         }
       }
+      // prettier to format javascript
+      monaco.languages.registerDocumentFormattingEditProvider('javascript', {
+        provideDocumentFormattingEdits(model, options, token) {
+          const text = prettier.format(model.getValue(), {
+            parser: 'babylon',
+            plugins: prettierPlugins
+          });
+
+          return [
+            {
+              range: model.getFullModelRange(),
+              text,
+            },
+          ];
+        },
+      });
+
       this.editor = editor = monaco.editor.create(
         this.element.querySelector('.monaco-container'),
         {
@@ -38,10 +55,34 @@
         keybindingContext: null,
         contextMenuGroupId: "navigation",
         contextMenuOrder: 1.5,
-        run: context.deferNotifySubmit.bind(context)
+        run: function () {
+          console.log("format on save - XXX")
+          editor.getAction('editor.action.formatDocument').run();
+          return context.deferNotifySubmit.bind(context);
+        }
       })
 
-      editor.model.onDidChangeContent(deferNotifyChange)
+      editor.model.onDidChangeContent(function () {
+        /* lint based on language */
+        // XXX language
+        if ("javascript") {
+          var markers = [];
+          var model = editor.getModel();
+          JSHINT(model.getValue(), { indent: 2 }, {} /*XXX options.global */);
+          markers = JSHINT.data().errors.filter(Boolean).map(err => ({
+            startLineNumber: err.line,
+            endLineNumber: err.line,
+            startColumn: err.character - 1,
+            endColumn: err.character - 1,
+            message: err.reason,
+            severity: err.code ? (err.code.startsWith('W') ? monaco.Severity.Warning : monaco.Severity.Error) : monaco.Severity.Warning,
+            source: 'jhint',
+          }));
+          monaco.editor.setModelMarkers(model, 'jshint', markers);
+        }
+        // renderjs 
+        deferNotifyChange();
+      });
     })
 
     .declareMethod('render', function (options) {
@@ -89,6 +130,11 @@
           queue
             .push(addExtraLibrary("./monaco-renderjs.ts"))
             .push(addExtraLibrary("./monaco-rsvp.ts"));
+          monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+            noSemanticValidation: true,
+            noSyntaxValidation: true,
+          });
+
         }
         return queue;