feat: add eslint

eslint.config.mjs

@@ -0,0 +1,20 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginReact from "eslint-plugin-react";
+import vitest from "eslint-plugin-vitest";
+
+export default [
+    {
+        files: ["**/*.{js,mjs,cjs,jsx}"],
+        plugins: {
+            vitest
+        },
+        rules: {
+            ...vitest.configs.recommended.rules,
+            "vitest/expect-expect": "off"
+        }
+    },
+    { languageOptions: { globals: globals.browser } },
+    pluginJs.configs.recommended,
+    pluginReact.configs.flat.recommended
+];

package.json

@@ -7,6 +7,7 @@
         "web-vitals": "4.2.2"
     },
     "devDependencies": {
+        "@eslint/js": "^9.10.0",
         "@playwright/test": "^1.45.3",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.4.8",
@@ -16,9 +17,14 @@
         "@vitejs/plugin-react-swc": "^3.7.0",
         "@vitest/coverage-v8": "^2.0.5",
         "bestzip": "^2.2.1",
+        "eslint": "^9.10.0",
+        "eslint-plugin-react": "^7.35.2",
+        "eslint-plugin-vitest": "^0.5.4",
+        "globals": "^15.9.0",
         "jsdom": "^24.1.1",
         "ncp": "^2.0.0",
         "prettier": "^3.3.3",
+        "prop-types": "^15.8.1",
         "vite": "^5.3.4",
         "vitest": "^2.0.4"
     },
@@ -31,20 +37,10 @@
         "test": "vitest test",
         "eject": "react-scripts eject",
         "create-zip": "cd build && bestzip build.zip *",
-        "lint": "eslint src/**/*.js",
+        "lint": "eslint src/",
         "_format": "prettier \"**/*.{js,jsx,css,html}\"",
         "format": "npm run _format -- --write"
     },
-    "eslintConfig": {
-        "extends": [
-            "eslint:recommended",
-            "react-app",
-            "react-app/jest"
-        ],
-        "rules": {
-            "quotes": "error"
-        }
-    },
     "browserslist": {
         "production": [
             ">0.2%",

src/App.jsx

@@ -1,5 +1,6 @@
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import "./App.css";
+import PropTypes from "prop-types";
 
 const defaultEndpoint = "http://rdf.insee.fr/sparql";
 const defaultPrefix = "https://rdf.insee.fr/sparql?query=DESCRIBE";
@@ -70,6 +71,12 @@ function Editor({ endpoint, queries, prefix }) {
     );
 }
 
+Editor.propTypes = {
+    endpoint: PropTypes.string,
+    queries: PropTypes.array,
+    prefix: PropTypes.string
+};
+
 function App() {
     const [queries, setQueries] = useState([]);
     const [prefix, setPrefix] = useState();

src/App.test.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { render } from "@testing-library/react";
 import App from "./App";
 import { test, vi } from "vitest";

src/index.jsx

@@ -1,14 +1,14 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import "./index.css";
+import { createRoot } from "react-dom/client";
 
-ReactDOM.render(
+const root = createRoot(document.getElementById("root"));
+root.render(
     <React.StrictMode>
         <App />
-    </React.StrictMode>,
-    document.getElementById("root")
+    </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function