chore(*): update linter

.eslintrc.js

@@ -0,0 +1,65 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "import"],
+  extends: [
+    "eslint:recommended",
+    "plugin:import/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  rules: {
+    // Basic
+    "no-multiple-empty-lines": ["error", { max: 1, maxBOF: 0, maxEOF: 1 }],
+    "no-multi-spaces": "error",
+    "object-curly-spacing": ["error", "always"],
+    "array-bracket-spacing": ["error", "never"],
+    "computed-property-spacing": ["error", "never"],
+    "comma-dangle": ["error", "always-multiline"],
+    "eol-last": ["error", "always"],
+    "no-trailing-spaces": "error",
+    "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
+    "indent": ["error", 2, { "SwitchCase": 1 }],
+    "keyword-spacing": ["error", { before: true, after: true }],
+    "padded-blocks": ["error", "never"],
+    "comma-spacing": ["error", { "before": false, "after": true }],
+    "space-in-parens": ["error", "never"],
+    // TypeScript
+    "@typescript-eslint/semi": "error",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    // Import
+    "import/no-cycle": "error",
+    "import/no-unresolved": "off",
+    "import/order": [
+      "warn",
+      {
+        "newlines-between": "always",
+        groups: [
+          ["builtin", "external"],
+          ["parent", "sibling"],
+          "index",
+          "object",
+          "type",
+          "unknown",
+        ],
+        alphabetize: {
+          order: "asc",
+        },
+        pathGroups: [
+          {
+            "pattern": "~**/**",
+            "group": "parent",
+          },
+          {
+            "pattern": "./styled",
+            "group": "index",
+          },
+        ],
+      },
+    ],
+  },
+};

package.json

@@ -43,8 +43,8 @@
     "alias-reuse": "2.0.0",
     "babel-jest": "29.1.2",
     "babel-loader": "9.1.2",
-    "eslint": "8.36.0",
-    "eslint-config-neki": "1.3.0",
+    "eslint": "8.56.0",
+    "eslint-plugin-import": "2.29.1",
     "file-loader": "6.2.0",
     "jest": "29.1.2",
     "jest-environment-jsdom": "29.1.2",
@@ -57,6 +57,8 @@
     "webpack-cli": "5.0.1"
   },
   "dependencies": {
+    "@typescript-eslint/eslint-plugin": "7.16.0",
+    "@typescript-eslint/parser": "7.16.0",
     "dayjs": "1.11.5",
     "express": "4.18.2",
     "loglevel": "1.8.0",
@@ -70,4 +72,4 @@
     "styled-components": "5.3.9",
     "styled-normalize": "8.1.1"
   }
-}
+}

src/client/components/Home/Button/index.tsx

@@ -1,7 +1,9 @@
-import React, { MouseEventHandler } from 'react';
+import React from 'react';
 
 import { Container } from './styled';
 
+import type { MouseEventHandler } from 'react';
+
 type Props = {
   name: string
   onClick?: MouseEventHandler

src/client/components/Home/Editor/index.tsx

@@ -1,13 +1,12 @@
 import React, { useContext, useState } from 'react';
 
+import { InputCheckbox } from './InputCheckbox';
+import { InputRange } from './InputRange';
 import { Button } from '../Button';
 import { DEFAULT_OPTIONS } from '~const/lobby';
 import { SocketContext } from '~context/SocketContext';
 import { LobbyEvent } from '~type/lobby';
 
-import { InputCheckbox } from './InputCheckbox';
-import { InputRange } from './InputRange';
-
 import { Form, Settings } from './styled';
 
 type Props = {

src/client/components/Home/Lobbies/index.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useContext } from 'react';
 
 import { SocketContext } from '~context/SocketContext';
-import { LobbyEvent, LobbyInfo } from '~type/lobby';
+import type { LobbyInfo } from '~type/lobby';
+import { LobbyEvent } from '~type/lobby';
 
 import { Title, LobbyList, Lobby } from './styled';
 

src/client/components/Lobby/Info/__mocks__/InfoProps.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_OPTIONS } from '~const/lobby';
-import { PlayerInfo } from '~type/player';
+import type { PlayerInfo } from '~type/player';
 
 import { socket } from '~test';
 

src/client/components/Lobby/Info/index.tsx

@@ -3,13 +3,13 @@ import React, {
 } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { Countdown } from './Countdown';
 import { SocketContext } from '~context/SocketContext';
 import CONFIG from '~root/config.json';
 import { DEFAULT_OPTIONS } from '~root/src/const/lobby';
-import { LobbyEvent, LobbyOptions } from '~type/lobby';
-import { PlayerInfo } from '~type/player';
-
-import { Countdown } from './Countdown';
+import type { LobbyOptions } from '~type/lobby';
+import { LobbyEvent } from '~type/lobby';
+import type { PlayerInfo } from '~type/player';
 
 import {
   Container,
@@ -106,7 +106,7 @@ export const Info: React.FC<Props> = ({
               data-testid={`previewPlayer${slot}`}
             >
               {current && current.slot === slot && (
-              <Player.SelfLabel>You</Player.SelfLabel>
+                <Player.SelfLabel>You</Player.SelfLabel>
               )}
             </Player>
           ) : (

src/client/components/Lobby/World/Entity/helpers.ts

@@ -1,5 +1,5 @@
 import { EntityType } from '~type/entity';
-import { WorldMap } from '~type/world';
+import type { WorldMap } from '~type/world';
 
 export function canBePutTo(world: WorldMap, x: number, y: number): boolean {
   const entity = world[y][x];

src/client/components/Lobby/World/Entity/index.tsx

@@ -1,9 +1,8 @@
 import React, { useContext, useMemo } from 'react';
 
-import { WorldContext } from '~context/WorldContext';
-import { WorldEntity } from '~type/entity';
-
 import { canBePutTo } from './helpers';
+import { WorldContext } from '~context/WorldContext';
+import type { WorldEntity } from '~type/entity';
 
 import { Block, Pointer } from './styled';
 

src/client/components/Lobby/World/Entity/styled.ts

@@ -1,12 +1,14 @@
-import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
-
-import { EntityType, WorldEntity } from '~type/entity';
+import styled, { css } from 'styled-components';
 
 /** Images */
 
 import IconBonusLaser from './icons/l.svg';
 import IconBonusReplacer from './icons/r.svg';
 import IconBonusSpawn from './icons/s.svg';
+import { EntityType } from '~type/entity';
+import type { WorldEntity } from '~type/entity';
+
+import type { FlattenSimpleInterpolation } from 'styled-components';
 
 /** Colors */
 

src/client/components/Lobby/World/index.tsx

@@ -6,14 +6,13 @@ import React, {
   useContext,
 } from 'react';
 
+import { Entity } from './Entity';
 import { SocketContext } from '~context/SocketContext';
 import { WorldContext } from '~context/WorldContext';
-import { WorldEntity } from '~type/entity';
+import type { WorldEntity } from '~type/entity';
 import { LobbyEvent } from '~type/lobby';
-import { PlayerInfo } from '~type/player';
-import { WorldMap } from '~type/world';
-
-import { Entity } from './Entity';
+import type { PlayerInfo } from '~type/player';
+import type { WorldMap } from '~type/world';
 
 import { Field, Line } from './styled';
 

src/client/components/Lobby/index.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect, useContext } from 'react';
 
-import { SocketContext } from '~context/SocketContext';
-import { LobbyEvent, LobbyOptions } from '~type/lobby';
-import { PlayerInfo } from '~type/player';
-
 import { Info } from './Info';
 import { Waiting } from './Waiting';
 import { World } from './World';
+import { SocketContext } from '~context/SocketContext';
+import type { LobbyOptions } from '~type/lobby';
+import { LobbyEvent } from '~type/lobby';
+import type { PlayerInfo } from '~type/player';
 
 import { Container, GameScreen, Error } from './styled';
 

src/client/context/SocketContext.tsx

@@ -1,9 +1,11 @@
-import React, { ReactElement, createContext } from 'react';
+import React, { createContext } from 'react';
 import { useParams } from 'react-router-dom';
-import { Socket } from 'socket.io-client';
 
 import { useSocket } from '~hook/useSocket';
 
+import type { ReactElement } from 'react';
+import type { Socket } from 'socket.io-client';
+
 // @ts-ignore
 export const SocketContext = createContext<Socket>(null);
 

src/client/context/WorldContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
 
-import { WorldMap } from '~type/world';
+import type { WorldMap } from '~type/world';
 
 export const WorldContext = createContext<WorldMap>([]);

src/client/hooks/useSocket.ts

@@ -1,5 +1,7 @@
 import { useMemo } from 'react';
-import io, { Socket } from 'socket.io-client';
+import io from 'socket.io-client';
+
+import type { Socket } from 'socket.io-client';
 
 export function useSocket(
   namespace: string,

src/client/index.tsx

@@ -2,11 +2,10 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
-import { SocketProvider } from '~context/SocketContext';
-
 import { App } from './components/App';
 import { Home } from './components/Home';
 import { Lobby } from './components/Lobby';
+import { SocketProvider } from '~context/SocketContext';
 
 const app = document.getElementById('app');
 

src/const/lobby.ts

@@ -1,4 +1,4 @@
-import { LobbyOptions } from '~type/lobby';
+import type { LobbyOptions } from '~type/lobby';
 
 export const DEFAULT_OPTIONS: LobbyOptions = {
   maxPlayers: 3,

src/server/classes/Core.ts

@@ -1,10 +1,10 @@
 import console from 'console';
 
-import { Namespace, Server } from 'socket.io';
-
-import { LobbyEvent, LobbyInfo, LobbyOptions } from '~type/lobby';
-
 import { Lobby } from './Lobby';
+import type { LobbyInfo, LobbyOptions } from '~type/lobby';
+import { LobbyEvent } from '~type/lobby';
+
+import type { Namespace, Server } from 'socket.io';
 
 export class Core {
   private readonly io: Server;

src/server/classes/Entity.ts

@@ -1,4 +1,4 @@
-import { EntityType, WorldEntity } from '~type/entity';
+import type { EntityType, WorldEntity } from '~type/entity';
 
 export class Entity implements WorldEntity {
   public type: EntityType;

src/server/classes/Lobby.ts

@@ -1,14 +1,15 @@
 import log from 'loglevel';
-import { Namespace } from 'socket.io';
 
+import { World } from './World';
 import { generateUUID } from '../utils/generate-uuid';
 import CONFIG from '~root/config.json';
-import { LobbyOptions, LobbyInfo, LobbyEvent } from '~type/lobby';
-import { PlayerInfo } from '~type/player';
-import { WorldLocation, WorldMap } from '~type/world';
+import type { LobbyOptions, LobbyInfo } from '~type/lobby';
+import { LobbyEvent } from '~type/lobby';
+import type { PlayerInfo } from '~type/player';
+import type { WorldLocation, WorldMap } from '~type/world';
 
-import { Player } from './Player';
-import { World } from './World';
+import type { Player } from './Player';
+import type { Namespace } from 'socket.io';
 
 type LobbyParameters = {
   namespace: () => Namespace

src/server/classes/Player.ts

@@ -1,8 +1,8 @@
-import { Socket } from 'socket.io';
-
 import CONFIG from '~root/config.json';
 import { LobbyEvent } from '~type/lobby';
 
+import type { Socket } from 'socket.io';
+
 export class Player {
   private readonly socket: Socket;
 

src/server/classes/World.ts

@@ -1,10 +1,10 @@
-import { WorldEntity, EntityType, EntityBonusType } from '~type/entity';
-import { LobbyOptions } from '~type/lobby';
-import { WorldLocation, WorldMap } from '~type/world';
-
 import { Entity } from './Entity';
 import { probability } from '../utils/probability';
 import { randomize } from '../utils/randomize';
+import type { WorldEntity } from '~type/entity';
+import { EntityType, EntityBonusType } from '~type/entity';
+import type { LobbyOptions } from '~type/lobby';
+import type { WorldLocation, WorldMap } from '~type/world';
 
 const MAP_SIZE = [25, 11];
 const CHAIN_TARGET_LENGTH = 3;