add rome

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "rome.rome"
+}

package.json

@@ -15,29 +15,30 @@
     "coverage": "vitest --coverage"
   },
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.2",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.8",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
+    "@testing-library/react": "^13.4.0",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
     "@vitejs/plugin-react-refresh": "^1.3.3",
-    "eslint": "^8.2.0",
-    "eslint-config-airbnb": "^19.0.0",
-    "eslint-config-airbnb-typescript": "^16.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "happy-dom": "^2.25.1",
-    "prettier": "^2.3.1",
-    "typescript": "^4.3.4",
-    "vite": "^2.3.8",
-    "vitest": "^0.0.124",
+    "eslint": "^8.28.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "happy-dom": "^7.7.0",
+    "prettier": "^2.7.1",
+    "rome": "^10.0.1",
+    "typescript": "^4.9.3",
+    "vite": "^3.2.4",
+    "vitest": "^0.25.2",
     "yarn-run-all": "^3.1.1"
   }
 }

src/App.test.tsx

@@ -3,8 +3,8 @@ import { expect, describe, it } from "vitest";
 import { App } from "./App";
 
 describe("Snapshot", () => {
-  it("should render", () => {
-    const { asFragment } = render(<App />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+	it("should render", () => {
+		const { asFragment } = render(<App />);
+		expect(asFragment()).toMatchSnapshot();
+	});
 });

src/App.tsx

@@ -1,3 +1,3 @@
-import { VFC } from "react";
+import { FC } from "react";
 
-export const App: VFC = () => <div>Hello!</div>;
+export const App: FC = () => <div>Hello!</div>;