Add eslint

.eslintrc.yml

@@ -0,0 +1,89 @@
+env:
+  browser: true
+  es2021: true
+extends:
+  - 'eslint:recommended'
+  - 'plugin:@typescript-eslint/recommended'
+parser: '@typescript-eslint/parser'
+parserOptions:
+  ecmaVersion: 12
+  sourceType: module
+plugins:
+  - '@typescript-eslint'
+  - react
+rules:
+  "@typescript-eslint/ban-ts-comment": off
+  "@typescript-eslint/no-empty-function": off
+  indent:
+    - error
+    - 4
+    - SwitchCase: 1
+  linebreak-style:
+    - error
+    - unix
+  quotes:
+    - error
+    - double
+  semi:
+    - error
+    - always
+  react/jsx-pascal-case: error
+  react/jsx-closing-bracket-location: error
+  react/jsx-closing-tag-location: error
+  no-multi-spaces: error
+  react/jsx-tag-spacing: error
+  react/jsx-boolean-value: error
+  react/jsx-wrap-multilines: error
+  react/self-closing-comp: error
+  prefer-const: error
+  no-const-assign: error
+  no-var: error
+  array-callback-return: error
+  prefer-template: error
+  template-curly-spacing: error
+  no-useless-escape: error
+  wrap-iife: error
+  no-loop-func: error
+  default-param-last: error
+  space-before-function-paren:
+    - error
+    - never
+  space-before-blocks: error
+  no-param-reassign: error
+  function-paren-newline: error
+  comma-dangle:
+    - error
+    - always-multiline
+  arrow-spacing: error
+  arrow-parens: error
+  arrow-body-style: error
+  no-confusing-arrow: error
+  implicit-arrow-linebreak: error
+  no-duplicate-imports: error
+  object-curly-newline: error
+  dot-notation: error
+  one-var:
+    - error
+    - never
+  no-multi-assign: error
+  no-plusplus: error
+  operator-linebreak: error
+  eqeqeq: error
+  no-case-declarations: error
+  no-nested-ternary: error
+  no-unneeded-ternary: error
+  no-mixed-operators: error
+  nonblock-statement-body-position: error
+  brace-style: error
+  keyword-spacing: error
+  space-infix-ops: error
+  eol-last: error
+  newline-per-chained-call: error
+  no-whitespace-before-property: error
+  space-in-parens: error
+  array-bracket-spacing: error
+  key-spacing: error
+  no-trailing-spaces: error
+  comma-style: error
+  radix: error
+  no-new-wrappers: error

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll": "explicit"
+    }
+}

package.json

@@ -10,6 +10,10 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.4.1",
+    "@typescript-eslint/parser": "^6.4.1",
+    "eslint": "^8.47.0",
+    "eslint-plugin-react": "^7.33.2",
     "solid-devtools": "^0.29.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.11",
@@ -18,4 +22,4 @@
   "dependencies": {
     "solid-js": "^1.8.11"
   }
-}
+}

src/App.tsx

@@ -1,27 +1,25 @@
-import type { Component } from 'solid-js';
+import type { Component } from "solid-js";
 
-import logo from './logo.svg';
+import logo from "./logo.svg";
-import styles from './App.module.css';
+import styles from "./App.module.css";
 
-const App: Component = () => {
+const App: Component = () => (
-  return (
     <div class={styles.App}>
-      <header class={styles.header}>
+        <header class={styles.header}>
-        <img src={logo} class={styles.logo} alt="logo" />
+            <img src={logo} class={styles.logo} alt="logo" />
-        <p>
+            <p>
           Edit <code>src/App.tsx</code> and save to reload.
-        </p>
+            </p>
-        <a
+            <a
-          class={styles.link}
+                class={styles.link}
-          href="https://github.com/solidjs/solid"
+                href="https://github.com/solidjs/solid"
-          target="_blank"
+                target="_blank"
-          rel="noopener noreferrer"
+                rel="noopener noreferrer"
-        >
+            >
           Learn Solid
-        </a>
+            </a>
-      </header>
+        </header>
     </div>
-  );
+);
-};
 
 export default App;

src/index.tsx

@@ -1,15 +1,13 @@
 /* @refresh reload */
-import { render } from 'solid-js/web';
+import { render } from "solid-js/web";
 
-import './index.css';
+import "./index.css";
-import App from './App';
+import App from "./App";
 
-const root = document.getElementById('root');
+const root = document.getElementById("root");
 
 if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
-  throw new Error(
+    throw new Error("Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?");
-    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
-  );
 }
 
 render(() => <App />, root!);