Add yarn lint (eslint, prettier) to CI

.github/workflows/continuous-integration.yml

@@ -8,6 +8,37 @@ on:
       - main
 
 jobs:
+  lint-js:
+    name: Lint JS/JSX (ESLint & Prettier)
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.4'
+          coverage: none
+
+      - name: Install Composer dependencies
+        run: composer install --no-interaction --prefer-dist --no-progress
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run ESLint
+        run: yarn lint:eslint
+
+      - name: Run Prettier
+        run: yarn lint:prettier
+
   matrix:
     name: Generate job matrix
     runs-on: ubuntu-latest

eslint.config.js

@@ -0,0 +1,51 @@
+const js = require('@eslint/js');
+const react = require('eslint-plugin-react');
+const reactHooks = require('eslint-plugin-react-hooks');
+const prettier = require('eslint-config-prettier');
+const babelParser = require('@babel/eslint-parser');
+
+module.exports = [
+    js.configs.recommended,
+    {
+        files: ['assets/**/*.{js,jsx}'],
+        languageOptions: {
+            parser: babelParser,
+            parserOptions: {
+                ecmaVersion: 'latest',
+                sourceType: 'module',
+                ecmaFeatures: {
+                    jsx: true,
+                },
+                requireConfigFile: false,
+                babelOptions: {
+                    presets: ['@babel/preset-react'],
+                },
+            },
+            globals: {
+                window: 'readonly',
+                document: 'readonly',
+                console: 'readonly',
+                require: 'readonly',
+                module: 'readonly',
+                process: 'readonly',
+                fetch: 'readonly',
+            },
+        },
+        plugins: {
+            react,
+            'react-hooks': reactHooks,
+        },
+        rules: {
+            ...react.configs.recommended.rules,
+            ...reactHooks.configs.recommended.rules,
+            'react/react-in-jsx-scope': 'off',
+            'react/prop-types': 'warn',
+        },
+        settings: {
+            react: {
+                version: 'detect',
+            },
+        },
+    },
+    prettier,
+];

package.json

@@ -9,15 +9,23 @@
         "dev": "encore dev",
         "watch": "encore dev --watch",
         "build": "encore production --progress",
-        "prepare": "husky"
+        "prepare": "husky",
+        "lint": "yarn lint:eslint && yarn lint:prettier",
+        "lint:eslint": "eslint assets",
+        "lint:prettier": "prettier --check \"assets/**/*.{js,scss,md}\"",
+        "format": "yarn format:eslint && yarn format:prettier",
+        "format:eslint": "eslint assets --fix",
+        "format:prettier": "prettier --write \"assets/**/*.{js,scss,md}\""
     },
     "lint-staged": {
-        "*.{js,scss,md}": "prettier --write",
+        "*.{js,jsx}": "eslint --fix",
+        "*.{scss,md}": "prettier --write",
         "*.php": "php-cs-fixer fix --config=.php-cs-fixer.dist.php",
         "*.twig": "vendor/bin/twig-cs-fixer lint --fix --config=.twig-cs-fixer.php"
     },
     "devDependencies": {
         "@babel/core": "^7.28.5",
+        "@babel/eslint-parser": "^7.28.5",
         "@babel/preset-env": "^7.28.5",
         "@babel/preset-react": "^7.28.5",
         "@hotwired/stimulus": "^3.2.2",
@@ -26,6 +34,10 @@
         "@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets",
         "@symfony/webpack-encore": "^5.2.0",
         "core-js": "^3.46.0",
+        "eslint": "^9.39.1",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^7.0.1",
         "file-loader": "^6.2.0",
         "husky": "^9.1.7",
         "lint-staged": ">=16.2.6",