chore(web): upgrade eslint and config (#1112)

.vscode/extensions.json

@@ -4,7 +4,9 @@
 	// List of extensions which should be recommended for users of this workspace.
 	"recommendations": [
 		"golang.go",
-		"redhat.vscode-yaml"
+		"redhat.vscode-yaml",
+		"dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
 	],
 	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
 	"unwantedRecommendations": []

.vscode/settings.json

@@ -1,7 +1,6 @@
 {
   "go.testEnvFile": "${workspaceRoot}/.env",
   "go.lintTool": "golangci-lint",
-  "editor.formatOnSave": true,
   "yaml.format.enable": false,
   "yaml.completion": true,
   "yaml.validate": true,
@@ -17,20 +16,34 @@
   },
   "json.schemas": [
     {
-      "fileMatch": [
-        "/server/pkg/builtin/manifest.json"
-      ],
+      "fileMatch": ["/server/pkg/builtin/manifest.json"],
       "url": "./server/schemas/plugin_manifest.json"
     },
     {
-      "fileMatch": [
-        "/server/pkg/builtin/manifest_*.json"
-      ],
+      "fileMatch": ["/server/pkg/builtin/manifest_*.json"],
       "url": "./server/schemas/plugin_manifest_translation.json"
     }
   ],
   "[yaml]": {
     "editor.formatOnSave": false
   },
-  "prettier.enable": false
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "eslint.enable": true,
+  "eslint.useFlatConfig": true,
+  "prettier.enable": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

web/.huskyrc.json

@@ -2,4 +2,4 @@
   "hooks": {
     "pre-commit": "lint-staged"
   }
-}
+}

web/.prettierignore

@@ -1 +1,3 @@
 package.json
+**/__gen__/**
+src/services/i18n/translations/*.yml

web/.storybook/preview-head.html

@@ -1,7 +1,10 @@
 <style>
   /* enable page scroll for docs page */
-  body:has(#storybook-docs .sbdocs){
+  body:has(#storybook-docs .sbdocs) {
     overflow-y: auto !important;
   }
 </style>
-<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
+<link
+  href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"
+  rel="stylesheet"
+/>

web/.storybook/preview.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   ApolloProvider,
   ApolloClient,
@@ -21,7 +20,7 @@ import theme from "./theme";
 const mockClient = new ApolloClient({
   link: new ApolloLink(
     () =>
-      new Observable(observer => {
+      new Observable((observer) => {
         observer.complete();
       }),
   ),
@@ -53,7 +52,7 @@ const preview: Preview = {
       Provider: ThemeProvider,
       GlobalStyles,
     }),
-    Story => {
+    (Story) => {
       return (
         <ApolloProvider client={mockClient}>
           <I18nProvider>

web/.storybook/public/plugins/block.js

@@ -34,6 +34,6 @@ reearth.ui.show(html);
 reearth.on("update", () => {
   reearth.ui.postMessage(reearth.block);
 });
-reearth.on("message", msg => {
+reearth.on("message", (msg) => {
   console.log("message received:", msg);
 });