feat(ci): Run eslint on ci

.drone.yml

@@ -15,6 +15,10 @@ steps:
   image: node-pnpm:16-alpine
   commands:
     - pnpm format:check
+- name: Lint code
+  image: node-pnpm:16-alpine
+  commands:
+    - pnpm lint
 - name: Build site
   image: node-pnpm:16-alpine
   commands:

.eslintignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# lockfile
+pnpm-lock.yaml
+
+# CI
+.pnpm-store
+.drone.yml
+
+# Config
+.eslintrc.js
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true,
+    },
+    extends: [
+        'eslint:recommended',
+        'plugin:react/recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react/jsx-runtime',
+    ],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        },
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+    },
+    plugins: ['react', '@typescript-eslint'],
+    rules: {
+        '@typescript-eslint/no-non-null-assertion': 'off',
+    },
+};

package.json

@@ -7,7 +7,8 @@
         "build": "tsc && vite build",
         "preview": "vite preview",
         "format": "prettier --write .",
-        "format:check": "prettier --check ."
+        "format:check": "prettier --check .",
+        "lint": "eslint . --max-warnings 0"
     },
     "dependencies": {
         "@fontsource/noto-sans-symbols-2": "^4.5.9",
@@ -16,9 +17,14 @@
         "react-draggable": "^4.4.5"
     },
     "devDependencies": {
+        "@types/node": "^18.0.3",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
+        "@typescript-eslint/eslint-plugin": "^5.30.5",
+        "@typescript-eslint/parser": "^5.30.5",
         "@vitejs/plugin-react": "^1.3.0",
+        "eslint": "^8.19.0",
+        "eslint-plugin-react": "^7.30.1",
         "prettier": "^2.7.1",
         "ts-node": "^10.8.2",
         "typescript": "^4.6.3",

src/App.tsx

@@ -1,14 +1,6 @@
 import './App.css';
 import Board from './components/Board';
-import {
-    LEGAL_MOVE_TEST_FEN,
-    parseFEN,
-    PAWN_BUG_TEST_FEN,
-    POSITION_2,
-    POSITION_4,
-    POSITION_5,
-    START_FEN,
-} from './utils/board';
+import { parseFEN, START_FEN } from './utils/board';
 
 function App() {
     const startState = parseFEN(START_FEN);

src/components/Board.tsx

@@ -1,13 +1,7 @@
-import { FC, Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { FC, Fragment, useCallback, useMemo, useState } from 'react';
 import { encodeFEN, eq, GameState, isChecked } from '../utils/board';
-import {
-    filterMoves,
-    generateLegalMoves,
-    generatePseudolegalMoves,
-    makeMove,
-    Move,
-} from '../utils/move';
-import { BoardPiece, getType, otherSide, Side } from '../utils/piece';
+import { filterMoves, generateLegalMoves, makeMove, Move } from '../utils/move';
+import { getType, otherSide } from '../utils/piece';
 import styles from './Board.module.css';
 import Piece from './Piece';
 
@@ -45,9 +39,7 @@ const Board: FC<Props> = (props) => {
     const [enPassantTarget, setEnPassantTarget] = useState(
         props.state.enPassantTarget
     );
-    const [halfmoveClock, setHalfmoveClock] = useState(
-        props.state.halfmoveClock
-    );
+    const [halfmoveClock] = useState(props.state.halfmoveClock);
     const [fullmoveNumber, setFullmoveNumber] = useState(
         props.state.fullmoveNumber
     );

src/main.tsx

@@ -5,8 +5,11 @@ import './index.css';
 import '@fontsource/noto-sans-symbols-2';
 import { runAllPerfts, runPerft } from './test/perft';
 
-(window as any).runPerfts = runAllPerfts;
-(window as any).runPerft = runPerft;
+/* eslint @typescript-eslint/no-explicit-any: off */
+{
+    (window as any).runPerfts = runAllPerfts;
+    (window as any).runPerft = runPerft;
+}
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>

src/utils/board.ts

@@ -1,16 +1,5 @@
-import {
-    generateLegalMoves,
-    generatePseudolegalMoves,
-    isValidMove,
-    toAlgebraic,
-} from './move';
-import {
-    BoardPiece,
-    otherSide,
-    pieceFromChar,
-    Side,
-    toAlgebraicChar,
-} from './piece';
+import { generatePseudolegalMoves } from './move';
+import { BoardPiece, pieceFromChar, Side, toAlgebraicChar } from './piece';
 
 export interface Coordinate {
     rank: number;
@@ -107,6 +96,7 @@ export const POSITION_5 =
 export const POSITION_6 =
     'r4rk1/1pp1qppp/p1np1n2/2b1p1B1/2B1P1b1/P1NP1N2/1PP1QPPP/R4RK1 w - - 0 10';
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 (window as any).START_FEN = START_FEN;
 (window as any).TEST_FEN = TEST_FEN;
 (window as any).PAWN_BUG_TEST_FEN = PAWN_BUG_TEST_FEN;
@@ -117,6 +107,7 @@ export const POSITION_6 =
 (window as any).POSITION_4 = POSITION_4;
 (window as any).POSITION_5 = POSITION_5;
 (window as any).POSITION_6 = POSITION_6;
+/* eslint-enable @typescript-eslint/no-explicit-any */
 
 export interface GameState {
     board: Board;
@@ -197,16 +188,16 @@ export function encodeFEN(state: GameState): string {
 function parseFENPieces(fen: string): BoardPiece[][] {
     const board = Array(8)
         .fill(0)
-        .map((_) => Array(8).fill(null));
+        .map(() => Array(8).fill(null));
     let rankIdx = 7;
     for (const rank of fen.split('/')) {
         let file = 0;
         for (const c of rank) {
-            let skip = parseInt(c);
+            const skip = parseInt(c);
             if (!isNaN(skip)) {
                 file += skip;
             } else {
-                let piece = pieceFromChar(c);
+                const piece = pieceFromChar(c);
                 board[rankIdx][file] = piece;
                 file++;
             }
@@ -226,14 +217,15 @@ function encodeFENBoard(board: Board): string {
             let emptyCount = 0;
             let result = '';
             while (file < 8) {
-                if (row[file] === null) {
+                const piece = row[file];
+                if (piece === null) {
                     emptyCount++;
                 } else {
                     if (emptyCount > 0) {
                         result += emptyCount.toString();
                         emptyCount = 0;
                     }
-                    result += toAlgebraicChar(row[file]!);
+                    result += toAlgebraicChar(piece);
                 }
                 file++;
             }

src/utils/move.ts

@@ -1,6 +1,5 @@
 import {
     algebraicCoord,
-    Board,
     coord,
     Coordinate,
     coordsBetween,
@@ -147,7 +146,7 @@ function addIfCapture(
     state: GameState,
     moves: Move[],
     move: Move,
-    enPassant: boolean = false
+    enPassant = false
 ): MoveResult {
     if (
         move.to.rank < 0 ||
@@ -275,7 +274,7 @@ function generateLineMoves(
     moves: Move[],
     type: PieceType,
     directions: Coordinate[],
-    distanceLimit: number = 8
+    distanceLimit = 8
 ) {
     const validPiece: Piece = `${state.sideToMove}-${type}`;
 
@@ -411,6 +410,7 @@ export function filterMoves(
 }
 
 function dbg<T>(t: T, m?: string): T {
+    m;
     // m ? console.trace(m, t) : console.trace(t);
     return t;
 }
@@ -422,7 +422,8 @@ export function makeMove(
 ): GameState {
     const { board, sideToMove } = state;
     const newBoard = board.map((rank) => rank.slice());
-    const piece = board[move.from.rank][move.from.file]!;
+    const piece = board[move.from.rank][move.from.file];
+    if (!piece) throw new Error();
     const newCastling = { ...state.castling };
     if (getType(piece) === 'king') {
         newCastling[sideToMove] = {

vite.config.ts

@@ -5,4 +5,9 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
     plugins: [react()],
     base: '',
+    server: {
+        hmr: {
+            clientPort: parseInt(process.env.CLIENT_PORT || '3000'),
+        },
+    },
 });