chore(prettier): Setup prettier and tsc, then apply changes

webapp/.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+build
+coverage
+node_modules

webapp/.prettierrc

@@ -0,0 +1,46 @@
+{
+  "arrowParens": "always",
+  "bracketSameLine": false,
+  "objectWrap": "preserve",
+  "bracketSpacing": true,
+  "semi": true,
+  "experimentalOperatorPosition": "end",
+  "experimentalTernaries": false,
+  "singleQuote": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "as-needed",
+  "trailingComma": "all",
+  "singleAttributePerLine": true,
+  "htmlWhitespaceSensitivity": "css",
+  "vueIndentScriptAndStyle": false,
+  "proseWrap": "preserve",
+  "endOfLine": "lf",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "embeddedLanguageFormatting": "auto",
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": [
+    "<BUILTIN_MODULES>",
+    "<THIRD_PARTY_MODULES>",
+    "^@/(.*)$",
+    "^@app/(.*)$",
+    "^@providers",
+    "^@providers/(.*)$",
+    "^@components",
+    "^@components/(.*)$",
+    "^@widgets",
+    "^@widgets/(.*)$",
+    "^@assets",
+    "^@assets/(.*)$",
+    "^@pages",
+    "^@pages/(.*)$",
+    "^@ui",
+    "^@ui/(.*)$",
+    "[../]",
+    "[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "importOrderCaseInsensitive": false
+}

webapp/README.md

@@ -8,11 +8,13 @@ Plus d'infos ici : [https://feature-sliced.github.io/documentation/docs/get-star
 - Avoir Node.js installé sur votre machine [voir comment faire](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#using-a-node-version-manager-to-install-nodejs-and-npm)
 
 ## Installer les packages
+
 ```
 npm ci
 ```
 
 ## Démarrer le serveur
+
 ```
 npm run dev
 ```
@@ -22,4 +24,4 @@ npm run dev
 - `npm run build` : package l'application pour la mise en production (dossier [dist](./dist))
 - `npm run preview` : Démarre le serveur à partir du build pour la production (dans le dist)
 - `npm run check:arch` : Vérifier si les imports du projet respectent le principe de l'architecture FSD.
-- `npm run arch:tree` : Génère un fichier text contenant l'arborescence du projet.
+- `npm run arch:tree` : Génère un fichier text contenant l'arborescence du projet.

webapp/components.json

@@ -22,4 +22,4 @@
     "hooks": "@/hooks"
   },
   "registries": {}
-}
+}

webapp/eslint.config.ts

@@ -1,12 +1,19 @@
-import js from "@eslint/js";
+import pluginReact from "eslint-plugin-react";
 import globals from "globals";
 import tseslint from "typescript-eslint";
-import pluginReact from "eslint-plugin-react";
+
+import js from "@eslint/js";
 import json from "@eslint/json";
+import pluginPrettier from "eslint-config-prettier/flat";
 import { defineConfig } from "eslint/config";
 
 export default defineConfig([
-  { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: globals.browser } },
+  {
+    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    plugins: { js },
+    extends: ["js/recommended"],
+    languageOptions: { globals: globals.browser },
+  },
   tseslint.configs.recommended,
   {
     ...pluginReact.configs.flat.recommended,
@@ -15,16 +22,27 @@ export default defineConfig([
        * Disable react/display-name since it's currently broken
        * TypeError: Error while loading rule 'react/display-name': sourceCode.getAllComments is not a function
        */
-      "react/display-name": ["off"]
+      "react/display-name": ["off"],
     },
     settings: {
       react: {
-        version: "detect"
-      }
+        version: "detect",
+      },
     },
   },
-  /** @ts-expect-error json plugin not typed well*/
-  { files: ["**/*.json"], plugins: { json }, language: "json/json", extends: ["json/recommended"] },
-  /** @ts-expect-error json plugin not typed well*/
-  { files: ["**/*.jsonc"], plugins: { json }, language: "json/jsonc", extends: ["json/recommended"] },
+  {
+    files: ["**/*.json"],
+    /** @ts-expect-error json plugin not typed well*/
+    plugins: { json },
+    language: "json/json",
+    extends: ["json/recommended"],
+  },
+  {
+    files: ["**/*.jsonc"],
+    /** @ts-expect-error json plugin not typed well*/
+    plugins: { json },
+    language: "json/jsonc",
+    extends: ["json/recommended"],
+  },
+  pluginPrettier,
 ]);

webapp/index.html

@@ -2,12 +2,22 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/vite.svg"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
     <title>frontend</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script
+      type="module"
+      src="/src/main.tsx"
+    ></script>
   </body>
 </html>

webapp/package.json

@@ -8,7 +8,11 @@
     "build": "tsc -b && vite build",
     "preview": "vite preview",
     "check:arch": "node ./scripts/check-architecture.cjs",
+    "check:code": "npm run compile && npm run format && npm run lint",
     "arch:tree": "node ./scripts/generate-tree.cjs ./src webappTree.md",
+    "compile": "tsc -b",
+    "format": "prettier . --write",
+    "format:check": "prettier . --check",
     "lint": "eslint ./src",
     "lint:fix": "eslint ./src --fix"
   },
@@ -37,15 +41,18 @@
     "@eslint/js": "^9.39.2",
     "@eslint/json": "^1.0.0",
     "@tailwindcss/vite": "^4.1.18",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@types/chart.js": "^2.9.41",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
     "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^17.2.0",
     "jiti": "^2.6.1",
+    "prettier": "3.8.1",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
     "tailwindcss-animate": "^1.0.7",