Improve vscode settings and component naming (#38)

* add prettier configs

* rename components

Author: otofu-square

.vscode/extension.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode"
+  ]
+}

.vscode/settings.json

@@ -4,5 +4,7 @@
     "typescriptreact": false,
     "css": false
   },
-  "github.copilot.inlineSuggest.enable": false
+  "github.copilot.inlineSuggest.enable": false,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

src/components/App/App.module.css renamed to src/components/FriendRequestForm/FriendRequestForm.module.css

@@ -1,8 +1,8 @@
 import { UserList } from '../UserList/UserList'
 
-import styles from './App.module.css'
+import styles from './FriendRequestForm.module.css'
 
-const App = () => {
+const FriendRequestForm = () => {
   return (
     <form className={styles.wrapper}>
       <h2 className={styles.header}>友達リクエストの送信先を選択してください</h2>
@@ -18,4 +18,4 @@ const App = () => {
   )
 }
 
-export { App }
+export { FriendRequestForm }

src/components/App/App.tsx renamed to src/components/FriendRequestForm/FriendRequestForm.tsx

@@ -3,11 +3,11 @@ import ReactDOM from 'react-dom'
 
 import 'ress'
 
-import { App } from './components/App/App'
+import { FriendRequestForm } from './components/FriendRequestForm/FriendRequestForm'
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <FriendRequestForm />
   </React.StrictMode>,
   document.getElementById('root'),
 )