added some linting stuff for vim autocorrect

.eslintrc.js

@@ -0,0 +1,44 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'airbnb',
+    'plugin:bpmn-io/es6',
+    'plugin:prettier/recommended',
+    'plugin:sonarjs/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  rules: {
+    'jsx-a11y/no-autofocus': 'off',
+    'jsx-a11y/label-has-associated-control': 'off',
+    'no-console': 'off',
+    'no-unused-vars': [
+      'error',
+      {
+        destructuredArrayIgnorePattern: '^_',
+        varsIgnorePattern: '_',
+        argsIgnorePattern: '^_',
+      },
+    ],
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+  },
+};

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  singleQuote: true,
+};

app/spiffworkflow/extensions/propertiesPanel/SpiffScriptGroup.js

@@ -1,10 +1,14 @@
-import { HeaderButton, TextAreaEntry, TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
+import {
+  HeaderButton,
+  TextAreaEntry,
+  isTextFieldEntryEdited,
+} from '@bpmn-io/properties-panel';
 import { useService } from 'bpmn-js-properties-panel';
 
 export const SCRIPT_TYPE = {
   bpmn: 'bpmn:script',
   pre: 'spiffworkflow:preScript',
-  post: 'spiffworkflow:postScript'
+  post: 'spiffworkflow:postScript',
 };
 
 /**
@@ -14,26 +18,25 @@ export const SCRIPT_TYPE = {
  * @param moddle For updating the underlying xml document when needed.
  * @returns {[{component: (function(*)), isEdited: *, id: string, element},{component: (function(*)), isEdited: *, id: string, element}]}
  */
-export default function(element, moddle, scriptType, label, description) {
-
+export default function (element, moddle, scriptType, label, description) {
   return [
     {
-      id: 'pythonScript_' + scriptType,
+      id: `pythonScript_${scriptType}`,
       element,
       targetTag: scriptType,
       component: PythonScript,
       isEdited: isTextFieldEntryEdited,
-      moddle: moddle,
-      label: label,
-      description: description
+      moddle,
+      label,
+      description,
     },
     {
-      id: 'launchEditorButton' + scriptType,
+      id: `launchEditorButton${scriptType}`,
       target_tag: scriptType,
       element,
       component: LaunchEditorButton,
       isEdited: isTextFieldEntryEdited,
-      moddle: moddle
+      moddle,
     },
   ];
 }
@@ -41,9 +44,9 @@ export default function(element, moddle, scriptType, label, description) {
 function PythonScript(props) {
   const { element, id } = props;
   const type = props.targetTag;
-  const moddle = props.moddle;
-  const label = props.label;
-  const description = props.description;
+  const { moddle } = props;
+  const { label } = props;
+  const { description } = props;
 
   const translate = useService('translate');
   const debounce = useService('debounceInput');
@@ -72,31 +75,31 @@ function PythonScript(props) {
     }
     if (!bizObj.extensionElements) {
       return null;
-    } else {
-      return bizObj.extensionElements.get("values").filter(function(e) {
-        return e.$instanceOf(type);
-      })[0];
     }
+    return bizObj.extensionElements.get('values').filter(function (e) {
+      return e.$instanceOf(type);
+    })[0];
   };
 
   const getValue = () => {
-    const scriptObj = getScriptObject()
+    const scriptObj = getScriptObject();
     if (scriptObj) {
       return scriptObj.script;
-    } else {
-      return ""
     }
+    return '';
   };
 
-  const setValue = value => {
-    const businessObject = element.businessObject;
-    let scriptObj = getScriptObject()
+  const setValue = (value) => {
+    const { businessObject } = element;
+    let scriptObj = getScriptObject();
     // Create the script object if needed.
     if (!scriptObj) {
       scriptObj = moddle.create(type);
       if (type !== SCRIPT_TYPE.bpmn) {
         if (!businessObject.extensionElements) {
-          businessObject.extensionElements = moddle.create('bpmn:ExtensionElements');
+          businessObject.extensionElements = moddle.create(
+            'bpmn:ExtensionElements'
+          );
         }
         businessObject.extensionElements.get('values').push(scriptObj);
       }
@@ -104,15 +107,17 @@ function PythonScript(props) {
     scriptObj.script = value;
   };
 
-  return <TextAreaEntry
-    id={ id }
-    element={ element }
-    description={ translate(description) }
-    label={ translate(label) }
-    getValue={ getValue }
-    setValue={ setValue }
-    debounce={ debounce }
-  />;
+  return (
+    <TextAreaEntry
+      id={id}
+      element={element}
+      description={translate(description)}
+      label={translate(label)}
+      getValue={getValue}
+      setValue={setValue}
+      debounce={debounce}
+    />
+  );
 }
 
 function LaunchEditorButton(props) {
@@ -120,10 +125,14 @@ function LaunchEditorButton(props) {
   const eventBus = useService('eventBus');
   const modeling = useService('modeling');
   // fixme: add a call up date as a property
-  return <HeaderButton
-    className="spiffworkflow-properties-panel-button"
-    onClick={() => {
-      eventBus.fire('launch.script.editor', { element: element , type});
-    }}
-  >Launch Editor</HeaderButton>;
+  return (
+    <HeaderButton
+      className="spiffworkflow-properties-panel-button"
+      onClick={() => {
+        eventBus.fire('launch.script.editor', { element, type });
+      }}
+    >
+      Launch Editor
+    </HeaderButton>
+  );
 }

package.json

@@ -44,7 +44,14 @@
     "chai": "^4.3.6",
     "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8.18.0",
+    "eslint_d": "^12.2.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-bpmn-io": "^0.14.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-sonarjs": "^0.13.0",
     "file-saver": "^2.0.5",
     "karma": "^6.3.4",
     "karma-chrome-launcher": "^3.1.1",
@@ -56,6 +63,7 @@
     "mocha": "^10.0.0",
     "mocha-test-container-support": "^0.2.0",
     "npm-run-all": "^4.1.5",
+    "prettier": "^2.7.1",
     "raw-loader": "^4.0.2",
     "sinon": "^14.0.0",
     "sinon-chai": "^3.7.0",
@@ -65,10 +73,10 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
+    "@bpmn-io/properties-panel": "^0.18.0",
     "bpmn-js": "^9.2.2",
     "bpmn-js-properties-panel": "^1.1.1",
     "diagram-js": "^8.5.0",
-    "eslint_d": "^12.2.0",
     "inherits": "^2.0.4",
     "inherits-browser": "^0.0.1",
     "min-dash": "^3.8.1",