Added vscode things

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Starbase 80
+config

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+	"recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "bradlc.vscode-tailwindcss"]
+}

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "js-yaml": "^4.1.0",
+        "prettier": "^2.8.7",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -1850,6 +1851,20 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/prettier": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
+      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",

package.json

@@ -10,6 +10,7 @@
 	},
 	"dependencies": {
 		"js-yaml": "^4.1.0",
+		"prettier": "^2.8.7",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
@@ -22,5 +23,14 @@
 		"tailwindcss": "^3.3.1",
 		"typescript": "^4.9.3",
 		"vite": "^4.2.0"
+	},
+	"prettier": {
+		"arrowParens": "avoid",
+		"jsxBracketSameLine": true,
+		"printWidth": 120,
+		"semi": true,
+		"tabWidth": 4,
+		"trailingComma": "es5",
+		"useTabs": true
 	}
 }

src/App.tsx

@@ -1,10 +1,10 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { useState } from "react";
+import "./App.css";
+import reactLogo from "./assets/react.svg";
+import viteLogo from "/vite.svg";
 
 function App() {
-  const [count, setCount] = useState(0)
+	const [count, setCount] = useState(0);
 
 	return (
 		<div className="App">
@@ -18,18 +18,14 @@ function App() {
 			</div>
 			<h1>Vite + React</h1>
 			<div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p className='text-2xl'>
+				<button onClick={() => setCount(count => count + 1)}>count is {count}</button>
+				<p className="text-2xl">
 					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>
+			<p className="read-the-docs">Click on the Vite and React logos to learn more</p>
 		</div>
-  )
+	);
 }
 
-export default App
+export default App;