Merge pull request lichess-org#15997 from schlawg/ui-eslint-stylelint-formatting

UI eslint stylelint formatting

Author: ornicar

.git-blame-ignore-revs

@@ -66,3 +66,6 @@ f058dab0bfdfcf3f40d510526607e3e359354e54
 
 # prettier upgrade from 3.0.x to 3.3.x
 f617815e0a3a2d96de9aca3a04d589c78cbd14e8
+
+# eslint --fix
+35c26fbd9bc0895d0119e4e313003c220417d4bc

.prettierignore

@@ -1,33 +1,14 @@
-!.build
-/modules
-/app
-/project
-/local
-/pnpm-lock.yaml
-/public/css
-/public/piece-css
-/public/compiled
-/public/glyphs.json
-/public/javascripts/vendor
-/public/vendor
-/public/oops/429.html
-
-/translation/dest
-
-/dist/
-/ui/common/**/*.js
-/ui/common/**/*.d.ts
-/ui/game/**/*.js
-/ui/game/**/*.d.ts
-/ui/voice/@build/crowdv/*.json
-/ui/nvui/**/*.js
-/ui/nvui/**/*.d.ts
-/ui/puz/**/*.js
-/ui/puz/**/*.d.ts
-
-*.min.js
+*
+!/package.json
+!/crowdin.yml
+!/eslint.config.mjs
+!/package.json
+!/pnpm-workspace.yaml
+!/.github/
+!/.github/**
+!/ui/
+!/ui/**
+*.ts
+dist/
 readme
-
-/.bloop/
-/.bsp/
-/.metals/
+/ui/voice/@build/crowdv/*.json

bin/watch-format

@@ -0,0 +1,15 @@
+#!/bin/bash
+cd "$(dirname "${BASH_SOURCE:-$0}")/.."
+
+# onchange only has one action, so we need two of them to watch prettier and eslint in parallel.
+# this script avoids zombie processes by killing both when it exits.
+
+pnpm onchange 'ui/**/*.scss' -- prettier --write {{file}} &
+PRETTIER_PID=$!
+
+pnpm onchange 'ui/**/*.ts' -- eslint --fix {{file}} &
+ESLINT_PID=$!
+
+trap "kill $PRETTIER_PID $ESLINT_PID" EXIT
+
+wait

eslint.config.mjs

@@ -1,21 +1,31 @@
 import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import stylisticEslint from '@stylistic/eslint-plugin';
 import tsParser from '@typescript-eslint/parser';
 
 export default [
   {
     files: ['**/*.ts'],
     ignores: ['**/dist/**', '**/node_modules/**', '**/public/**'],
-    plugins: { '@typescript-eslint': typescriptEslint },
-    languageOptions: {
-      parser: tsParser,
-      ecmaVersion: 5,
-      sourceType: 'module',
-    },
-
+    plugins: { '@typescript-eslint': typescriptEslint, '@stylistic': stylisticEslint },
+    languageOptions: { parser: tsParser, ecmaVersion: 5, sourceType: 'module' },
     rules: {
-      'linebreak-style': ['error', 'unix'],
-      'prefer-spread': 'off',
-      'prefer-rest-params': 'off',
+      '@stylistic/indent': ['error', 2],
+      '@stylistic/quotes': ['error', 'single', { avoidEscape: true, allowTemplateLiterals: true }],
+      '@stylistic/semi': ['error', 'always'],
+      '@stylistic/comma-dangle': ['error', 'always-multiline'],
+      '@stylistic/object-curly-spacing': ['error', 'always'],
+      '@stylistic/space-before-function-paren': ['error', 'never'],
+      '@stylistic/max-len': [
+        'warn',
+        {
+          code: 110,
+          ignoreUrls: true,
+          ignoreStrings: true,
+          ignoreComments: true,
+          ignoreTemplateLiterals: true,
+        },
+      ],
+
       '@typescript-eslint/no-empty-interface': 'off',
       '@typescript-eslint/explicit-module-boundary-types': 'off',
       '@typescript-eslint/no-empty-function': 'off',
@@ -24,22 +34,17 @@ export default [
       '@typescript-eslint/no-this-alias': 'off',
       '@typescript-eslint/no-unused-vars': [
         'warn',
-        {
-          varsIgnorePattern: '^_',
-          argsIgnorePattern: '^_',
-          caughtErrorsIgnorePattern: '^_',
-        },
+        { varsIgnorePattern: '^_', argsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' },
       ],
+
+      'linebreak-style': ['error', 'unix'],
+      'prefer-spread': 'off',
+      'prefer-rest-params': 'off',
       'no-duplicate-imports': 'error',
       'no-useless-escape': 'off',
       'no-var': 'warn',
       'no-async-promise-executor': 'warn',
-      'no-constant-condition': [
-        'warn',
-        {
-          checkLoops: false,
-        },
-      ],
+      'no-constant-condition': ['warn', { checkLoops: false }],
       'no-restricted-globals': [
         'error',
         'addEventListener',
@@ -200,7 +205,7 @@ export default [
         'scrollTo',
         'scrollX',
         'scrollY',
-        //"self",
+        //'self',
         'status',
         'statusbar',
         'stop',

package.json

@@ -31,6 +31,7 @@
     "@types/web": "^0.0.158",
     "@typescript-eslint/eslint-plugin": "^8.3.0",
     "@typescript-eslint/parser": "^8.3.0",
+    "@stylistic/eslint-plugin": "^2.7.2",
     "ab": "github:lichess-org/ab-stub",
     "chessground": "^9.1.1",
     "eslint": "^9.9.1",
@@ -40,9 +41,9 @@
     "typescript": "^5.5.4"
   },
   "scripts": {
-    "format": "prettier --write --log-level warn .",
-    "check-format": "prettier --check --log-level warn .",
-    "watch-format": "onchange \"**/*\" -- prettier --write --log-level warn {{changed}}",
+    "format": "prettier --write --log-level warn . && eslint --fix ui",
+    "check-format": "prettier --check --log-level warn . && eslint ui",
+    "watch-format": "bin/watch-format",
     "add-hooks": "git config --add core.hooksPath bin/git-hooks",
     "remove-hooks": "git config --unset core.hooksPath bin/git-hooks",
     "lint": "eslint ui",

pnpm-lock.yaml

@@ -58,7 +58,7 @@ export async function esbuild(tsc?: Promise<void>): Promise<void> {
 const onEndPlugin = {
   name: 'onEnd',
   setup(build: es.PluginBuild) {
-    build.onEnd(async (result: es.BuildResult) => {
+    build.onEnd(async(result: es.BuildResult) => {
       for (const err of result.errors) esbuildMessage(err, true);
       for (const warn of result.warnings) esbuildMessage(warn);
       if (result.errors.length === 0) await jsManifest(result.metafile!);

ui/.build/src/esbuild.ts

@@ -36,7 +36,7 @@ export async function startMonitor(mods: string[]): Promise<void> {
       esbuild(tsc());
     }, 2000);
   };
-  const packageChange = async () => {
+  const packageChange = async() => {
     if (env.rebuild) {
       clearTimeout(tscTimeout);
       clearTimeout(reinitTimeout);

ui/.build/src/monitor.ts

@@ -81,7 +81,7 @@ function compile(sources: string[], logAll = true) {
     const txts = lines(buf.toString('utf8'));
     for (const txt of txts) env.log(c.red(txt), { ctx: 'sass' });
   });
-  sassPs.on('close', async (code: number) => {
+  sassPs.on('close', async(code: number) => {
     if (code !== 0) return env.done(code, 'sass');
     if (awaitingFullBuild && compile(await unbuiltSources()) > 0) return;
     awaitingFullBuild = false; // now we are ready to make manifests

ui/.build/src/sass.ts

@@ -14,7 +14,7 @@ export function stopTsc(): void {
 
 export async function tsc(): Promise<void> {
   return new Promise((resolve, reject) =>
-    (async () => {
+    (async() => {
       if (!env.tsc) return resolve();
 
       const cfg: any = { files: [] };

ui/.build/src/tsc.ts

@@ -88,9 +88,9 @@ declare namespace Tree {
     by:
       | string
       | {
-          id: string;
-          name: string;
-        };
+        id: string;
+        name: string;
+      };
     text: string;
   }
 

ui/@types/lichess/tree.d.ts

@@ -92,7 +92,7 @@ export function compute(ctrl: AnalyseCtrl): DrawShape[] {
         nCeval.pvs[1] &&
         !(ctrl.threatMode() && nThreat && nThreat.pvs.length > 2)
       ) {
-        nCeval.pvs.forEach(function (pv) {
+        nCeval.pvs.forEach(function(pv) {
           if (pv.moves[0] === nextBest) return;
           const shift = winningChances.povDiff(color, nCeval.pvs[0], pv);
           if (shift >= 0 && shift < 0.2) {
@@ -111,7 +111,7 @@ export function compute(ctrl: AnalyseCtrl): DrawShape[] {
 
     shapes = shapes.concat(makeShapesFromUci(rcolor, pv0.moves[0], pv1s.length > 0 ? 'paleRed' : 'red'));
 
-    pv1s.forEach(function (pv) {
+    pv1s.forEach(function(pv) {
       const shift = winningChances.povDiff(rcolor, pv, pv0);
       if (shift >= 0 && shift < 0.2) {
         shapes = shapes.concat(

ui/analyse/src/autoShape.ts

@@ -1,8 +1,8 @@
 import { AnalyseApi, AnalyseOpts } from './interfaces';
 import StrongSocket from 'common/socket';
 
-export default function (start: (opts: AnalyseOpts) => AnalyseApi) {
-  return function (cfg: AnalyseOpts) {
+export default function(start: (opts: AnalyseOpts) => AnalyseApi) {
+  return function(cfg: AnalyseOpts) {
     const socketUrl = `/watch/${cfg.data.game.id}/${cfg.data.player.color}/v6`;
     site.socket = new StrongSocket(socketUrl, cfg.data.player.version, {
       params: {

ui/analyse/src/boot.ts

@@ -19,7 +19,7 @@ export function exitVariation(ctrl: AnalyseCtrl): void {
   if (ctrl.onMainline) return;
   let found,
     path = treePath.root;
-  ctrl.nodeList.slice(1, -1).forEach(function (n: Tree.Node) {
+  ctrl.nodeList.slice(1, -1).forEach(function(n: Tree.Node) {
     path += n.id;
     if (n.children[1]) found = path;
   });

ui/analyse/src/control.ts

@@ -9,7 +9,7 @@ const oKeys = ['pawn', 'knight', 'bishop', 'rook', 'queen'];
 
 type Position = 'top' | 'bottom';
 
-export default function (ctrl: AnalyseCtrl, color: Color, position: Position) {
+export default function(ctrl: AnalyseCtrl, color: Color, position: Position) {
   if (!ctrl.node.crazy || ctrl.data.game.variant.key !== 'crazyhouse') return;
   const pocket = ctrl.node.crazy.pockets[color === 'white' ? 0 : 1];
   const dropped = ctrl.justDropped;