Setup eslint and prettier

.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  extends: ['mantine'],
+  parserOptions: {
+    project: './tsconfig.json',
+  },
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+  },
+};

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('eslint-config-mantine/.prettierrc.js');

package.json

@@ -6,7 +6,12 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "prettier": "prettier --check \"**/*.{ts,tsx}\"",
+    "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
+    "jest": "jest",
+    "jest:watch": "jest --watch"
   },
   "dependencies": {
     "@emotion/react": "^11.10.5",
@@ -18,7 +23,18 @@
   "devDependencies": {
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
+    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/parser": "^5.30.0",
     "@vitejs/plugin-react": "^3.0.1",
+    "eslint": "^8.18.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-mantine": "2.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^2.8.3",
     "typescript": "^4.9.4",
     "vite": "^4.0.4"
   }

src/App.tsx

@@ -1,5 +1,5 @@
-import { Text, Button, Stack } from "@mantine/core";
-import { ThemeProvider } from "./ThemeProvider";
+import { Text, Button, Stack } from '@mantine/core';
+import { ThemeProvider } from './ThemeProvider';
 
 export default function App() {
   return (

src/ThemeProvider.tsx

@@ -1,7 +1,7 @@
-import { MantineProvider, MantineThemeOverride } from "@mantine/core";
+import { MantineProvider, MantineThemeOverride } from '@mantine/core';
 
 export const theme: MantineThemeOverride = {
-  colorScheme: "dark",
+  colorScheme: 'dark',
 };
 
 interface ThemeProviderProps {

src/main.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom/client";
-import App from "./App";
+import ReactDOM from 'react-dom/client';
+import App from './App';
 
-ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
-})
+  plugins: [react()],
+});