feat: eslint + Typescript config

.babelrc

@@ -1,3 +1,3 @@
 {
-    "presets": ["@babel/preset-env", ["@babel/preset-react", { "runtime": "automatic" }]]
+    "presets": ["@babel/preset-env", ["@babel/preset-react", { "runtime": "automatic" }], "@babel/preset-typescript"]
 }

.eslintrc.json

@@ -0,0 +1,84 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "airbnb",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier", "unused-imports"],
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "import/no-extraneous-dependencies": "off",
+    "camelcase": "off",
+    "consistent-return": "off",
+    "no-param-reassign": "off",
+    "no-use-before-define": "off",
+    "prettier/prettier": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react-hooks/rules-of-hooks": "error",
+    "react/jsx-props-no-spreading": "off",
+    "react/require-default-props": "off",
+    "react/react-in-jsx-scope": "off",
+    "unused-imports/no-unused-imports": "error",
+    "react/jsx-uses-react": "off",
+    "react/function-component-definition": [
+      "error",
+      {
+        "namedComponents": ["function-declaration", "arrow-function"],
+        "unnamedComponents": "arrow-function"
+      }
+    ],
+    "unused-imports/no-unused-vars": [
+      "warn",
+      { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
+    ],
+    "jsx-a11y/label-has-associated-control": [
+      "error",
+      {
+        "required": {
+          "some": ["nesting", "id", "name"]
+        }
+      }
+    ],
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    ],
+    "import/prefer-default-export": "off",
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "ts": "never",
+        "tsx": "never",
+        "js": "never",
+        "jsx": "never"
+      }
+    ]
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "paths": "./tsconfig.json"
+      },
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  }
+}

.github/workflows/ci.yml

@@ -43,3 +43,26 @@ jobs:
     #  with:
     #    flags: unittests
     #    fail_ci_if_error: true
+  react_lint:
+    name: Node.js linter
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-20.04]
+        node-version: [18]
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Setting up Node.js 18
+      uses: actions/setup-node@v3
+      with:
+        node-version: 18
+
+    - name: Install yarn
+      run: npm install --global yarn
+
+    - name: Install Node.js 18 dependencies
+      run: yarn install
+
+    - name: Run Node.js lint
+      run: yarn lint

package.json

@@ -8,7 +8,9 @@
   "scripts": {
     "start": "webpack serve --mode=development --open",
     "build": "webpack --mode=production",
-    "dev": "webpack --mode=production --watch"
+    "dev": "webpack --mode=production --watch",
+    "lint": "eslint react-app --ext .js,.ts,.jsx,.tsx",
+    "lint-fix": "eslint react-app --ext .js,.ts,.jsx,.tsx --fix"
   },
   "dependencies": {
     "@babel/core": "^7.22.10",
@@ -28,6 +30,21 @@
     "webpack-merge": "^5.9.0"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.22.15",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
+    "eslint": "^8.38.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
     "prettier": "^3.0.3",
     "typescript": "^5.2.2",
     "webpack-dev-server": "^4.15.1"

react-app/App.tsx

@@ -0,0 +1,13 @@
+import './App.css';
+import BasicComponent from './BasicComponent';
+
+const App = () => {
+  return (
+    <div className="container">
+      <h1 className="title">Images Gallery XBlock</h1>
+      <BasicComponent title="John" />
+    </div>
+  );
+};
+
+export default App;

react-app/BasicComponent.tsx

@@ -0,0 +1,25 @@
+// All this code will be removed, it's for testing TypeScript
+import { FC } from 'react';
+import { UserI } from './interfaces';
+
+interface Props {
+  title: string;
+}
+
+const userData: UserI = {
+  name: 'test',
+  age: 40,
+  isActive: true,
+  logs: []
+};
+
+const BasicComponent: FC<Props> = ({ title }) => {
+  console.log(userData);
+  return (
+    <div>
+      <h1>Name: {title}</h1>
+    </div>
+  );
+};
+
+export default BasicComponent;

react-app/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 

react-app/interfaces.ts

@@ -0,0 +1,13 @@
+// All this code will be removed, it's for testing TypeScript
+interface Log {
+  id: string;
+  date: Date;
+  message: string;
+}
+
+export interface UserI {
+  name: string;
+  age: number;
+  isActive: boolean;
+  logs: Log[];
+}

tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": true,
+    "types": ["node"],
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": false,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["react-app"]
+    }
+  },
+  "include": ["react-app"],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module",
+    "tsconfigRootDir": "./"
+  }
+}