Infra/setup ci and tooling frontend

.github/workflows/canopeum_backend.yml

@@ -2,13 +2,24 @@ name: canopeum_backend
 
 on:
   push:
+    branches:
+      - main
+    paths:
+      - "canopeum_backend/**"
+      - ".github/workflows/canopeum_backend.yml"
   pull_request:
     branches:
       - main
+    paths:
+      - "canopeum_backend/**"
+      - ".github/workflows/canopeum_backend.yml"
 
 jobs:
   mypy:
     runs-on: ${{ matrix.os }}
+    defaults:
+      run:
+        working-directory: canopeum_backend
     strategy:
       fail-fast: false
       matrix:
@@ -21,12 +32,13 @@ jobs:
           cache: pip
           cache-dependency-path: "**/requirements*.txt"
       - run: pip install -r requirements-dev.txt
-        working-directory: canopeum_backend
       - run: mypy . --python-version=3.12
-        working-directory: canopeum_backend
 
   pyright:
     runs-on: ${{ matrix.os }}
+    defaults:
+      run:
+        working-directory: canopeum_backend
     strategy:
       fail-fast: false
       matrix:
@@ -39,8 +51,6 @@ jobs:
           cache: pip
           cache-dependency-path: "**/requirements*.txt"
       - run: pip install -r requirements-dev.txt
-        working-directory: canopeum_backend
       - uses: jakebailey/pyright-action@v2
         with:
           python-version: "3.12"
-          working-directory: canopeum_backend

.github/workflows/canopeum_frontend.yml

@@ -0,0 +1,37 @@
+name: canopeum_frontend
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "canopeum_frontend/**"
+      - ".github/workflows/canopeum_frontend.yml"
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "canopeum_frontend/**"
+      - ".github/workflows/canopeum_frontend.yml"
+
+jobs:
+  Lint:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: canopeum_frontend
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - run: npm ci
+      - run: npm run lint
+  Build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: canopeum_frontend
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - run: npm ci
+      - run: npm run build

.pre-commit-config.yaml

@@ -12,6 +12,7 @@ repos:
       - id: check-toml
       - id: check-merge-conflict
       - id: check-case-conflict
+  # You can run this locally with `ruff format && ruff check`
   - repo: https://github.com/astral-sh/ruff-pre-commit
     rev: v0.3.4 # must match canopeum_backend/requirements-dev.txt
     hooks:
@@ -20,6 +21,25 @@ repos:
         args: [--fix]
       # Run the formatter.
       - id: ruff-format
+  # You can run this locally with `npm run lint:fix`
+  # NOTE: exceeds tier max size 250MiB: 289.9MiB
+  # - repo: https://github.com/pre-commit/mirrors-eslint
+  #   rev: v8.56.0
+  #   hooks:
+  #     - id: eslint
+  #       files: \.[jt]sx?$ # *.js, *.jsx, *.ts and *.tsx
+  #       types: [file]
+  #       additional_dependencies: [
+  #           # Keep these in sync with canopeum_backend/package.json
+  #           "[email protected]",
+  #           "[email protected]",
+  #           "[email protected]",
+  #           "[email protected]",
+  #           "[email protected]",
+  #           "[email protected]",
+  #           "[email protected]",
+  #           "[email protected]",
+  #         ]
 
 ci:
   autoupdate_schedule: quarterly

.vscode/extensions.json

@@ -4,31 +4,44 @@
     "bierner.github-markdown-preview",
     "charliermarsh.ruff",
     "davidanson.vscode-markdownlint",
+    "dbaeumer.vscode-eslint",
+    "dprint.dprint",
     "eamodio.gitlens",
     "github.vscode-github-actions",
+    "meganrogge.template-string-converter",
     "ms-python.mypy-type-checker",
     "ms-python.python",
     "ms-python.vscode-pylance",
-    // "ms-vscode.powershell",
     "pkief.material-icon-theme",
     // "redhat.vscode-xml",
     "redhat.vscode-yaml",
-    "tamasfe.even-better-toml",
+    "tamasfe.even-better-toml"
   ],
   "unwantedRecommendations": [
     // Must disable in this workspace //
     // https://github.com/microsoft/vscode/issues/40239 //
     //
+    // Use workspace version instead
+    "ms-vscode.vscode-typescript-next",
     // even-better-toml has format on save
     "bungcip.better-toml",
     // VSCode has implemented an optimized version
     "coenraads.bracket-pair-colorizer",
     "coenraads.bracket-pair-colorizer-2",
     "shardulm94.trailing-spaces",
+    // Lots of conflicts
+    "esbenp.prettier-vscode",
+    "rvest.vs-code-prettier-eslint",
+    // Not project-configurable. And the ESLint plugin is sufficient in JS/TS projects
+    "sonarsource.sonarlint-vscode",
     // Don't use two mypy extensions simultaneously
     "matangover.mypy",
     // Obsoleted by Pylance
     "ms-pyright.pyright",
+    // These are Deprecated
+    "eg2.tslint",
+    "ms-vscode.vscode-typescript-tslint-plugin",
+    "simonsiefke.prettier-vscode",
     //
     // Don't recommend to autoinstall //
     //
@@ -42,6 +55,6 @@
     // Not configurable per workspace, tends to conflict with other linters
     "sonarsource.sonarlint-vscode",
     // Prefer using VSCode itself as a text editor
-    "vscodevim.vim",
-  ],
+    "vscodevim.vim"
+  ]
 }

.vscode/settings.json

@@ -1,15 +1,15 @@
 {
   "editor.rulers": [
     80,
-    120,
+    120
   ],
   "[git-commit]": {
     "editor.rulers": [
-      72,
-    ],
+      72
+    ]
   },
   "[markdown]": {
-    "files.trimTrailingWhitespace": false,
+    "files.trimTrailingWhitespace": false
   },
   "files.trimTrailingWhitespace": true,
   "files.insertFinalNewline": true,
@@ -22,26 +22,91 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit",
-    // Let dedicated linter (Ruff) organize imports
+    // "source.*Imports": https://github.com/microsoft/TypeScript/pull/50931#issuecomment-1416288712
+    // Let dedicated imports tool deal with it
     "source.organizeImports": "never",
+    "source.sortImports": "never",
+    // IDEM, but also it's annoying to remove imports because of commented code while testing
+    "source.removeUnusedImports": "never"
   },
   "files.associations": {
     ".flake8": "properties",
     "*.qrc": "xml",
     "*.ui": "xml",
     ".markdownlint.json": "jsonc",
+    ".eslintrc*.json": "jsonc",
+    "dprint*.json": "jsonc"
   },
   "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
     "**/*.code-search": true,
-    "*.lock": true,
-  },
-  // Set the default formatter to help avoid Prettier
-  "[json][jsonc]": {
-    "editor.defaultFormatter": "vscode.json-language-features",
+    "package-lock.json": true,
+    "*.lock": true
   },
+
   "[yaml]": {
     "editor.defaultFormatter": "redhat.vscode-yaml"
   },
+  /*
+  * CSS-specific settings
+  */
+  // TODO: Configure stylelint or dprint-prettier so I can recommend it
+  "[css][scss][postcss][less]": {
+    "editor.defaultFormatter": "vscode.css-language-features"
+  },
+  "less.format.spaceAroundSelectorSeparator": true,
+  "css.format.spaceAroundSelectorSeparator": true,
+  "scss.format.spaceAroundSelectorSeparator": true,
+  /*
+  * JavasScript-specific settings
+  */
+  // Set the default formatter to help avoid Prettier
+  "[json][jsonc][javascript][javascriptreact][typescript][typescriptreact][markdown][dockerfile]": {
+    "editor.defaultFormatter": "dprint.dprint"
+  },
+  "typescript.tsdk": "canopeum_frontend/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "js/ts.implicitProjectConfig.checkJs": true,
+  "javascript.preferences.quoteStyle": "single",
+  "typescript.preferences.quoteStyle": "single",
+  "javascript.preferences.importModuleSpecifier": "non-relative",
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "eslint.workingDirectories": [
+    {
+      "mode": "auto"
+    }
+  ],
+  "eslint.codeActionsOnSave.rules": [
+    // Clearing imports and unused vars because of commented code while testing is annoying
+    "!unused-imports/no-unused-imports",
+    "!autofix/no-debugger",
+    "!autofix/no-unused-vars",
+    "*"
+  ],
+  "eslint.rules.customizations": [
+    {
+      "rule": "*",
+      "severity": "downgrade"
+    }
+  ],
+  /*
+  * HTML-specific settings
+  */
+  // Specify the formatter in case other formatters are also installed (ie: Prettier)
+  "[html]": {
+    "editor.defaultFormatter": "vscode.html-language-features"
+  },
+  "html.format.wrapAttributes": "force-expand-multiline",
+  /*
+  * Python-specific settings
+  */
   "[python]": {
     "editor.defaultFormatter": "charliermarsh.ruff",
     "editor.tabSize": 4,
@@ -50,13 +115,13 @@
       // 79, // PEP8-17 default max
       // 88, // Black/Ruff default
       // 99, // PEP8-17 acceptable max
-      120, // Our hard rule
-    ],
+      120 // Our hard rule
+    ]
   },
   "mypy-type-checker.importStrategy": "fromEnvironment",
   "mypy-type-checker.args": [
     // https://github.com/microsoft/vscode-mypy/issues/37#issuecomment-1602702174
-    "--config-file=${workspaceFolder}/canopeum_backend/pyproject.toml",
+    "--config-file=${workspaceFolder}/canopeum_backend/pyproject.toml"
   ],
   "python.terminal.activateEnvironment": true,
   // python.analysis is Pylance (pyright) configurations
@@ -69,32 +134,9 @@
   "ruff.importStrategy": "fromEnvironment",
   // Use the Ruff extension instead
   "isort.check": false,
-  "powershell.codeFormatting.pipelineIndentationStyle": "IncreaseIndentationForFirstPipeline",
-  "powershell.codeFormatting.autoCorrectAliases": true,
-  "powershell.codeFormatting.trimWhitespaceAroundPipe": true,
-  "powershell.codeFormatting.useConstantStrings": true,
-  "powershell.codeFormatting.useCorrectCasing": true,
-  "powershell.codeFormatting.whitespaceBetweenParameters": true,
-  "powershell.integratedConsole.showOnStartup": false,
-  "terminal.integrated.defaultProfile.windows": "PowerShell",
-  "terminal.integrated.defaultProfile.linux": "pwsh",
-  "terminal.integrated.defaultProfile.osx": "pwsh",
-  "xml.codeLens.enabled": true,
-  "xml.format.spaceBeforeEmptyCloseTag": false,
-  "xml.format.preserveSpace": [
-    // Default
-    "xsl:text",
-    "xsl:comment",
-    "xsl:processing-instruction",
-    "literallayout",
-    "programlisting",
-    "screen",
-    "synopsis",
-    "pre",
-    "xd:pre",
-    // Custom
-    "string"
-  ],
+  /*
+  * TOML-specific settings
+  */
   "[toml]": {
     "editor.defaultFormatter": "tamasfe.even-better-toml"
   },
@@ -114,5 +156,5 @@
   "evenBetterToml.formatter.reorderArrays": true,
   "evenBetterToml.formatter.trailingNewline": true,
   // We like keeping TOML keys in a certain non-alphabetical order that feels more natural
-  "evenBetterToml.formatter.reorderKeys": false,
+  "evenBetterToml.formatter.reorderKeys": false
 }