Improve developer experience with consistent formatting (#41)

- Add format command for consistency with lint - Add spell checker recommendation - Specify consistent tab width of 3 spaces - Fix typos and markdown formatting issues - Apply consistent format on all files and organize imports - Improve search by excluding more generated files
CrossBreezeNL · Nov 27, 2023 · 3481ce5 · 3481ce5
1 parent 9afb1c3
commit 3481ce5
Show file tree

Hide file tree

Showing 129 changed files with 4,261 additions and 3,853 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -19,7 +19,8 @@
         "davidanson.vscode-markdownlint",
         "ms-playwright.playwright",
         "dbaeumer.vscode-eslint",
-        "orta.vscode-jest"
+        "orta.vscode-jest",
+        "streetsidesoftware.code-spell-checker"
       ]
     }
   },

diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,5 @@
+node_modules
+dist
+out
+lib
+examples
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -6,7 +6,7 @@ module.exports = {
     trailingComma: 'none',
     endOfLine: 'lf',
     printWidth: 140,
-    tabWidth: 4,
+    tabWidth: 3,
     overrides: [
         {
             files: ['*.json', '*.yml'],

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -7,6 +7,7 @@
         "langium.langium-vscode",
         "dbaeumer.vscode-eslint",
         "esbenp.prettier-vscode",
-        "DavidAnson.vscode-markdownlint"
+        "DavidAnson.vscode-markdownlint",
+        "streetsidesoftware.code-spell-checker"
     ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,13 +6,17 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.organizeImports": true,
+    "source.fixAll.eslint": true,
+    "source.fixAll.markdownlint": true
   },
   "eslint.validate": ["javascript", "typescript"],
-  "prettier.prettierPath": "node_modules/prettier",
   "search.exclude": {
     "**/node_modules": true,
-    "**/lib": true
+    "**/out": true,
+    "**/lib": true,
+    "**/dist": true,
+    "**/plugins": true
   },
   "task.autoDetect": "off",
   "typescript.tsdk": "node_modules/typescript/lib",
@@ -40,6 +44,43 @@
   "[yaml]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "markdownlint.config": {
+    "MD007": {
+      "indent": 4
+    },
+    "MD030": {
+      "ul_single": 3,
+      "ul_multi": 3
+    },
+    "no-inline-html": {
+      "allowed_elements": ["br", "details", "summary"]
+    }
+  },
   "jest.jestCommandLine": "yarn test",
-  "jest.debugMode": true
+  "jest.debugMode": true,
+  "cSpell.enabled": true,
+  "cSpell.words": [
+    "Langium",
+    "Chevrotain",
+    "CrossModel",
+    "Modelserver",
+    "CrossBreeze",
+    "Navigatable",
+    "Validateable",
+    "codicon",
+    "tabbar",
+    "uinteger"
+  ],
+  "cSpell.useGitignore": true,
+  "cSpell.enabledLanguageIds": [
+    "css",
+    "javascript",
+    "javascriptreact",
+    "markdown",
+    "plaintext",
+    "text",
+    "typescript",
+    "typescriptreact"
+  ],
+  "cSpell.ignoreRegExpList": ["/^\\s*import.*from.*/gm"]
 }
diff --git a/README.md b/README.md
@@ -63,7 +63,7 @@ Run the example as [described above](#running-the-application).
 
 Any code changes will be automatically detected and the application will be re-compiled.
 If you only made changes to the frontend or plugins, simply reloading the running application with `F5` is enough.
-If you also made changes to the backend, you can close and restart the appliaction without manual re-compilation.
+If you also made changes to the backend, you can close and restart the application without manual re-compilation.
 
 ### Developing in Dev Container
 
@@ -83,35 +83,33 @@ Details about the packaging can be configured in `applications/electron-app/elec
 A general overview of the application architecture is provided in the [Architecture Overview](docs/Architecture.md).
 The repository itself contains the following components structured as follows:
 
-```bash
-├── applications
-│   ├── browser-app              # Browser application
-│   └── electron-app             # Electron application
-├── configs
-├── docs                         # Documentation
-├── examples
-│   ├── libraries                # Example libraries referenced in the local npm registry
-│   ├── registry                 # Local npm registry using Verdaccio
-│   └── workspace                # Workspace that can be opened in the tool
-├── extensions                   # VS Code extensions
-│   └── crossmodel-lang          # CrossModel language support (through three servers)
-│       └── src
-│           ├── glsp-server      # Graphical modelling server based on GLSP
-│           ├── language-server  # Textual modelling server based on Langium
-│           ├── model-server     # Custom model server to provide access to the semantic models
-│           ├── extension.ts     # Extension starting the server process and the language client
-│           └── main.ts          # Server process starting up all servers
-└── packages                     # Theia extensions
-        ├── core                 # Core customizations
-        ├── form-client          # Form editor widget connecting to the model server
-        ├── glsp-client          # Diagram configuration and widget using the GLSP server
-        └── product              # Application-level modifications
-```
+    ├── applications
+    │   ├── browser-app              # Browser application
+    │   └── electron-app             # Electron application
+    ├── configs
+    ├── docs                         # Documentation
+    ├── examples
+    │   ├── libraries                # Example libraries referenced in the local npm registry
+    │   ├── registry                 # Local npm registry using Verdaccio
+    │   └── workspace                # Workspace that can be opened in the tool
+    ├── extensions                   # VS Code extensions
+    │   └── crossmodel-lang          # CrossModel language support (through three servers)
+    │       └── src
+    │           ├── glsp-server      # Graphical modelling server based on GLSP
+    │           ├── language-server  # Textual modelling server based on Langium
+    │           ├── model-server     # Custom model server to provide access to the semantic models
+    │           ├── extension.ts     # Extension starting the server process and the language client
+    │           └── main.ts          # Server process starting up all servers
+    └── packages                     # Theia extensions
+            ├── core                 # Core customizations
+            ├── form-client          # Form editor widget connecting to the model server
+            ├── glsp-client          # Diagram configuration and widget using the GLSP server
+            └── product              # Application-level modifications
 
 ## Used libraries and license
 
 -   mui-x : MUI X is open core—base components are MIT-licensed, while more advanced features require a Pro or Premium commercial license. We are currently only using core-base
 -   react-tabs: MIT
--   chevotain: This library is a dependency of langium. To get the Yaml language working in crossmodel an example implementation of the python language of chevrotrain has been used. This example has been modified to make it work for the yaml language.
-    -   https://github.com/Chevrotain/chevrotain
-    -   example that has been used: https://github.com/Chevrotain/chevrotain/tree/master/examples/lexer/python_indentation
+-   chevrotain: This library is a dependency of langium. To get the Yaml language working in crossmodel an example implementation of the python language of chevrotain has been used. This example has been modified to make it work for the yaml language.
+    -   <https://github.com/Chevrotain/chevrotain>
+    -   example that has been used: <https://github.com/Chevrotain/chevrotain/tree/master/examples/lexer/python_indentation>
diff --git a/applications/browser-app/jest.config.js b/applications/browser-app/jest.config.js
@@ -2,6 +2,6 @@
 const baseConfig = require('../../configs/base.jest.config');
 
 module.exports = {
-    ...baseConfig,
-    displayName: 'Browser App'
+   ...baseConfig,
+   displayName: 'Browser App'
 };
diff --git a/applications/browser-app/webpack.config.js b/applications/browser-app/webpack.config.js
@@ -14,4 +14,4 @@ config.module.rules.push({
     loader: require.resolve('@theia/application-manager/lib/expose-loader')
 }); */
 
-module.exports = config;
+module.exports = config;
diff --git a/applications/electron-app/jest.config.js b/applications/electron-app/jest.config.js
@@ -2,6 +2,6 @@
 const baseConfig = require('../../configs/base.jest.config');
 
 module.exports = {
-    ...baseConfig,
-    displayName: 'Electron App'
+   ...baseConfig,
+   displayName: 'Electron App'
 };
diff --git a/configs/base.eslintrc.js b/configs/base.eslintrc.js
@@ -1,27 +1,27 @@
 module.exports = {
-    parser: '@typescript-eslint/parser',
-    parserOptions: {
-        sourceType: 'module',
-        ecmaVersion: 6,
-        ecmaFeatures: {
-            jsx: true
-        }
-    },
-    plugins: ['@typescript-eslint', 'header', 'import', 'no-null', 'deprecation', 'jest'],
-    extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
-        'plugin:import/errors',
-        'plugin:import/warnings',
-        'plugin:import/typescript',
-        'plugin:react/recommended',
-        'plugin:react-hooks/recommended'
-    ],
-    env: {
-        browser: true,
-        'jest/globals': true,
-        es6: true,
-        node: true
-    },
-    ignorePatterns: ['node_modules', '*.d.ts']
+   parser: '@typescript-eslint/parser',
+   parserOptions: {
+      sourceType: 'module',
+      ecmaVersion: 6,
+      ecmaFeatures: {
+         jsx: true
+      }
+   },
+   plugins: ['@typescript-eslint', 'header', 'import', 'no-null', 'deprecation', 'jest'],
+   extends: [
+      'eslint:recommended',
+      'plugin:@typescript-eslint/recommended',
+      'plugin:import/errors',
+      'plugin:import/warnings',
+      'plugin:import/typescript',
+      'plugin:react/recommended',
+      'plugin:react-hooks/recommended'
+   ],
+   env: {
+      browser: true,
+      'jest/globals': true,
+      es6: true,
+      node: true
+   },
+   ignorePatterns: ['node_modules', '*.d.ts']
 };
diff --git a/configs/base.esm.jest.config.js b/configs/base.esm.jest.config.js
@@ -2,19 +2,19 @@
 const baseConfig = require('./base.jest.config');
 
 module.exports = {
-    ...baseConfig,
-    extensionsToTreatAsEsm: ['.ts', '.tsx'],
-    moduleNameMapper: {
-        '^(\\.{1,2}/.*)\\.js$': '$1'
-    },
-    transform: {
-        // '^.+\\.[tj]sx?$' to process js/ts with `ts-jest`
-        // '^.+\\.m?[tj]sx?$' to process js/ts/mjs/mts with `ts-jest`
-        '^.+\\.tsx?$': [
-            'ts-jest',
-            {
-                useESM: true
-            }
-        ]
-    }
+   ...baseConfig,
+   extensionsToTreatAsEsm: ['.ts', '.tsx'],
+   moduleNameMapper: {
+      '^(\\.{1,2}/.*)\\.js$': '$1'
+   },
+   transform: {
+      // '^.+\\.[tj]sx?$' to process js/ts with `ts-jest`
+      // '^.+\\.m?[tj]sx?$' to process js/ts/mjs/mts with `ts-jest`
+      '^.+\\.tsx?$': [
+         'ts-jest',
+         {
+            useESM: true
+         }
+      ]
+   }
 };
diff --git a/configs/base.jest.config.js b/configs/base.jest.config.js
@@ -2,19 +2,19 @@
 const path = require('path');
 
 module.exports = {
-    preset: 'ts-jest',
-    testEnvironment: 'node',
-    testPathIgnorePatterns: ['./node_modules/'],
-    reporters: [
-        [
-            'jest-junit',
-            {
-                outputDirectory: path.join(__dirname, '..', 'unit-test-results'),
-                outputName: 'jest-report',
-                uniqueOutputName: 'true'
-            }
-        ],
-        ['github-actions', { silent: false }],
-        'summary'
-    ]
+   preset: 'ts-jest',
+   testEnvironment: 'node',
+   testPathIgnorePatterns: ['./node_modules/'],
+   reporters: [
+      [
+         'jest-junit',
+         {
+            outputDirectory: path.join(__dirname, '..', 'unit-test-results'),
+            outputName: 'jest-report',
+            uniqueOutputName: 'true'
+         }
+      ],
+      ['github-actions', { silent: false }],
+      'summary'
+   ]
 };