Configured eslint and prettier to work on package.json

.idea/jsLinters/eslint.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EslintConfiguration">
+    <option name="fix-on-save" value="true" />
+  </component>
+</project>

package.json

@@ -15,7 +15,10 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "prettier": "prettier \"src/**/*.{js,jsx,ts,tsx,css,scss,md}\" --write",
+    "format:check": "npm run prettier -- --check",
+    "format:write": "npm run prettier -- --write"
   },
   "eslintConfig": {
     "extends": [

src/Pokemon.css

@@ -1,34 +1,34 @@
 :root {
-    --grass: #5FBD58;
+  --grass: #5fbd58;
-    --bug: #92BC2C;
+  --bug: #92bc2c;
   --dark: #595761;
-    --dragon: #0C69C8;
+  --dragon: #0c69c8;
-    --electric: #F2D94E;
+  --electric: #f2d94e;
-    --fairy: #EE90E6;
+  --fairy: #ee90e6;
-    --fighting: #D3425F;
+  --fighting: #d3425f;
   --fire: #dc872f;
-    --flying: #A1BBEC;
+  --flying: #a1bbec;
-    --ghost: #5F6DBC;
+  --ghost: #5f6dbc;
-    --ground: #DA7C4D;
+  --ground: #da7c4d;
-    --ice: #75D0C1;
+  --ice: #75d0c1;
-    --normal: #A0A29F;
+  --normal: #a0a29f;
-    --poison: #B763CF;
+  --poison: #b763cf;
   --psychic: #ff2ca8;
   --rock: #a38c21;
-    --steel: #5695A3;
+  --steel: #5695a3;
-    --water: #539DDF;
+  --water: #539ddf;
 }
 
 html {
   --pokename: #000;
   --cardborder: #fff;
   --pokenumber: hsl(228, 28%, 20%);
-    --info: #fff
+  --info: #fff;
 }
 
 @font-face {
   font-family: 'Press Start 2P';
-    src: url("assets/PressStart2P-Regular.ttf") format("truetype");
+  src: url('assets/PressStart2P-Regular.ttf') format('truetype');
 }
 
 .thumbnail__container {
@@ -44,15 +44,10 @@ html {
   height: 285px;
   text-align: center;
   /* box-shadow: 0 5px 25px 1px rgb(0 0 0 / 50%); */
-    box-shadow:
+  box-shadow: 0 1.6px 1.6px rgba(0, 0, 0, 0.023),
-            0 1.6px 1.6px rgba(0, 0, 0, 0.023),
+    0 3.8px 3.8px rgba(0, 0, 0, 0.034), 0 6.9px 6.9px rgba(0, 0, 0, 0.041),
-            0 3.8px 3.8px rgba(0, 0, 0, 0.034),
+    0 11.4px 11.4px rgba(0, 0, 0, 0.049), 0 18.8px 18.8px rgba(0, 0, 0, 0.056),
-            0 6.9px 6.9px rgba(0, 0, 0, 0.041),
+    0 32.8px 32.8px rgba(0, 0, 0, 0.067), 0 71px 71px rgba(0, 0, 0, 0.09);
-            0 11.4px 11.4px rgba(0, 0, 0, 0.049),
-            0 18.8px 18.8px rgba(0, 0, 0, 0.056),
-            0 32.8px 32.8px rgba(0, 0, 0, 0.067),
-            0 71px 71px rgba(0, 0, 0, 0.09)
-;
   transition: all 0.2s ease-in-out;
 }
 

src/index.css

@@ -1,6 +1,6 @@
 .app_container {
   display: flex;
-    flex-direction: column;;
+  flex-direction: column;
   align-items: center;
   justify-items: center;
   min-height: 100vh;
@@ -13,7 +13,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-    background-image: url("./assets/bg.png");
+  background-image: url('./assets/bg.png');
   background-size: initial;
   background-repeat: repeat;
 }

src/index.tsx

@@ -5,12 +5,12 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById('root') as HTMLElement,
 );
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function