also automatically organize imports (#10)

* also automatically organize imports

* run formatting

.github/workflows/test.yml

@@ -1,4 +1,4 @@
-name: Python Checks
+name: CI Checks (Linting and Tests)
 
 on:
   push:

.vscode/settings.json

@@ -1,39 +1,34 @@
 {
-  "[jsonc]": {
-    "editor.defaultFormatter": "vscode.json-language-features",
-    "editor.tabSize": 2,
-    "editor.formatOnSave": true
-  },
+  // Configuration languages.
   "[json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.tabSize": 2,
     "editor.formatOnSave": true
   },
+  // Static frontend languages.
   "[html]": {
     "editor.defaultFormatter": "vscode.html-language-features",
     "editor.tabSize": 2,
     "editor.formatOnSave": true
   },
+  // React languages.
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.tabSize": 2,
-    "editor.formatOnSave": true
-  },
-  "[javascriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.tabSize": 2,
+    "editor.codeActionsOnSave": {
+      "source.fixAll": "always"
+    },
     "editor.formatOnSave": true
   },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.tabSize": 2,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "always"
+    },
     "editor.formatOnSave": true
   },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.tabSize": 2,
-    "editor.formatOnSave": true
-  },
+  // Backend languages.
   "[python]": {
     "editor.defaultFormatter": "ms-python.black-formatter",
     "editor.formatOnSave": true,

Makefile

@@ -35,22 +35,38 @@ start-docker:
 	@docker run --name store-db -d -p 8000:8000 amazon/dynamodb-local
 
 # ------------------------ #
-#       Static Checks      #
+#      Code Formatting     #
 # ------------------------ #
 
-format:
+format-backend:
 	@black store
 	@ruff format store
+.PHONY: format
+
+format-frontend:
 	@cd frontend && npm run format
 .PHONY: format
 
-static-checks:
+format: format-backend format-frontend
+.PHONY: format
+
+# ------------------------ #
+#       Static Checks      #
+# ------------------------ #
+
+static-checks-backend:
 	@black --diff --check store
 	@ruff check store
 	@mypy --install-types --non-interactive store
+.PHONY: lint
+
+static-checks-frontend:
 	@cd frontend && npm run lint
 .PHONY: lint
 
+static-checks: static-checks-backend static-checks-frontend
+.PHONY: lint
+
 # ------------------------ #
 #        Unit tests        #
 # ------------------------ #

frontend/.eslintrc.js

@@ -0,0 +1,40 @@
+module.exposts = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "plugin:prettier/recommended",
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: "module",
+  },
+  plugins: ["react", "import"],
+  rules: {
+    "import/order": [
+      "error",
+      {
+        groups: [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+        ],
+        "newlines-between": "always",
+        alphabetize: { order: "asc", caseInsensitive: true },
+      },
+    ],
+    "prettier/prettier": "error",
+  },
+};

frontend/.prettierrc

@@ -1,3 +1,4 @@
 {
-  "tabWidth": 2
+  "tabWidth": 2,
+  "plugins": ["prettier-plugin-organize-imports"]
 }