setup prettier

.prettierignore

@@ -0,0 +1,3 @@
+package-lock.json
+/src/js.old/
+/dist

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
+}

package.json

@@ -5,7 +5,8 @@
     "scripts": {
         "dev": "vite",
         "build": "tsup src/js/index.ts --format esm,cjs --dts --external react",
-        "prepare": "npm run build"
+        "prepare": "npm run build",
+        "prettier": "prettier --write 'src/**/*.{ts,tsx}'"
     },
     "files": [
         "dist",
@@ -34,11 +35,13 @@
         "@types/js-cookie": "^2.2.2",
         "@types/lodash": "^4.14.134",
         "@types/react": "^18.0.31",
-        "tsup": "^6.7.0",
-        "typescript": "^4.9.5",
+        "@types/react-dom": "^18.0.11",
+        "@vitejs/plugin-react": "^3.1.0",
+        "prettier": "^2.8.7",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "@vitejs/plugin-react": "^3.1.0",
+        "tsup": "^6.7.0",
+        "typescript": "^4.9.5",
         "vite": "^4.2.0"
     },
     "dependencies": {

src/js/components/App.tsx

@@ -1,34 +1,34 @@
-import { useState } from 'react'
-import viteLogo from '/vite.svg'
-import './App.css'
-import CookiePopup from "./CookiePopup";
+import { useState } from 'react';
+import viteLogo from '/vite.svg';
+import './App.css';
+import CookiePopup from './CookiePopup';
 
 function App() {
-  const [count, setCount] = useState(0)
+    const [count, setCount] = useState(0);
 
-  return (
-    <div className="App">
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+    return (
+        <div className="App">
+            <div>
+                <a href="https://vitejs.dev" target="_blank">
+                    <img src={viteLogo} className="logo" alt="Vite logo" />
+                </a>
+            </div>
+            <h1>Vite + React</h1>
+            <div className="card">
+                <button onClick={() => setCount((count) => count + 1)}>
+                    count is {count}
+                </button>
+                <p>
+                    Edit <code>src/App.tsx</code> and save to test HMR
+                </p>
+            </div>
+            <p className="read-the-docs">
+                Click on the Vite and React logos to learn more
+            </p>
 
-        <CookiePopup/>
-    </div>
-  )
+            <CookiePopup />
+        </div>
+    );
 }
 
-export default App
+export default App;

src/js/main.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './components/App'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './components/App';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);